Add width-percentage
This commit is contained in:
parent
02dfc857af
commit
a193260e75
@ -1,19 +1,25 @@
|
|||||||
.page-1 {
|
.page-1 {
|
||||||
display: none; }
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#radio-page-1:checked ~ .page-1 {
|
#radio-page-1:checked ~ .page-1 {
|
||||||
display: block; }
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.page-2 {
|
.page-2 {
|
||||||
display: none; }
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#radio-page-2:checked ~ .page-2 {
|
#radio-page-2:checked ~ .page-2 {
|
||||||
display: block; }
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.page-3 {
|
.page-3 {
|
||||||
display: none; }
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#radio-page-3:checked ~ .page-3 {
|
#radio-page-3:checked ~ .page-3 {
|
||||||
display: block; }
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=custom.css.map */
|
/*# sourceMappingURL=custom.css.map */
|
||||||
|
@ -1,7 +1 @@
|
|||||||
{
|
{"version":3,"sourceRoot":"","sources":["../scss/custom.scss"],"names":[],"mappings":"AACC;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE;;;AAJF;EACE;;;AAEF;EACE","file":"custom.css"}
|
||||||
"version": 3,
|
|
||||||
"mappings": "AACC,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK;;AAJhB,OAAY;EACV,OAAO,EAAE,IAAI;;AAEf,+BAAwC;EACtC,OAAO,EAAE,KAAK",
|
|
||||||
"sources": ["../scss/custom.scss"],
|
|
||||||
"names": [],
|
|
||||||
"file": "custom.css"
|
|
||||||
}
|
|
470
css/style.css
470
css/style.css
@ -1,123 +1,152 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Iosevka Slab Regular";
|
font-family: "Iosevka Slab Regular";
|
||||||
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); }
|
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
|
||||||
|
}
|
||||||
:root {
|
:root {
|
||||||
font-family: "Iosevka Slab Regular", "monospace";
|
font-family: "Iosevka Slab Regular", "monospace";
|
||||||
background-color: black;
|
background-color: rgb(0, 0, 0);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9;
|
border-color: rgb(201, 201, 201);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 21px; }
|
line-height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
/* General styles for elements */
|
/* General styles for elements */
|
||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0; }
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
width: auto; }
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
b {
|
b {
|
||||||
font-weight: 1000; }
|
font-weight: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style: none; }
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
padding-left: 1ch; }
|
padding-left: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #c9c9c9; }
|
color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
|
|
||||||
nav ul > li > ul:hover a {
|
nav ul > li > ul:hover a {
|
||||||
color: #c9c9c9; }
|
color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: 10.5px;
|
height: 10.5px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid #c9c9c9;
|
border-bottom: 1px solid rgb(201, 201, 201);
|
||||||
margin-bottom: 9.5px; }
|
margin-bottom: 9.5px;
|
||||||
|
}
|
||||||
|
|
||||||
nav li hr,
|
nav li hr,
|
||||||
li.button-list > ul a hr,
|
li.button-list > ul a hr,
|
||||||
.white hr {
|
.white hr {
|
||||||
border-color: black; }
|
border-color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
nav > li > ul li > ul:hover > hr,
|
nav > li > ul li > ul:hover > hr,
|
||||||
li.button-list > ul:hover a hr {
|
li.button-list > ul:hover a hr {
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
|
|
||||||
/* Lists */
|
/* Lists */
|
||||||
li:not(.button-list) > ul::before {
|
li:not(.button-list) > ul::before {
|
||||||
content: "- "; }
|
content: "- ";
|
||||||
|
}
|
||||||
li.button-list > ul {
|
li.button-list > ul {
|
||||||
width: calc(100% - 1ch);
|
width: calc(100% - 1ch);
|
||||||
text-decoration: underline; }
|
text-decoration: underline;
|
||||||
|
}
|
||||||
li.button-list > ul:hover {
|
li.button-list > ul:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
li.button-list > ul > li {
|
li.button-list > ul > li {
|
||||||
width: 100%; }
|
width: 100%;
|
||||||
|
}
|
||||||
li.button-list > ul a {
|
li.button-list > ul a {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%; }
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
/* Navbars */
|
/* Navbars */
|
||||||
@keyframes hide {
|
@keyframes hide {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: inherit; }
|
left: inherit;
|
||||||
|
}
|
||||||
1% {
|
1% {
|
||||||
opacity: 0; }
|
opacity: 0;
|
||||||
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: -9999px; } }
|
left: -9999px;
|
||||||
|
}
|
||||||
|
}
|
||||||
nav a {
|
nav a {
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-decoration: none; }
|
text-decoration: none;
|
||||||
|
}
|
||||||
nav ul::before {
|
nav ul::before {
|
||||||
content: "" !important; }
|
content: "" !important;
|
||||||
|
}
|
||||||
nav > li {
|
nav > li {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black;
|
border-color: rgb(0, 0, 0);
|
||||||
margin-left: 0; }
|
margin-left: 0;
|
||||||
|
}
|
||||||
nav > li > ul {
|
nav > li > ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch; }
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
nav > li > ul:hover {
|
nav > li > ul:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
nav > li > ul:focus {
|
nav > li > ul:focus {
|
||||||
background-color: #171c94;
|
background-color: rgb(23, 28, 148);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
nav > li > ul:focus li {
|
nav > li > ul:focus li {
|
||||||
display: block;
|
display: block;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
left: inherit;
|
left: inherit;
|
||||||
animation-name: hide;
|
animation-name: hide;
|
||||||
animation-name: none; }
|
animation-name: none;
|
||||||
|
}
|
||||||
nav > li > ul > li {
|
nav > li > ul > li {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black;
|
border-color: rgb(0, 0, 0);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border: 2px solid;
|
border: 2px solid;
|
||||||
box-shadow: 0 0 0 0.25ch #c9c9c9;
|
box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
|
||||||
margin-left: calc(2px - 1ch);
|
margin-left: calc(2px - 1ch);
|
||||||
margin-right: calc(2px - 1ch);
|
margin-right: calc(2px - 1ch);
|
||||||
margin-top: 10.5px;
|
margin-top: 10.5px;
|
||||||
@ -128,22 +157,25 @@ nav > li {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: -9999px;
|
left: -9999px;
|
||||||
animation-name: hide;
|
animation-name: hide;
|
||||||
animation-duration: 0.5s; }
|
animation-duration: 0.5s;
|
||||||
|
}
|
||||||
nav > li > ul > li > ul {
|
nav > li > ul > li > ul {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black;
|
border-color: rgb(0, 0, 0);
|
||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch;
|
padding-right: 1ch;
|
||||||
min-height: 21px; }
|
min-height: 21px;
|
||||||
|
}
|
||||||
nav > li > ul > li > ul:hover {
|
nav > li > ul > li > ul:hover {
|
||||||
background-color: #171c94;
|
background-color: rgb(23, 28, 148);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
|
|
||||||
/* Miscallaneous Classes */
|
/* Miscallaneous Classes */
|
||||||
.box {
|
.box {
|
||||||
border: 2px solid #c9c9c9;
|
border: 2px solid rgb(201, 201, 201);
|
||||||
margin: 0.5ch;
|
margin: 0.5ch;
|
||||||
padding: calc(0.5ch - 2px);
|
padding: calc(0.5ch - 2px);
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -151,70 +183,86 @@ nav > li {
|
|||||||
margin-bottom: 10.5px;
|
margin-bottom: 10.5px;
|
||||||
padding-top: 8.5px;
|
padding-top: 8.5px;
|
||||||
padding-bottom: 8.5px;
|
padding-bottom: 8.5px;
|
||||||
vertical-align: top; }
|
vertical-align: top;
|
||||||
|
}
|
||||||
.box.inline {
|
.box.inline {
|
||||||
display: inline-block; }
|
display: inline-block;
|
||||||
|
}
|
||||||
.box.double {
|
.box.double {
|
||||||
border-style: double;
|
border-style: double;
|
||||||
border-width: 4px;
|
border-width: 4px;
|
||||||
margin: calc(0.5ch);
|
margin: 0.5ch;
|
||||||
padding: calc(0.5ch - (4px));
|
padding: calc(0.5ch - (4px));
|
||||||
margin-top: 10.5px;
|
margin-top: 10.5px;
|
||||||
margin-bottom: 10.5px;
|
margin-bottom: 10.5px;
|
||||||
padding-top: 6.5px;
|
padding-top: 6.5px;
|
||||||
padding-bottom: 6.5px; }
|
padding-bottom: 6.5px;
|
||||||
|
}
|
||||||
.box.black {
|
.box.black {
|
||||||
background-color: black;
|
background-color: rgb(0, 0, 0);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9;
|
border-color: rgb(201, 201, 201);
|
||||||
box-shadow: 0 0 0 0.25ch black; }
|
box-shadow: 0 0 0 0.25ch rgb(0, 0, 0);
|
||||||
|
}
|
||||||
.box.white {
|
.box.white {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black;
|
border-color: rgb(0, 0, 0);
|
||||||
box-shadow: 0 0 0 0.25ch #c9c9c9; }
|
box-shadow: 0 0 0 0.25ch rgb(201, 201, 201);
|
||||||
|
}
|
||||||
.box.white a {
|
.box.white a {
|
||||||
color: black; }
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
.box.white a:hover {
|
.box.white a:hover {
|
||||||
background-color: #171c94;
|
background-color: rgb(23, 28, 148);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
.box.blue {
|
.box.blue {
|
||||||
background-color: #171c94;
|
background-color: rgb(23, 28, 148);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9;
|
border-color: rgb(201, 201, 201);
|
||||||
box-shadow: 0 0 0 0.25ch #171c94; }
|
box-shadow: 0 0 0 0.25ch rgb(23, 28, 148);
|
||||||
|
}
|
||||||
.box.blue li.button-list > ul:hover {
|
.box.blue li.button-list > ul:hover {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black; }
|
border-color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
.box.blue li.button-list > ul:hover > a {
|
.box.blue li.button-list > ul:hover > a {
|
||||||
color: black; }
|
color: rgb(0, 0, 0);
|
||||||
|
}
|
||||||
.box.blue a:hover {
|
.box.blue a:hover {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: #171c94;
|
color: rgb(23, 28, 148);
|
||||||
border-color: #171c94; }
|
border-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
.box.blue hr {
|
.box.blue hr {
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
.box.blue button:hover {
|
.box.blue button:hover {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: #171c94;
|
color: rgb(23, 28, 148);
|
||||||
border-color: #171c94; }
|
border-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
.box.blue .checkbox-right:hover,
|
.box.blue .checkbox-right:hover,
|
||||||
.box.blue .checkbox-left:hover,
|
.box.blue .checkbox-left:hover,
|
||||||
.box.blue .radio-right:hover,
|
.box.blue .radio-right:hover,
|
||||||
.box.blue .radio-left:hover {
|
.box.blue .radio-left:hover {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: #171c94;
|
color: rgb(23, 28, 148);
|
||||||
border-color: #171c94; }
|
border-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
|
|
||||||
.list-symbol::after {
|
.list-symbol::after {
|
||||||
content: " ▼"; }
|
content: " ▼";
|
||||||
|
}
|
||||||
|
|
||||||
.no-select {
|
.no-select {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-select: none; }
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* How to add pages:
|
/* How to add pages:
|
||||||
*
|
*
|
||||||
@ -230,37 +278,47 @@ nav > li {
|
|||||||
/* Form styles */
|
/* Form styles */
|
||||||
input[type=checkbox],
|
input[type=checkbox],
|
||||||
input[type=radio] {
|
input[type=radio] {
|
||||||
display: none; }
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-right:hover,
|
.checkbox-right:hover,
|
||||||
.checkbox-left:hover,
|
.checkbox-left:hover,
|
||||||
.radio-right:hover,
|
.radio-right:hover,
|
||||||
.radio-left:hover {
|
.radio-left:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-right::after {
|
.checkbox-right::after {
|
||||||
content: "[ ]"; }
|
content: "[ ]";
|
||||||
|
}
|
||||||
|
|
||||||
.checkbox-left::before {
|
.checkbox-left::before {
|
||||||
content: "[ ]"; }
|
content: "[ ]";
|
||||||
|
}
|
||||||
|
|
||||||
.radio-right::after {
|
.radio-right::after {
|
||||||
content: "( )"; }
|
content: "( )";
|
||||||
|
}
|
||||||
|
|
||||||
.radio-left::before {
|
.radio-left::before {
|
||||||
content: "( )"; }
|
content: "( )";
|
||||||
|
}
|
||||||
|
|
||||||
input[type=checkbox]:checked + .checkbox-right::after {
|
input[type=checkbox]:checked + .checkbox-right::after {
|
||||||
content: "[x]"; }
|
content: "[x]";
|
||||||
|
}
|
||||||
input[type=checkbox]:checked + .checkbox-left::before {
|
input[type=checkbox]:checked + .checkbox-left::before {
|
||||||
content: "[x]"; }
|
content: "[x]";
|
||||||
|
}
|
||||||
|
|
||||||
input[type=radio]:checked + .radio-right::after {
|
input[type=radio]:checked + .radio-right::after {
|
||||||
content: "(x)"; }
|
content: "(x)";
|
||||||
|
}
|
||||||
input[type=radio]:checked + .radio-left::before {
|
input[type=radio]:checked + .radio-left::before {
|
||||||
content: "(x)"; }
|
content: "(x)";
|
||||||
|
}
|
||||||
|
|
||||||
input[type=text],
|
input[type=text],
|
||||||
button {
|
button {
|
||||||
@ -268,114 +326,246 @@ button {
|
|||||||
border: none;
|
border: none;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
color: inherit; }
|
color: inherit;
|
||||||
|
}
|
||||||
input[type=text]:hover,
|
input[type=text]:hover,
|
||||||
button:hover {
|
button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
|
|
||||||
label:hover {
|
label:hover {
|
||||||
cursor: pointer; }
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
button:focus, button:hover, button:active, button::-moz-focus-inner {
|
button:focus, button:hover, button:active, button::-moz-focus-inner {
|
||||||
border: none;
|
border: none;
|
||||||
text-decoration: none; }
|
text-decoration: none;
|
||||||
|
}
|
||||||
button::before {
|
button::before {
|
||||||
content: "[ "; }
|
content: "[ ";
|
||||||
|
}
|
||||||
button::after {
|
button::after {
|
||||||
content: " ]"; }
|
content: " ]";
|
||||||
|
}
|
||||||
|
|
||||||
.textinput {
|
.textinput {
|
||||||
display: inline-block; }
|
display: inline-block;
|
||||||
|
}
|
||||||
.textinput:hover {
|
.textinput:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
background-color: #171c94; }
|
background-color: rgb(23, 28, 148);
|
||||||
|
}
|
||||||
.textinput::before {
|
.textinput::before {
|
||||||
content: "["; }
|
content: "[";
|
||||||
|
}
|
||||||
.textinput::after {
|
.textinput::after {
|
||||||
content: "]"; }
|
content: "]";
|
||||||
|
}
|
||||||
.textinput:hover > input[type=text] {
|
.textinput:hover > input[type=text] {
|
||||||
background-color: #171c94;
|
background-color: rgb(23, 28, 148);
|
||||||
color: #c9c9c9;
|
color: rgb(201, 201, 201);
|
||||||
border-color: #c9c9c9; }
|
border-color: rgb(201, 201, 201);
|
||||||
|
}
|
||||||
|
|
||||||
input[type=text] {
|
input[type=text] {
|
||||||
background-color: #c9c9c9;
|
background-color: rgb(201, 201, 201);
|
||||||
color: black;
|
color: rgb(0, 0, 0);
|
||||||
border-color: black;
|
border-color: rgb(0, 0, 0);
|
||||||
width: 15ch; }
|
width: 15ch;
|
||||||
|
}
|
||||||
|
|
||||||
/* Style helpers, like space-takers */
|
/* Style helpers, like space-takers */
|
||||||
.space-1 {
|
.space-1 {
|
||||||
min-height: 21px; }
|
min-height: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
.space-2 {
|
.space-2 {
|
||||||
min-height: 42px; }
|
min-height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
.space-3 {
|
.space-3 {
|
||||||
min-height: 63px; }
|
min-height: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
.space-4 {
|
.space-4 {
|
||||||
min-height: 84px; }
|
min-height: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
.space-5 {
|
.space-5 {
|
||||||
min-height: 105px; }
|
min-height: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
.width-5 {
|
.width-5 {
|
||||||
width: 5ch; }
|
width: 5ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-10 {
|
.width-10 {
|
||||||
width: 10ch; }
|
width: 10ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-15 {
|
.width-15 {
|
||||||
width: 15ch; }
|
width: 15ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-20 {
|
.width-20 {
|
||||||
width: 20ch; }
|
width: 20ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-25 {
|
.width-25 {
|
||||||
width: 25ch; }
|
width: 25ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-50 {
|
.width-50 {
|
||||||
width: 48ch; }
|
width: 48ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-100 {
|
.width-100 {
|
||||||
width: 98ch; }
|
width: 98ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-150 {
|
.width-150 {
|
||||||
width: 148ch; }
|
width: 148ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-200 {
|
.width-200 {
|
||||||
width: 198ch; }
|
width: 198ch;
|
||||||
|
}
|
||||||
|
|
||||||
.width-250 {
|
.width-250 {
|
||||||
width: 248ch; }
|
width: 248ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-5 {
|
||||||
|
width: 5%;
|
||||||
|
width: round(5%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-10 {
|
||||||
|
width: 10%;
|
||||||
|
width: round(10%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-15 {
|
||||||
|
width: 15%;
|
||||||
|
width: round(15%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-20 {
|
||||||
|
width: 20%;
|
||||||
|
width: round(20%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-25 {
|
||||||
|
width: 25%;
|
||||||
|
width: round(25%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-30 {
|
||||||
|
width: 30%;
|
||||||
|
width: round(30%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-35 {
|
||||||
|
width: 35%;
|
||||||
|
width: round(35%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-40 {
|
||||||
|
width: 40%;
|
||||||
|
width: round(40%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-45 {
|
||||||
|
width: 45%;
|
||||||
|
width: round(45%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-50 {
|
||||||
|
width: 50%;
|
||||||
|
width: round(50%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-55 {
|
||||||
|
width: 55%;
|
||||||
|
width: round(55%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-60 {
|
||||||
|
width: 60%;
|
||||||
|
width: round(60%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-65 {
|
||||||
|
width: 65%;
|
||||||
|
width: round(65%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-70 {
|
||||||
|
width: 70%;
|
||||||
|
width: round(70%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-75 {
|
||||||
|
width: 75%;
|
||||||
|
width: round(75%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-80 {
|
||||||
|
width: 80%;
|
||||||
|
width: round(80%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-85 {
|
||||||
|
width: 85%;
|
||||||
|
width: round(85%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-90 {
|
||||||
|
width: 90%;
|
||||||
|
width: round(90%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-95 {
|
||||||
|
width: 95%;
|
||||||
|
width: round(95%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
|
.width-percentage-100 {
|
||||||
|
width: 100%;
|
||||||
|
width: round(100%, 1ch);
|
||||||
|
}
|
||||||
|
|
||||||
.padding-1 {
|
.padding-1 {
|
||||||
padding: 1ch;
|
padding: 1ch;
|
||||||
padding-top: 21px;
|
padding-top: 21px;
|
||||||
padding-bottom: 21px; }
|
padding-bottom: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
.padding-2 {
|
.padding-2 {
|
||||||
padding: 2ch;
|
padding: 2ch;
|
||||||
padding-top: 42px;
|
padding-top: 42px;
|
||||||
padding-bottom: 42px; }
|
padding-bottom: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
.padding-3 {
|
.padding-3 {
|
||||||
padding: 3ch;
|
padding: 3ch;
|
||||||
padding-top: 63px;
|
padding-top: 63px;
|
||||||
padding-bottom: 63px; }
|
padding-bottom: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
.padding-4 {
|
.padding-4 {
|
||||||
padding: 4ch;
|
padding: 4ch;
|
||||||
padding-top: 84px;
|
padding-top: 84px;
|
||||||
padding-bottom: 84px; }
|
padding-bottom: 84px;
|
||||||
|
}
|
||||||
|
|
||||||
.padding-5 {
|
.padding-5 {
|
||||||
padding: 5ch;
|
padding: 5ch;
|
||||||
padding-top: 105px;
|
padding-top: 105px;
|
||||||
padding-bottom: 105px; }
|
padding-bottom: 105px;
|
||||||
|
}
|
||||||
|
|
||||||
/*# sourceMappingURL=style.css.map */
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
File diff suppressed because one or more lines are too long
55
index.html
55
index.html
@ -1,11 +1,13 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>CSS example</title>
|
<title>CSS example</title>
|
||||||
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
||||||
<link type="text/css" rel="stylesheet" href="css/custom.css" />
|
<link type="text/css" rel="stylesheet" href="css/custom.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<input type="radio" id="radio-page-1" name="pages">
|
<input type="radio" id="radio-page-1" name="pages">
|
||||||
<input type="radio" id="radio-page-2" name="pages">
|
<input type="radio" id="radio-page-2" name="pages">
|
||||||
@ -31,7 +33,8 @@
|
|||||||
<ul>Style</ul>
|
<ul>Style</ul>
|
||||||
<ul>Another style</ul>
|
<ul>Another style</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul><ul tabindex="0" class="list-symbol">Pages
|
</ul>
|
||||||
|
<ul tabindex="0" class="list-symbol">Pages
|
||||||
<li>
|
<li>
|
||||||
<ul><label for="radio-page-1">Page 1</label></ul>
|
<ul><label for="radio-page-1">Page 1</label></ul>
|
||||||
<ul><label for="radio-page-2">Page 2</label></ul>
|
<ul><label for="radio-page-2">Page 2</label></ul>
|
||||||
@ -42,7 +45,9 @@
|
|||||||
<li>
|
<li>
|
||||||
<ul><a href="https://git.teasca.de/teascade/botsym-css">What is this?</a></ul>
|
<ul><a href="https://git.teasca.de/teascade/botsym-css">What is this?</a></ul>
|
||||||
<ul><a href="https://git.teasca.de/teascade/botsym-css/issues">Oh no</a></ul>
|
<ul><a href="https://git.teasca.de/teascade/botsym-css/issues">Oh no</a></ul>
|
||||||
<ul><hr></ul>
|
<ul>
|
||||||
|
<hr>
|
||||||
|
</ul>
|
||||||
<ul>A thing under hr</ul>
|
<ul>A thing under hr</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -53,9 +58,12 @@
|
|||||||
<div class="padding-1">
|
<div class="padding-1">
|
||||||
<b>A test form!</b>
|
<b>A test form!</b>
|
||||||
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
||||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no? </label></p>
|
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
||||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p>
|
</label></p>
|
||||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2 </label></p>
|
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1
|
||||||
|
</label></p>
|
||||||
|
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2
|
||||||
|
</label></p>
|
||||||
<p><button name="button" label="button">Button</button></p>
|
<p><button name="button" label="button">Button</button></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -73,8 +81,8 @@
|
|||||||
<hr>
|
<hr>
|
||||||
<p>Stuff under the hr!</p>
|
<p>Stuff under the hr!</p>
|
||||||
</li>
|
</li>
|
||||||
</div
|
</div>
|
||||||
><div class="box inline double white width-50">
|
<div class="box inline double white width-50">
|
||||||
<p>Welcome to a thing! This is a list, hello!</p>
|
<p>Welcome to a thing! This is a list, hello!</p>
|
||||||
<p>The list:</p>
|
<p>The list:</p>
|
||||||
<li>
|
<li>
|
||||||
@ -88,7 +96,9 @@
|
|||||||
<div class="box blue width-100">
|
<div class="box blue width-100">
|
||||||
<div class="padding-1">
|
<div class="padding-1">
|
||||||
<div class="">
|
<div class="">
|
||||||
<p>Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque autem dicta quasi commodi nihil qui.</p>
|
<p>Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto
|
||||||
|
sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque
|
||||||
|
autem dicta quasi commodi nihil qui.</p>
|
||||||
<div class="space-1"></div>
|
<div class="space-1"></div>
|
||||||
<p><b>Some stuff</b></p>
|
<p><b>Some stuff</b></p>
|
||||||
<div class="space-1"></div>
|
<div class="space-1"></div>
|
||||||
@ -104,9 +114,12 @@
|
|||||||
<div class="padding-1">
|
<div class="padding-1">
|
||||||
<b>A test form!</b>
|
<b>A test form!</b>
|
||||||
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
||||||
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no? </label></p>
|
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
||||||
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1 </label></p>
|
</label></p>
|
||||||
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2 </label></p>
|
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton
|
||||||
|
1 </label></p>
|
||||||
|
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton
|
||||||
|
2 </label></p>
|
||||||
<p><button name="button" label="button">Button</button></p>
|
<p><button name="button" label="button">Button</button></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -114,6 +127,26 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="page-2">
|
<div class="page-2">
|
||||||
<p>Hello! Welcome to <b>Page 2</b></p>
|
<p>Hello! Welcome to <b>Page 2</b></p>
|
||||||
|
|
||||||
|
<div class="box white inline width-percentage-50">
|
||||||
|
<div class="padding-1">
|
||||||
|
<b>A test form!</b>
|
||||||
|
<p>Hello there</p>
|
||||||
|
<p>Some text here!</p>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non porta odio. Nam ac pretium felis. Fusce erat
|
||||||
|
purus, tempus in finibus non, vestibulum eu diam. Vivamus neque ligula, ornare vitae mi sit amet, cursus
|
||||||
|
lobortis nunc. Cras augue enim, tincidunt sit amet fringilla eu, pretium in tellus. Vivamus vitae vehicula
|
||||||
|
nisl, a tristique mi. Fusce varius pretium gravida. </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box white inline width-percentage-45">
|
||||||
|
<div class="padding-1">
|
||||||
|
<b>A test form!</b>
|
||||||
|
<p>Hello there</p>
|
||||||
|
<p>Some text here!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
@ -1,4 +1,5 @@
|
|||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
|
@use "sass:math";
|
||||||
$default-black: rgb(0, 0, 0);
|
$default-black: rgb(0, 0, 0);
|
||||||
$default-white: rgb(201, 201, 201);
|
$default-white: rgb(201, 201, 201);
|
||||||
$default-blue: rgb(23, 28, 148);
|
$default-blue: rgb(23, 28, 148);
|
||||||
@ -7,6 +8,7 @@ $line-overflow: 5px;
|
|||||||
$line-height: $em-height+$line-overflow;
|
$line-height: $em-height+$line-overflow;
|
||||||
$box-border: 2px;
|
$box-border: 2px;
|
||||||
$box-double-border: 4px;
|
$box-double-border: 4px;
|
||||||
|
|
||||||
@mixin whiteOnBlue {
|
@mixin whiteOnBlue {
|
||||||
background-color: $default-blue;
|
background-color: $default-blue;
|
||||||
color: $default-white;
|
color: $default-white;
|
||||||
@ -90,10 +92,10 @@ nav ul>li>ul:hover a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
height: $line-height / 2;
|
height: math.div($line-height, 2);
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid $default-white;
|
border-bottom: 1px solid $default-white;
|
||||||
margin-bottom: $line-height / 2 - 1px;
|
margin-bottom: math.div($line-height, 2) - 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav li hr,
|
nav li hr,
|
||||||
@ -114,14 +116,17 @@ li {
|
|||||||
&:not(.button-list)>ul::before {
|
&:not(.button-list)>ul::before {
|
||||||
content: "- ";
|
content: "- ";
|
||||||
}
|
}
|
||||||
|
|
||||||
&.button-list>ul {
|
&.button-list>ul {
|
||||||
width: calc(100% - 1ch);
|
width: calc(100% - 1ch);
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
@include hoverable($default-white,
|
@include hoverable($default-white,
|
||||||
$default-blue);
|
$default-blue);
|
||||||
|
|
||||||
&>li {
|
&>li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -137,9 +142,11 @@ li {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: inherit;
|
left: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
1% {
|
1% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: -9999px;
|
left: -9999px;
|
||||||
@ -153,13 +160,16 @@ nav {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul::before {
|
ul::before {
|
||||||
content: "" !important;
|
content: "" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&>li {
|
&>li {
|
||||||
// Navbar
|
// Navbar
|
||||||
@include blackOnWhite;
|
@include blackOnWhite;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|
||||||
&>ul {
|
&>ul {
|
||||||
// Navbar items
|
// Navbar items
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -169,8 +179,10 @@ nav {
|
|||||||
padding-right: 1ch;
|
padding-right: 1ch;
|
||||||
@include hoverable($default-white,
|
@include hoverable($default-white,
|
||||||
$default-blue);
|
$default-blue);
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
// Display inner items on focus
|
// Display inner items on focus
|
||||||
display: block;
|
display: block;
|
||||||
@ -180,6 +192,7 @@ nav {
|
|||||||
animation-name: none;
|
animation-name: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&>li {
|
&>li {
|
||||||
// Navbar inner lists
|
// Navbar inner lists
|
||||||
@include blackOnWhite;
|
@include blackOnWhite;
|
||||||
@ -188,21 +201,23 @@ nav {
|
|||||||
box-shadow: 0 0 0 0.25ch $default-white;
|
box-shadow: 0 0 0 0.25ch $default-white;
|
||||||
margin-left: calc(2px - 1ch);
|
margin-left: calc(2px - 1ch);
|
||||||
margin-right: calc(2px - 1ch);
|
margin-right: calc(2px - 1ch);
|
||||||
margin-top: $line-height / 2;
|
margin-top: math.div($line-height, 2);
|
||||||
margin-bottom: $line-height / 2;
|
margin-bottom: math.div($line-height, 2);
|
||||||
padding: calc(0.25ch + 2px);
|
padding: calc(0.25ch + 2px);
|
||||||
padding-top: $line-height / 2;
|
padding-top: math.div($line-height, 2);
|
||||||
padding-bottom: $line-height / 2;
|
padding-bottom: math.div($line-height, 2);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
left: -9999px;
|
left: -9999px;
|
||||||
animation-name: hide;
|
animation-name: hide;
|
||||||
animation-duration: 0.5s;
|
animation-duration: 0.5s;
|
||||||
|
|
||||||
&>ul {
|
&>ul {
|
||||||
// Inner Items
|
// Inner Items
|
||||||
@include blackOnWhite;
|
@include blackOnWhite;
|
||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch;
|
padding-right: 1ch;
|
||||||
min-height: $line-height;
|
min-height: $line-height;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
// Navbar inner items hover
|
// Navbar inner items hover
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
@ -226,9 +241,11 @@ nav {
|
|||||||
padding-top: $line-height / 2 - $box-border;
|
padding-top: $line-height / 2 - $box-border;
|
||||||
padding-bottom: $line-height / 2 - $box-border;
|
padding-bottom: $line-height / 2 - $box-border;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
&.inline {
|
&.inline {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.double {
|
&.double {
|
||||||
border-style: double;
|
border-style: double;
|
||||||
border-width: $box-double-border;
|
border-width: $box-double-border;
|
||||||
@ -239,40 +256,51 @@ nav {
|
|||||||
padding-top: $line-height / 2 - $box-double-border;
|
padding-top: $line-height / 2 - $box-double-border;
|
||||||
padding-bottom: $line-height / 2 - $box-double-border;
|
padding-bottom: $line-height / 2 - $box-double-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.black {
|
&.black {
|
||||||
@include whiteOnBlack;
|
@include whiteOnBlack;
|
||||||
box-shadow: 0 0 0 0.25ch $default-black;
|
box-shadow: 0 0 0 0.25ch $default-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.white {
|
&.white {
|
||||||
@include blackOnWhite;
|
@include blackOnWhite;
|
||||||
box-shadow: 0 0 0 0.25ch $default-white;
|
box-shadow: 0 0 0 0.25ch $default-white;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $default-black;
|
color: $default-black;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.blue {
|
&.blue {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
box-shadow: 0 0 0 0.25ch $default-blue;
|
box-shadow: 0 0 0 0.25ch $default-blue;
|
||||||
|
|
||||||
li.button-list>ul:hover {
|
li.button-list>ul:hover {
|
||||||
@include blackOnWhite;
|
@include blackOnWhite;
|
||||||
}
|
}
|
||||||
|
|
||||||
li.button-list>ul:hover>a {
|
li.button-list>ul:hover>a {
|
||||||
color: $default-black;
|
color: $default-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
@include blueOnWhite;
|
@include blueOnWhite;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border-color: $default-white;
|
border-color: $default-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
&:hover {
|
&:hover {
|
||||||
@include blueOnWhite;
|
@include blueOnWhite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox-right,
|
.checkbox-right,
|
||||||
.checkbox-left,
|
.checkbox-left,
|
||||||
.radio-right,
|
.radio-right,
|
||||||
@ -351,6 +379,7 @@ input[type=checkbox]:checked {
|
|||||||
&+.checkbox-right::after {
|
&+.checkbox-right::after {
|
||||||
content: "[x]";
|
content: "[x]";
|
||||||
}
|
}
|
||||||
|
|
||||||
&+.checkbox-left::before {
|
&+.checkbox-left::before {
|
||||||
content: "[x]";
|
content: "[x]";
|
||||||
}
|
}
|
||||||
@ -360,6 +389,7 @@ input[type=radio]:checked {
|
|||||||
&+.radio-right::after {
|
&+.radio-right::after {
|
||||||
content: "(x)";
|
content: "(x)";
|
||||||
}
|
}
|
||||||
|
|
||||||
&+.radio-left::before {
|
&+.radio-left::before {
|
||||||
content: "(x)";
|
content: "(x)";
|
||||||
}
|
}
|
||||||
@ -381,6 +411,7 @@ label:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
&:hover,
|
&:hover,
|
||||||
&:active,
|
&:active,
|
||||||
@ -388,9 +419,11 @@ button {
|
|||||||
border: none;
|
border: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "[ ";
|
content: "[ ";
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: " ]";
|
content: " ]";
|
||||||
}
|
}
|
||||||
@ -400,12 +433,15 @@ button {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include hoverable($default-white,
|
@include hoverable($default-white,
|
||||||
$default-blue);
|
$default-blue);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "[";
|
content: "[";
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "]";
|
content: "]";
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover>input[type=text] {
|
&:hover>input[type=text] {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
}
|
}
|
||||||
@ -437,6 +473,13 @@ input[type=text] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@for $width from 1 through 20 {
|
||||||
|
.width-percentage-#{$width * 5} {
|
||||||
|
width: #{$width * 5 * 1%};
|
||||||
|
width: round(#{$width * 5 * 1%}, 1ch);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@for $i from 1 through 5 {
|
@for $i from 1 through 5 {
|
||||||
.padding-#{$i} {
|
.padding-#{$i} {
|
||||||
padding: $i * 1ch;
|
padding: $i * 1ch;
|
||||||
|
Loading…
Reference in New Issue
Block a user