Basic styles look MUCH better now
This commit is contained in:
parent
df02f2fbd9
commit
574a6daa55
8 changed files with 289 additions and 97 deletions
|
@ -15,6 +15,12 @@ If you are using `@lbry/components`, you can safely remove [@lbry/color](https:/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Demo
|
||||||
|
|
||||||
|
Check out `index.html` in the `dist` folder.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
Your main Sass file:
|
Your main Sass file:
|
||||||
|
|
2
dist/index.css
vendored
2
dist/index.css
vendored
File diff suppressed because one or more lines are too long
2
dist/index.css.map
vendored
2
dist/index.css.map
vendored
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCErIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,G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","file":"index.css"}
|
{"version":3,"sourceRoot":"","sources":["../sass/init/_variables.scss","../sass/init/_mixins.scss","../node_modules/@lbry/color/lbry-color.scss","../sass/init/_reset.scss","../sass/init/_animation.scss","../sass/badge/_index.scss","../sass/button/_index.scss","../sass/form/_index.scss","../sass/media/_index.scss","../sass/table/_index.scss"],"names":[],"mappings":"AAAA,MCuII,cDrIgC,MCqIhC,aDpI+B,MCoI/B,YDnI8B,MCmI9B,YDlI8B,OCkI9B,YDjI8B,OCiI9B,aDhI+B,OCgI/B,cD/HgC,OC+HhC,sBD5HwC,eC4HxC,0BD3H4C,eC2H5C,kBD1HoC,IC0HpC,wBDzH0C,OCyH1C,aCjIU,QDiIV,aCnIU,KDmIV,cCpGU,QDoGV,cCnGU,QDmGV,cClGU,QDkGV,cCjGU,QDiGV,cChGU,QDgGV,cCjFU,QDiFV,cChFU,QDgFV,cC/EU,QD+EV,cC9EU,QD8EV,cC7EU,QD6EV,cC9DU,QD8DV,cC7DU,QD6DV,cC5DU,QD4DV,cC3DU,QD2DV,cC1DU,QD0DV,cC3CU,QD2CV,cC1CU,QD0CV,cCzCU,QDyCV,cCxCU,QDwCV,cCvCU,QDuCV,gBCxBY,QDwBZ,gBCvBY,QDuBZ,gBCtBY,QDsBZ,gBCrBY,QDqBZ,gBCpBY,QDoBZ,gBCLY,QDKZ,gBCJY,QDIZ,gBCHY,QDGZ,gBCFY,QDEZ,gBCDY,QDCZ,eCcW,QDdX,eCeW,QDfX,eCgBW,QDhBX,eCiBW,QDjBX,eCkBW,QDlBX,cCiCU,QDjCV,cCkCU,QDlCV,cCmCU,QDnCV,cCoCU,QDpCV,cCqCU,QDrCV,aCoDS,QDpDT,aCqDS,QDrDT,aCsDS,QDtDT,aCuDS,QDvDT,aCwDS,QDxDT,gBCuEY,QDvEZ,gBCwEY,QDxEZ,gBCyEY,QDzEZ,gBC0EY,QD1EZ,gBC2EY,QD3EZ,gBC0FY,QD1FZ,gBC2FY,QD3FZ,gBC4FY,QD5FZ,gBC6FY,QD7FZ,gBC8FY,QD9FZ,cC6GU,QD7GV,cC8GU,QD9GV,cC+GU,QD/GV,cCgHU,QDhHV,cCiHU,QDjHV,eCgIW,QDhIX,eCiIW,QDjIX,eCkIW,QDlIX,eCmIW,QDnIX,eCoIW,QDpIX,YDpC8B,YCoC9B,uCEvIJ,KACE,sBACA,eACA,kCAEA,kCACA,mCAGF,qBAGE,mBAEA,YACA,mBACA,UAGF,WACE,oBACA,YAGF,WACE,mBAGF,uGAQE,eAGF,gEAUE,0BAGF,6BAIE,6BACA,oBACA,kBACA,oBAEA,qBACA,wBAEA,iEACE,eAIJ,kBAME,mBAGF,MAEE,2BAEA,YACE,2BAIJ,G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","file":"index.css"}
|
44
dist/index.html
vendored
44
dist/index.html
vendored
|
@ -93,20 +93,52 @@
|
||||||
</input-submit>
|
</input-submit>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Become a Gym Leader</legend>
|
||||||
|
|
||||||
|
<fieldset-group>
|
||||||
|
<fieldset-section>
|
||||||
|
<label for="name">Name</label>
|
||||||
|
<input id="name" placeholder="Will Smith" type="text"/>
|
||||||
|
</fieldset-section>
|
||||||
|
|
||||||
|
<fieldset-section>
|
||||||
|
<label for="starter">Pokémon</label>
|
||||||
|
<select id="starter">
|
||||||
|
<option disabled selected>Choose a Pokémon</option>
|
||||||
|
<option>Bulbasaur</option>
|
||||||
|
<option>Charmander</option>
|
||||||
|
<option>Squirtle</option>
|
||||||
|
</select>
|
||||||
|
</fieldset-section>
|
||||||
|
</fieldset-group>
|
||||||
|
|
||||||
|
<fieldset-section class="full-width">
|
||||||
|
<label for="notes">Notes</label>
|
||||||
|
<textarea id="notes"></textarea>
|
||||||
|
</fieldset-section>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend>Click some buttons</legend>
|
<legend>Click some buttons</legend>
|
||||||
|
|
||||||
<radio>
|
<radio-element>
|
||||||
<input id="test-radio-1" name="toggle" type="radio">
|
<input id="test-radio-1" name="toggle" type="radio">
|
||||||
<label for="test-radio-1">Radio button 1</label>
|
<label for="test-radio-1">Radio button 1</label>
|
||||||
<check></check>
|
<radio-toggle/>
|
||||||
</radio>
|
</radio-element>
|
||||||
|
|
||||||
<radio>
|
<radio-element>
|
||||||
<input id="test-radio-2" name="toggle" type="radio">
|
<input id="test-radio-2" name="toggle" type="radio">
|
||||||
<label for="test-radio-2">Radio button 2</label>
|
<label for="test-radio-2">Radio button 2</label>
|
||||||
<check></check>
|
<radio-toggle/>
|
||||||
</radio>
|
</radio-element>
|
||||||
|
|
||||||
|
<checkbox-element>
|
||||||
|
<input id="test-checkbox-1" name="check" type="checkbox">
|
||||||
|
<label for="test-checkbox-1">Checkbox</label>
|
||||||
|
<checkbox-toggle/>
|
||||||
|
</checkbox-element>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -12,9 +12,9 @@
|
||||||
"@lbry/color": "^1.1.0",
|
"@lbry/color": "^1.1.0",
|
||||||
"husky": "^1.3.1",
|
"husky": "^1.3.1",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"sass": "^1.16.1",
|
"sass": "^1.17.0",
|
||||||
"sass-lint": "^1.12.1",
|
"sass-lint": "^1.12.1",
|
||||||
"updates": "^6.2.1"
|
"updates": "^7.0.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
"dist/style.css",
|
"dist/style.css",
|
||||||
|
|
|
@ -1,108 +1,184 @@
|
||||||
form {
|
form {
|
||||||
// setting the font size here sizes everything within
|
// setting the font size here sizes everything within
|
||||||
margin-bottom: 1rem;
|
margin-bottom: var(--spacing-s);
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
height: var(--spacing-l);
|
||||||
|
border: 1px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="email"],
|
||||||
|
[type="text"] {
|
||||||
|
padding-right: var(--spacing-s);
|
||||||
|
padding-left: var(--spacing-s);
|
||||||
|
transition: border 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="button"],
|
||||||
|
[type="submit"] {
|
||||||
|
color: $lbry-white;
|
||||||
|
padding-right: var(--spacing-m);
|
||||||
|
padding-left: var(--spacing-m);
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:not(:hover) {
|
||||||
|
background-color: $lbry-black;
|
||||||
|
border-color: $lbry-black;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $lbry-teal-3;
|
||||||
|
border-color: $lbry-teal-5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
|
||||||
|
background-position: 99% center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1rem;
|
||||||
|
padding-right: var(--spacing-l);
|
||||||
|
padding-left: var(--spacing-s);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
fieldset {
|
||||||
border-top: 1px solid $lbry-gray-1;
|
border-top: 1px solid $lbry-gray-1;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: var(--spacing-m);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
button,
|
fieldset-group {
|
||||||
input {
|
display: flex;
|
||||||
&:not([type="button"]):not([type="radio"]):not([type="submit"]) {
|
flex-direction: row;
|
||||||
padding-right: 1rem;
|
justify-content: space-between;
|
||||||
padding-left: 1rem;
|
}
|
||||||
transition: border 0.2s;
|
|
||||||
|
|
||||||
&:not(:focus) {
|
fieldset-section {
|
||||||
border-top-color: $lbry-black;
|
display: flex;
|
||||||
border-right-color: transparent;
|
flex-direction: column;
|
||||||
border-bottom-color: $lbry-black;
|
margin-bottom: var(--spacing-m);
|
||||||
border-left-color: $lbry-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
&.full-width {
|
||||||
border-top-color: $lbry-teal-5;
|
width: 100%;
|
||||||
border-right-color: transparent;
|
}
|
||||||
border-bottom-color: $lbry-teal-5;
|
|
||||||
border-left-color: $lbry-teal-5;
|
fieldset-group &,
|
||||||
}
|
.fieldset-group & {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
color: $lbry-gray-4;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: smaller;
|
||||||
|
margin-bottom: var(--spacing-xxs);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="email"],
|
||||||
|
[type="text"],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
&:not(:focus) {
|
||||||
|
border-color: $lbry-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[type="button"],
|
&:focus {
|
||||||
&[type="submit"] {
|
border-color: $lbry-teal-5;
|
||||||
color: $lbry-white;
|
|
||||||
padding-right: 1.5rem;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
|
|
||||||
&:not(:hover) {
|
|
||||||
background-color: $lbry-black;
|
|
||||||
border-color: $lbry-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $lbry-teal-3;
|
|
||||||
border-color: $lbry-teal-5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
legend {
|
legend {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: var(--spacing-xs) var(--spacing-s); // sass-lint:disable-line shorthand-values
|
||||||
border: 1px solid $lbry-gray-1;
|
border: 1px solid $lbry-gray-1;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: var(--spacing-s);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
check {
|
input-submit {
|
||||||
width: 1.5rem; height: 1.5rem;
|
display: flex;
|
||||||
top: 0; left: 0;
|
|
||||||
|
|
||||||
border: 2px solid;
|
[type="email"],
|
||||||
border-radius: 50%;
|
[type="text"] {
|
||||||
display: block;
|
flex: 1;
|
||||||
position: relative;
|
|
||||||
transition: border 0.2s;
|
|
||||||
z-index: 5;
|
|
||||||
|
|
||||||
&::before {
|
&:not(:focus) {
|
||||||
width: 100%; height: 100%;
|
border-top-color: $lbry-black;
|
||||||
top: 0; left: 0;
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: $lbry-black;
|
||||||
|
border-left-color: $lbry-black;
|
||||||
|
}
|
||||||
|
|
||||||
border-radius: 50%;
|
&:focus {
|
||||||
content: "";
|
border-top-color: $lbry-teal-5;
|
||||||
display: block;
|
border-right-color: transparent;
|
||||||
position: absolute;
|
border-bottom-color: $lbry-teal-5;
|
||||||
transform: scale(0.6);
|
border-left-color: $lbry-teal-5;
|
||||||
transition: background-color 0.2s;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
radio {
|
checkbox-element {
|
||||||
min-height: 2rem;
|
@include tick;
|
||||||
align-items: center;
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
label {
|
checkbox-toggle,
|
||||||
color: $lbry-teal-4;
|
.checkbox-toggle {
|
||||||
}
|
|
||||||
|
|
||||||
check {
|
|
||||||
border-color: $lbry-teal-4;
|
border-color: $lbry-teal-4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
input {
|
||||||
padding-left: 0.5rem;
|
&[type="checkbox"] {
|
||||||
transition: color 0.2s;
|
width: 0; height: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
|
||||||
|
&:not(:checked) {
|
||||||
|
+ label + checkbox-toggle::before,
|
||||||
|
+ label + .checkbox-toggle::before {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked {
|
||||||
|
+ label {
|
||||||
|
color: $lbry-teal-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkbox-toggle {
|
||||||
|
@include tick-toggle;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333b58f' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E%0A");
|
||||||
|
background-position: center left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 130%;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
radio-element {
|
||||||
|
@include tick;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
radio-toggle,
|
||||||
|
.radio-toggle {
|
||||||
|
border-color: $lbry-teal-4;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
@ -111,7 +187,8 @@ radio {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
&:not(:checked) {
|
&:not(:checked) {
|
||||||
+ label + check::before {
|
+ label + radio-toggle::before,
|
||||||
|
+ label + .radio-toggle::before {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -121,7 +198,8 @@ radio {
|
||||||
color: $lbry-teal-4;
|
color: $lbry-teal-4;
|
||||||
}
|
}
|
||||||
|
|
||||||
+ label + check::before {
|
+ label + radio-toggle::before,
|
||||||
|
+ label + .radio-toggle::before {
|
||||||
background-color: $lbry-teal-4;
|
background-color: $lbry-teal-4;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -129,20 +207,53 @@ radio {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
radio-toggle {
|
||||||
|
@include tick-toggle;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: scale(0.6);
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.check {
|
|
||||||
@extend check;
|
// Custom elements are apparently difficult to use in React, so use classes
|
||||||
|
|
||||||
|
.checkbox-element {
|
||||||
|
@extend checkbox-element;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-toggle {
|
||||||
|
@extend checkbox-toggle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fieldset {
|
.fieldset {
|
||||||
@extend fieldset;
|
@extend fieldset;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fieldset-group {
|
||||||
|
@extend fieldset-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fieldset-section {
|
||||||
|
@extend fieldset-section;
|
||||||
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
@extend form;
|
@extend form;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio-group {
|
.input-submit {
|
||||||
@extend radio;
|
@extend input-submit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-element {
|
||||||
|
@extend radio-element;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-toggle {
|
||||||
|
@extend radio-toggle;
|
||||||
}
|
}
|
||||||
|
|
|
@ -168,6 +168,47 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin tick {
|
||||||
|
min-height: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-right: var(--spacing-s);
|
||||||
|
margin-bottom: var(--spacing-s);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
label {
|
||||||
|
color: $lbry-teal-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding-left: var(--spacing-xs);
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin tick-toggle {
|
||||||
|
width: var(--spacing-m); height: var(--spacing-m);
|
||||||
|
top: 0; left: 0;
|
||||||
|
|
||||||
|
border: 2px solid;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
transition: border 0.2s;
|
||||||
|
z-index: 5;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
top: 0; left: 0;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) {
|
@mixin underline($text-color: $lbry-black, $whitespace-color: $lbry-white) {
|
||||||
@include selection($text-color, $whitespace-color);
|
@include selection($text-color, $whitespace-color);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
// sass-lint:disable no-important
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
@ -92,10 +90,7 @@ ul {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
// border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
|
||||||
// -webkit-appearance: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
dd {
|
dd {
|
||||||
|
@ -149,7 +144,7 @@ input {
|
||||||
|
|
||||||
&::placeholder {
|
&::placeholder {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
opacity: 0.3;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:disabled) {
|
&:not(:disabled) {
|
||||||
|
@ -161,9 +156,15 @@ input {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
border-radius: 0;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
textarea {
|
textarea {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--spacing-xs);
|
min-height: var(--spacing-xxl);
|
||||||
|
padding: var(--spacing-s);
|
||||||
// border-color should be added in apps for blur/focus
|
// border-color should be added in apps for blur/focus
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
|
|
||||||
|
@ -175,10 +176,11 @@ textarea {
|
||||||
|
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
|
// sass-lint:disable-block no-important
|
||||||
// Intelligent print styles
|
// Intelligent print styles
|
||||||
pre,
|
pre,
|
||||||
blockquote {
|
blockquote {
|
||||||
border: 1px solid #999 !important;
|
border: 1px solid $lbry-gray-5 !important;
|
||||||
page-break-inside: avoid !important;
|
page-break-inside: avoid !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -215,7 +217,7 @@ textarea {
|
||||||
* {
|
* {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
background-image: none !important;
|
background-image: none !important;
|
||||||
color: #000 !important;
|
color: $lbry-black !important;
|
||||||
filter: none !important;
|
filter: none !important;
|
||||||
text-shadow: none !important;
|
text-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue