mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Css linting (#66)
* creating css .stylelintrc file (cherry picked from commit df0a573666151fb522cb203f82a7a6a979fc33cc) * updating lintfile (cherry picked from commit 623ad22d69566a912988239c05d2f803e735362f) * ignore base bootstrap styles (cherry picked from commit 0ea94926a004367a67983b08a8ea47c974ef6e49) * Working on making css inline with css linting (cherry picked from commit 259fdfcaf9ae280e664471c7d5278214d991168e) * removing generic class names and nesting for clear names without nesting (cherry picked from commit d0427c2c09771df049ed9ab4e7b5d2f2076106fd) * making components compatable with new css lint (cherry picked from commit b147f157c3b9b39708a750f281d8278211454137) * updating csslint file (cherry picked from commit 53b0480476b6e5c4d94763baeaef7d33e9c2342d) * adding alphabetical ordering to stylelint and updating css files with this (cherry picked from commit a6b7860efa01e673df20546bb5830587eeb140d6) * integrate stylelint with webpack this way we can integrate postcss plugins # Conflicts: # ui/yarn.lock * exit process with 1, when stylelint finds issues * listen to unhandled rejection from stylelint * use stylelintignore * fix stylelint raised issues
This commit is contained in:
parent
e8e3f0b3ac
commit
6a994e05f6
8
ui/.stylelintignore
Normal file
8
ui/.stylelintignore
Normal file
@ -0,0 +1,8 @@
|
||||
/src/components/base/*.css
|
||||
/node_modules
|
||||
coverage
|
||||
.nyc_output
|
||||
docs/static
|
||||
static
|
||||
webpack/embed-markdown-loader
|
||||
|
50
ui/.stylelintrc
Normal file
50
ui/.stylelintrc
Normal file
@ -0,0 +1,50 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"color-hex-case": "upper",
|
||||
"color-hex-length": "long",
|
||||
"font-family-name-quotes": "always-where-recommended",
|
||||
"string-quotes": "double",
|
||||
"value-list-comma-space-after": "always",
|
||||
"custom-property-no-outside-root": true,
|
||||
"property-no-unknown": [true, {
|
||||
"ignoreProperties": [
|
||||
"",
|
||||
"composes"
|
||||
]
|
||||
}],
|
||||
"declaration-colon-space-after": "always",
|
||||
"declaration-no-important": true,
|
||||
"declaration-block-no-duplicate-properties": true,
|
||||
"declaration-block-properties-order": "alphabetical",
|
||||
"declaration-block-semicolon-newline-after": "always",
|
||||
"block-closing-brace-newline-after": "always-single-line",
|
||||
"block-closing-brace-newline-before": "always",
|
||||
"block-no-single-line": true,
|
||||
"block-opening-brace-newline-after": "always",
|
||||
"selector-attribute-quotes": "always",
|
||||
"selector-max-compound-selectors": 3,
|
||||
"selector-no-attribute": true,
|
||||
"selector-no-id": true,
|
||||
"selector-no-universal": true,
|
||||
"selector-pseudo-class-parentheses-space-inside": "always",
|
||||
"selector-list-comma-newline-before": "never-multi-line",
|
||||
"selector-list-comma-space-before": "always-single-line",
|
||||
"media-feature-parentheses-space-inside": "always",
|
||||
"at-rule-name-space-after": "always",
|
||||
"at-rule-no-unknown": [true, {
|
||||
"ignoreAtRules": [
|
||||
"/mixin|for/",
|
||||
""
|
||||
]
|
||||
}],
|
||||
"max-nesting-depth": 3,
|
||||
"no-descending-specificity": true,
|
||||
"no-duplicate-selectors": true,
|
||||
"no-unknown-animations": true,
|
||||
"custom-property-empty-line-before": null,
|
||||
"selector-pseudo-class-no-unknown": [true, {
|
||||
"ignorePseudoClasses": ["global", "$"]
|
||||
}]
|
||||
}
|
||||
}
|
@ -54,6 +54,7 @@ clean:
|
||||
.PHONY: lint
|
||||
lint:
|
||||
$(bindir)/eslint .
|
||||
./scripts/stylelint
|
||||
|
||||
.PHONY: lint-ci
|
||||
lint-ci:
|
||||
|
@ -53,6 +53,7 @@
|
||||
"extract-text-webpack-plugin": "^2.0.0-beta.4",
|
||||
"json-loader": "^0.5.4",
|
||||
"lodash.get": "^4.4.2",
|
||||
"memory-fs": "^0.3.0",
|
||||
"nyc": "^8.3.1",
|
||||
"param-case": "^2.1.0",
|
||||
"postcss-at-rules-variables": "0.0.25",
|
||||
@ -72,6 +73,9 @@
|
||||
"react-router": "^4.0.0-alpha.4",
|
||||
"st": "^1.2.0",
|
||||
"style-loader": "^0.13.1",
|
||||
"stylelint": "^7.5.0",
|
||||
"stylelint-config-standard": "^14.0.0",
|
||||
"stylelint-webpack-plugin": "^0.4.0",
|
||||
"tap-xunit": "^1.4.0",
|
||||
"title-case": "^2.1.0",
|
||||
"webpack": "^2.1.0-beta.25",
|
||||
|
32
ui/scripts/stylelint
Executable file
32
ui/scripts/stylelint
Executable file
@ -0,0 +1,32 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const StyleLintPlugin = require('stylelint-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const MemoryFS = require('memory-fs');
|
||||
const config = require('../webpack');
|
||||
|
||||
const mfs = new MemoryFS();
|
||||
const compiler = webpack(Object.assign(config, {
|
||||
plugins: config.plugins.concat([
|
||||
new StyleLintPlugin({
|
||||
configFile: '.stylelintrc',
|
||||
files: [
|
||||
'**/*.css'
|
||||
],
|
||||
failOnError: true
|
||||
})
|
||||
])
|
||||
}));
|
||||
|
||||
mfs.mkdirpSync(config.output.path);
|
||||
compiler.outputFileSystem = mfs;
|
||||
|
||||
compiler.run((err, stats) => {
|
||||
if (err) {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
|
||||
process.on('unhandledRejection', () => {
|
||||
process.exit(1);
|
||||
});
|
@ -1,10 +1,10 @@
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
height: remCalc(50);
|
||||
height: remcalc(50);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
width: remCalc(50);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: remcalc(50);
|
||||
}
|
||||
|
||||
.letter {
|
||||
@ -12,7 +12,6 @@
|
||||
}
|
||||
|
||||
.picture {
|
||||
composes: verticle_align_center from "../../shared/composers.css";
|
||||
max-width: 60%;
|
||||
|
||||
composes: verticle_align_center from '../../shared/composers.css';
|
||||
}
|
||||
|
@ -31,8 +31,8 @@
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #373a3c;
|
||||
background-color: #fff;
|
||||
color: #373A3C;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
& :global {
|
||||
|
||||
@ -593,4 +593,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -3,11 +3,11 @@
|
||||
|
||||
:root {
|
||||
--primary-background: ~colors.brandPrimary;
|
||||
--primary-border: #2532bb;
|
||||
--primary-color: #ffffff;
|
||||
--primary-border: #2532BB;
|
||||
--primary-color: #FFFFFF;
|
||||
|
||||
--secondary-backgroud: #ffffff;
|
||||
--secondary-border: #d8d8d8;
|
||||
--secondary-backgroud: #FFFFFF;
|
||||
--secondary-border: #D8D8D8;
|
||||
--secondary-color: #646464;
|
||||
|
||||
--inactive-background: #F9F9F9;
|
||||
@ -22,12 +22,12 @@
|
||||
}
|
||||
|
||||
.button {
|
||||
border-radius: remCalc(~boxes.borderRadius);
|
||||
border-radius: remcalc(~boxes.borderRadius);
|
||||
box-shadow: ~boxes.bottomShaddow;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: remCalc(16);
|
||||
min-width: remCalc(120);
|
||||
padding: remCalc(18 24);
|
||||
font-size: remcalc(16);
|
||||
min-width: remcalc(120);
|
||||
padding: remcalc(18 24);
|
||||
|
||||
&.primary {
|
||||
@add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);
|
||||
|
@ -1,8 +1,3 @@
|
||||
input[type='checkbox'] {
|
||||
&.checkbox {
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #646464;
|
||||
}
|
||||
|
@ -17,21 +17,21 @@
|
||||
|
||||
@define-mixin viewport $size {
|
||||
&.$(size) {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 to var(--grid-columns) {
|
||||
&.$(size)-$i {
|
||||
flex-basis: calc( ($i / var(--grid-columns)) * 100%);
|
||||
max-width: calc( ($i / var(--grid-columns)) * 100%);
|
||||
flex-basis: calc(($i / var(--grid-columns)) * 100%);
|
||||
max-width: calc(($i / var(--grid-columns)) * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 to var(--grid-columns) {
|
||||
&.$(size)-offset-$i {
|
||||
margin-left: calc( ($i / var(--grid-columns)) * 100%);
|
||||
margin-left: calc(($i / var(--grid-columns)) * 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,8 +39,8 @@
|
||||
.column {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 auto;
|
||||
padding-right: var(--half-gutter-width, 0.5rem);
|
||||
padding-left: var(--half-gutter-width, 0.5rem);
|
||||
padding-right: var(--half-gutter-width, 0.5rem);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: column-reverse;
|
||||
@ -48,15 +48,15 @@
|
||||
|
||||
@mixin viewport xs;
|
||||
|
||||
@media (--sm-viewport) {
|
||||
@media ( --sm-viewport ) {
|
||||
@mixin viewport sm;
|
||||
}
|
||||
|
||||
@media (--md-viewport) {
|
||||
@media ( --md-viewport ) {
|
||||
@mixin viewport md;
|
||||
}
|
||||
|
||||
@media (--lg-viewport) {
|
||||
@media ( --lg-viewport ) {
|
||||
@mixin viewport lg;
|
||||
}
|
||||
}
|
||||
|
@ -11,32 +11,31 @@
|
||||
--container-sm: ~sizes.containerSm;
|
||||
}
|
||||
|
||||
|
||||
@custom-media --sm-viewport ~breakpoints.sm;
|
||||
@custom-media --md-viewport ~breakpoints.md;
|
||||
@custom-media --lg-viewport ~breakpoints.lg;
|
||||
|
||||
|
||||
.container-fluid, .container {
|
||||
margin-right: auto;
|
||||
.container-fluid,
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-right: var(--outer-margin);
|
||||
padding-left: var(--outer-margin);
|
||||
padding-right: var(--outer-margin);
|
||||
}
|
||||
|
||||
.container {
|
||||
@media (--sm-viewport) {
|
||||
@media ( --sm-viewport ) {
|
||||
width: var(--container-sm, 46rem);
|
||||
}
|
||||
|
||||
@media (--md-viewport) {
|
||||
@media ( --md-viewport ) {
|
||||
width: var(--container-md, 61rem);
|
||||
}
|
||||
|
||||
@media (--lg-viewport) {
|
||||
@media ( --lg-viewport ) {
|
||||
width: var(--container-lg, 71rem);
|
||||
}
|
||||
}
|
||||
|
@ -1,3 +1,5 @@
|
||||
@import "../../shared/mixins.css";
|
||||
|
||||
~boxes: "../../shared/constants.js";
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
@ -5,21 +7,20 @@
|
||||
--background-color: ~colors.background;
|
||||
--border-color: ~colors.border;
|
||||
--border-selected-color: ~colors.borderSelected;
|
||||
--border-radius: remCalc(~boxes.borderRadius);
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--inset-box-shadow: ~boxes.insetShaddow;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: var(--inset-box-shadow);
|
||||
border-radius: var(--border-radius);
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
visibility: visible;
|
||||
height: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
|
||||
@add-mixin create-base-box-properties;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--border-selected-color);
|
||||
|
@ -16,7 +16,7 @@ const Pagination = ({
|
||||
const cn = classNames(
|
||||
child.props.className,
|
||||
child.props.active ? styles.active : '',
|
||||
styles.li
|
||||
styles.pagination_item
|
||||
);
|
||||
|
||||
return (
|
||||
@ -28,7 +28,7 @@ const Pagination = ({
|
||||
|
||||
return (
|
||||
<nav aria-label={label} className={cn}>
|
||||
<ul className={styles.ul}>
|
||||
<ul className={styles.paginatation_list}>
|
||||
{pages}
|
||||
</ul>
|
||||
</nav>
|
||||
|
@ -1,55 +1,50 @@
|
||||
@import "../../shared/mixins.css";
|
||||
|
||||
~boxes: "../../shared/constants.js";
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--border-checked: ~boxes.border.checked;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remCalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
--border-checked: ~boxes.border.checked;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
.paginatation_list {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& .ul {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
.pagination_item {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
float: left;
|
||||
height: 50px;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
min-width: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
position: relative;
|
||||
|
||||
& .li {
|
||||
cursor: pointer;
|
||||
@add-mixin create-base-box-properties;
|
||||
|
||||
height: 50px;
|
||||
min-width: 50px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
margin-right: 10px;
|
||||
&:last-child {
|
||||
margin-right: inherit;
|
||||
}
|
||||
|
||||
border: var(--border-unchecked);
|
||||
box-shadow: var(--bottom-shaddow);
|
||||
border-radius: var(--border-radius);
|
||||
&:not( .active ):hover {
|
||||
border: var(--border-checked);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
float: left;
|
||||
& a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-right: inherit;
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
border: var(--border-checked);
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
&.active {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
@ -2,21 +2,20 @@
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--border-checked: ~boxes.border.checked;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remCalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
--border-checked: ~boxes.border.checked;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
}
|
||||
|
||||
.group {
|
||||
& .item {
|
||||
cursor: pointer;
|
||||
background: #FFFFFF;
|
||||
border: var(--border-unchecked);
|
||||
box-shadow: var(--bottom-shaddow);
|
||||
border-radius: 4pxvar(--border-radius);
|
||||
margin-bottom: remCalc(15);
|
||||
padding: remCalc(25);
|
||||
cursor: pointer;
|
||||
margin-bottom: remcalc(15);
|
||||
padding: remcalc(25);
|
||||
|
||||
@add-mixin create-base-box-properties;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: initial;
|
||||
|
@ -1,10 +1,10 @@
|
||||
@import '../../shared/mixins.css';
|
||||
@import "../../shared/mixins.css";
|
||||
|
||||
:root {
|
||||
--radio-radius: 20px;
|
||||
--radio-border-size: calc( var(--radio-radius) / 4 );
|
||||
--radio-border-size: calc(var(--radio-radius) / 4);
|
||||
--dot-color: #646464;
|
||||
--border-color: #cfd1d1;
|
||||
--border-color: #CFD1D1;
|
||||
}
|
||||
|
||||
.radio {
|
||||
@ -15,8 +15,8 @@
|
||||
}
|
||||
|
||||
& .span {
|
||||
margin-left: remCalc(30);
|
||||
margin-right: remCalc(20);
|
||||
margin-left: remcalc(30);
|
||||
margin-right: remcalc(20);
|
||||
|
||||
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
|
||||
border: var(--radio-border-size) solid white;
|
||||
@ -25,11 +25,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .input[type="radio"] {
|
||||
& .input {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
|
||||
&:checked ~ .span:before {
|
||||
&:checked ~ .span::before {
|
||||
background: var(--dot-color);
|
||||
}
|
||||
}
|
||||
|
@ -10,7 +10,7 @@ const RangeSlider = ({
|
||||
|
||||
const slider = classNames(
|
||||
className,
|
||||
styles.input
|
||||
styles.range_input
|
||||
);
|
||||
|
||||
// TODO: Get rid of inline styles
|
||||
|
@ -1,4 +1,4 @@
|
||||
@import '../../shared/mixins.css';
|
||||
@import "../../shared/mixins.css";
|
||||
|
||||
~colors: "../../shared/constants.js";
|
||||
~boxes: "../../shared/constants.js";
|
||||
@ -14,24 +14,22 @@
|
||||
MIXINS - Defining Mixins for slider
|
||||
*/
|
||||
@define-mixin range-track {
|
||||
animate: 0.2s;
|
||||
background: var(--primary-background);
|
||||
cursor: pointer;
|
||||
height: remCalc(6);
|
||||
height: remcalc(6);
|
||||
width: 100%;
|
||||
|
||||
@add-mixin create-base-box-properties remCalc(25)
|
||||
@add-mixin create-base-box-properties remcalc(25);
|
||||
}
|
||||
|
||||
@define-mixin range-thumb {
|
||||
background: #ffffff;
|
||||
|
||||
-webkit-appearance: none;
|
||||
background: #FFFFFF;
|
||||
cursor: pointer;
|
||||
height: remCalc(24);
|
||||
height: remcalc(24);
|
||||
position: relative;
|
||||
top: -10px;
|
||||
width: remCalc(36);
|
||||
-webkit-appearance: none;
|
||||
width: remcalc(36);
|
||||
|
||||
@add-mixin create-base-box-properties;
|
||||
}
|
||||
@ -39,13 +37,15 @@
|
||||
@define-mixin range-lower {
|
||||
background: var(--primary-background);
|
||||
height: 6px;
|
||||
@add-mixin create-base-box-properties remCalc(50), none;
|
||||
|
||||
@add-mixin create-base-box-properties remcalc(50), none;
|
||||
}
|
||||
|
||||
@define-mixin range-upper {
|
||||
background: #e6e6e6;
|
||||
background: #E6E6E6;
|
||||
height: 6px;
|
||||
@add-mixin create-base-box-properties remCalc(50);
|
||||
|
||||
@add-mixin create-base-box-properties remcalc(50);
|
||||
}
|
||||
|
||||
/*
|
||||
@ -53,20 +53,14 @@
|
||||
|
||||
TODO: Complied incorrectly when selectors are in a comma seperated list
|
||||
*/
|
||||
.input[type="range"] {
|
||||
border: none;
|
||||
box-shadow:none;
|
||||
margin: remCalc(10 0);
|
||||
width: 100%;
|
||||
.range_input {
|
||||
-webkit-appearance: none;
|
||||
|
||||
// Try and figure out why display none is being set in doc.css
|
||||
display: block;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
display: block; /* Try and figure out why display none is being set in doc.css */
|
||||
margin: remcalc(10 0);
|
||||
visibility: visible;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
@ -96,30 +90,30 @@
|
||||
@add-mixin range-thumb;
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
@add-mixin range-lower
|
||||
@add-mixin range-lower;
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@add-mixin range-lower
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
@add-mixin range-lower
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@add-mixin range-upper;
|
||||
@add-mixin range-lower;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
@add-mixin range-upper;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus::-webkit-slider-runnable-track {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-lower {
|
||||
@add-mixin range-lower;
|
||||
}
|
||||
|
||||
&:focus::-ms-fill-upper {
|
||||
@add-mixin range-upper;
|
||||
}
|
||||
|
@ -65,8 +65,8 @@
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-right: var(--gutter-compensation, -0.5rem);
|
||||
margin-left: var(--gutter-compensation, -0.5rem);
|
||||
margin-right: var(--gutter-compensation, -0.5rem);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
@ -74,15 +74,15 @@
|
||||
|
||||
@mixin viewport xs;
|
||||
|
||||
@media (--sm-viewport) {
|
||||
@media ( --sm-viewport ) {
|
||||
@mixin viewport sm;
|
||||
}
|
||||
|
||||
@media (--md-viewport) {
|
||||
@media ( --md-viewport ) {
|
||||
@mixin viewport md;
|
||||
}
|
||||
|
||||
@media (--lg-viewport) {
|
||||
@media ( --lg-viewport ) {
|
||||
@mixin viewport lg;
|
||||
}
|
||||
}
|
||||
|
@ -1,7 +1,10 @@
|
||||
.select {
|
||||
composes: input from '../input/style.css';
|
||||
composes: input from "../input/style.css";
|
||||
|
||||
/* select[multiple] is valid CSS syntax - not added to lint library yet */
|
||||
/* stylelint-disable */
|
||||
&[multiple] {
|
||||
/* stylelint-enable */
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@ -11,15 +14,15 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* this doesn't seem to work, research further
|
||||
/* this doesn't seem to work, research further
|
||||
&:-internal-list-box :global option:checked,
|
||||
& :global option:checked {
|
||||
background-color: white;
|
||||
background-color: white;
|
||||
}
|
||||
*/
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
composes: label from '../input/style.css';
|
||||
composes: label from "../input/style.css";
|
||||
}
|
@ -25,7 +25,7 @@ const Tab = ({
|
||||
<div className={cn}>
|
||||
<input
|
||||
checked={checked}
|
||||
className={styles.input}
|
||||
className={styles.radio_input}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
id={tabId}
|
||||
|
@ -1,12 +1,12 @@
|
||||
@import '../../shared/mixins.css';
|
||||
@import "../../shared/mixins.css";
|
||||
|
||||
~boxes: "../../shared/constants.js";
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remCalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -17,52 +17,54 @@
|
||||
border: var(--border-unchecked);
|
||||
color: #646464;
|
||||
display: inline-block;
|
||||
font-size: remCalc(20);
|
||||
font-size: remcalc(20);
|
||||
left: 1px;
|
||||
margin-left: -1px;
|
||||
padding: remCalc(10);
|
||||
padding: remcalc(10);
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
& .input[type="radio"] {
|
||||
& .panel {
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
& .radio_input {
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
@add-mixin move-z -1, fixed;
|
||||
}
|
||||
|
||||
& .panel {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 0;
|
||||
@add-mixin move-z -1, fixed;
|
||||
|
||||
&:checked {
|
||||
& + .label {
|
||||
background: white;
|
||||
border-bottom-width: 0;
|
||||
padding-bottom: remcalc(11);
|
||||
|
||||
@add-mixin move-z 1;
|
||||
}
|
||||
|
||||
& ~ .panel {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .content {
|
||||
background: #FAFAFA;
|
||||
border: var(--border-unchecked);
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
background: white;
|
||||
padding: remCalc(0 20);
|
||||
border: var(--border-unchecked);
|
||||
background: #FAFAFA;
|
||||
float: left;
|
||||
font-size: remCalc(16);
|
||||
margin-top: remCalc(-9);
|
||||
font-size: remcalc(16);
|
||||
margin-top: remcalc(-9);
|
||||
padding: remcalc(0 20);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .input[type="radio"]:checked + .label {
|
||||
background: white;
|
||||
border-bottom-width: 0;
|
||||
padding-bottom: remCalc(11);
|
||||
@add-mixin move-z 1;
|
||||
}
|
||||
|
||||
& .input[type="radio"]:checked ~ .panel {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
@ -1,9 +1,9 @@
|
||||
.tabs {
|
||||
font-size: 0;
|
||||
|
||||
&:after {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: '';
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
@ -8,25 +8,25 @@
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--background-confirmed: ~colors.confirmation;
|
||||
--border-confirmed: ~boxes.border.confirmed;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remCalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
--background-confirmed: ~colors.confirmation;
|
||||
--border-confirmed: ~boxes.border.confirmed;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #464646;
|
||||
border-radius: var(--border-radius);
|
||||
width: 5rem;
|
||||
color: #464646;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
height: 2.5rem;
|
||||
width: 5rem;
|
||||
|
||||
& .btn,
|
||||
& .label {
|
||||
height: 2.188rem;
|
||||
width: 2.188rem;
|
||||
margin: 0.125rem;
|
||||
width: 2.188rem;
|
||||
}
|
||||
|
||||
& .label {
|
||||
@ -36,8 +36,8 @@
|
||||
|
||||
& .btn {
|
||||
background: #FFFFFF;
|
||||
box-shadow: var(--bottom-shaddow);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--bottom-shaddow);
|
||||
}
|
||||
|
||||
&.on {
|
||||
@ -45,8 +45,8 @@
|
||||
border: var(--border-confirmed);
|
||||
|
||||
& .label {
|
||||
float: right;
|
||||
color: #FFFFFF;
|
||||
float: right;
|
||||
}
|
||||
|
||||
& .btn {
|
||||
|
@ -6,10 +6,11 @@
|
||||
}
|
||||
|
||||
.content {
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border: var(--border-unchecked);
|
||||
padding: remCalc(36);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: remcalc(36);
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
@ -1,8 +1,7 @@
|
||||
.verticle_align_center {
|
||||
/* Need to palce position:relative on parent*/
|
||||
|
||||
/* Need to palce position:relative on parent */
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
module.exports = {
|
||||
remCalc: function(values) {
|
||||
remcalc: function(values) {
|
||||
values = values.replace('px', '').split(' ');
|
||||
|
||||
let outputRems = '';
|
||||
|
@ -3,10 +3,9 @@
|
||||
@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
|
||||
position: relative;
|
||||
|
||||
&::$(type) {
|
||||
|
||||
&:$( type ) {
|
||||
bottom: $bottom;
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: $height;
|
||||
left: $left;
|
||||
|
549
ui/yarn.lock
549
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user