Updated EditorConfig Recommendations
Applied 4-spaces for everything as per: https://locomotivemtl.teamwork.com/tasks/7113032
This commit is contained in:
Chauncey McAskill
@@ -5,8 +5,8 @@
|
||||
// Label
|
||||
// ==========================================================================
|
||||
.o-label {
|
||||
display: block;
|
||||
margin-bottom: rem(15px);
|
||||
display: block;
|
||||
margin-bottom: rem(15px);
|
||||
}
|
||||
|
||||
// Input
|
||||
@@ -14,19 +14,19 @@
|
||||
$input-icon-color: 424242; // No #
|
||||
|
||||
.o-input {
|
||||
padding: rem(10px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: lightgray;
|
||||
background-color: white;
|
||||
padding: rem(10px);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: lightgray;
|
||||
background-color: white;
|
||||
|
||||
&:focus {
|
||||
border-color: gray;
|
||||
}
|
||||
&:focus {
|
||||
border-color: gray;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
&::placeholder {
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
|
||||
// Checkbox
|
||||
@@ -35,58 +35,58 @@ $checkbox: rem(18px);
|
||||
$checkbox-icon-color: $input-icon-color;
|
||||
|
||||
.o-checkbox {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus {
|
||||
+ .o-checkbox-label {
|
||||
&::before {
|
||||
border-color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
+ .o-checkbox-label {
|
||||
&::before {
|
||||
border-color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .o-checkbox-label {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
+ .o-checkbox-label {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o-checkbox-label {
|
||||
@extend .o-label;
|
||||
@extend .o-label;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: ($checkbox + rem(10px));
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
padding-left: ($checkbox + rem(10px));
|
||||
|
||||
&::before, &::after {
|
||||
@extend .o-input;
|
||||
&::before, &::after {
|
||||
@extend .o-input;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
margin-top: (-$checkbox / 2);
|
||||
padding: 0;
|
||||
width: $checkbox;
|
||||
height: $checkbox;
|
||||
content: "";
|
||||
}
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
margin-top: (-$checkbox / 2);
|
||||
padding: 0;
|
||||
width: $checkbox;
|
||||
height: $checkbox;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: rem(13px);
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
&::after {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: rem(13px);
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Radio
|
||||
@@ -94,20 +94,20 @@ $checkbox-icon-color: $input-icon-color;
|
||||
$radio-icon-color: $input-icon-color;
|
||||
|
||||
.o-radio {
|
||||
@extend .o-checkbox;
|
||||
@extend .o-checkbox;
|
||||
}
|
||||
|
||||
.o-radio-label {
|
||||
@extend .o-checkbox-label;
|
||||
@extend .o-checkbox-label;
|
||||
|
||||
&::before, &::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::before, &::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-size: rem(8px);
|
||||
}
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-size: rem(8px);
|
||||
}
|
||||
}
|
||||
|
||||
// Select
|
||||
@@ -116,36 +116,36 @@ $select-icon: rem(40px);
|
||||
$select-icon-color: $input-icon-color;
|
||||
|
||||
.o-select {
|
||||
@extend .o-input;
|
||||
@extend .o-input;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: $select-icon;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding-right: $select-icon;
|
||||
}
|
||||
|
||||
.o-select-wrap {
|
||||
position: relative;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: $select-icon;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: rem(10px);
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
width: $select-icon;
|
||||
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
|
||||
background-position: center;
|
||||
background-size: rem(10px);
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Textarea
|
||||
// ==========================================================================
|
||||
.o-textarea {
|
||||
@extend .o-input;
|
||||
@extend .o-input;
|
||||
|
||||
min-height: rem(100px);
|
||||
min-height: rem(100px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user