Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-19 01:22:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Split styles per component

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-30 15:13:26 +03:00
parent 523dda63a7
commit c87d1fb8ae
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
5 changed files with 209 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/routes/Settings/SectionsList/SectionsList.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const { Button, Dropdown, Checkbox, ColorInput } = require('stremio/common');
const Icon = require('stremio-icons/dom/Icon');
const classnames = require('classnames');
const styles = require('../styles');
const styles = require('./styles');
const SectionsList = React.forwardRef(({ className, sections, preferences, onPreferenceChanged, onScroll }, ref) => {
const scrollContainerRef = ref;

181
src/routes/Settings/SectionsList/styles.less Normal file
View file

@ -0,0 +1,181 @@
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
.section {
padding: 4rem 2rem;
.section-header {
margin: 0 1.5rem 1.5rem 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.input-container {
margin: 1.5rem;
display: flex;
flex-direction: column;
.input-header {
margin-bottom: 0.5rem;
color: var(--color-surfacelighter);
}
.checkbox-icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: var(--color-surfacelight);
}
&.user-container {
flex-direction: row;
align-items: center;
.avatar {
margin: 0 1rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
border: var(--focusable-border-size) solid var(--color-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.email {
color: var(--color-surfacelighter);
}
}
&.select-container {
.dropdown {
height: 3rem;
width: var(--input-width);
}
}
&.link-container {
margin: 1rem 1.5rem;
.link {
display: block;
color: var(--color-secondarylight);
&:focus {
color: var(--color-surface);
}
&:hover {
color: var(--color-surfacelighter);
}
}
}
&.button-container {
.button {
padding: 0.7rem;
width: var(--input-width);
min-height: calc(var(--input-width) * 0.09);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
cursor: pointer;
.icon {
width: 1.4rem;
height: 100%;
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
background-color: var(--color-primarylight);
}
}
}
&.checkbox-container {
.checkbox {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
.label {
width: 100%;
margin-left: 0.5rem;
color: var(--color-surfacelight);
}
&:focus,
&:hover {
.checkbox-icon {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
}
}
}
&.text-container {
.text {
display: flex;
flex-direction: row;
align-items: center;
.icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal5);
}
.x-icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal2);
}
.label {
width: 100%;
color: var(--color-surfacelighter);
}
}
}
&.color-container {
.color-picker {
width: var(--input-width);
height: calc(var(--input-width) * 0.08);
cursor: pointer;
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
}
}
}
}
>:last-child {
margin-bottom: 0;
}
}

2
src/routes/Settings/SectionsSelector/SectionsSelector.js
View file

@ -2,7 +2,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const { Button } = require('stremio/common');
const classnames = require('classnames');
const styles = require('../styles');
const styles = require('./styles');
const SectionsSelector = ({ className, sections, selectedSectionId, onSelectedSection }) => {
return (

26
src/routes/Settings/SectionsSelector/styles.less Normal file
View file

@ -0,0 +1,26 @@
.section-label {
padding: 1rem;
font-size: 1.1rem;
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
color: var(--color-surfacelight);
cursor: pointer;
&.selected {
color: var(--color-surfacelighter);
background-color: var(--color-background);
&:hover {
background-color: var(--color-background);
}
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
color: var(--color-surfacelighter);
background-color: var(--color-surface20);
border-color: transparent;
}
}

206
src/routes/Settings/styles.less
View file

@ -1,7 +1,3 @@
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
.settings-parent-container {
display: flex;
flex-direction: column;
@ -29,32 +25,7 @@
flex-direction: column;
background-color: var(--color-backgroundlighter);
.section-label {
padding: 1rem;
font-size: 1.1rem;
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
color: var(--color-surfacelight);
cursor: pointer;
&.selected {
color: var(--color-surfacelighter);
background-color: var(--color-background);
&:hover {
background-color: var(--color-background);
}
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
color: var(--color-surfacelighter);
background-color: var(--color-surface20);
border-color: transparent;
}
}
}
.scroll-container {
@ -62,183 +33,6 @@
flex: 1;
overflow-y: auto;
.section {
padding: 4rem 2rem;
.section-header {
margin: 0 1.5rem 1.5rem 1.5rem;
font-size: 2rem;
color: var(--color-surfacelighter);
}
.input-container {
margin: 1.5rem;
display: flex;
flex-direction: column;
.input-header {
margin-bottom: 0.5rem;
color: var(--color-surfacelighter);
}
.checkbox-icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: var(--color-surfacelight);
}
&.user-container {
flex-direction: row;
align-items: center;
.avatar {
margin: 0 1rem;
width: 4.2rem;
height: 4.2rem;
border-radius: 50%;
border: var(--focusable-border-size) solid var(--color-primary);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.email {
color: var(--color-surfacelighter);
}
}
&.select-container {
.dropdown {
height: 3rem;
width: var(--input-width);
}
}
&.link-container {
margin: 1rem 1.5rem;
.link {
display: block;
color: var(--color-secondarylight);
&:focus {
color: var(--color-surface);
}
&:hover {
color: var(--color-surfacelighter);
}
}
}
&.button-container {
.button {
padding: 0.7rem;
width: var(--input-width);
min-height: calc(var(--input-width) * 0.09);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
cursor: pointer;
.icon {
width: 1.4rem;
height: 100%;
margin-right: 0.5rem;
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
background-color: var(--color-primarylight);
}
}
}
&.checkbox-container {
.checkbox {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
.label {
width: 100%;
margin-left: 0.5rem;
color: var(--color-surfacelight);
}
&:focus, &:hover {
.checkbox-icon {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
}
}
}
}
&.text-container {
.text {
display: flex;
flex-direction: row;
align-items: center;
.icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal5);
}
.x-icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
fill: var(--color-signal2);
}
.label {
width: 100%;
color: var(--color-surfacelighter);
}
}
}
&.color-container {
.color-picker {
width: var(--input-width);
height: calc(var(--input-width) * 0.08);
cursor: pointer;
&:focus {
border-color: var(--color-surfacelighter);
}
&:hover {
border-color: transparent;
}
}
}
}
>:last-child {
margin-bottom: 0;
}
}
>:not(:last-child) {
border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
}