teascade/botsym-css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update hr style

Browse Source
This commit is contained in:
Sofia 2020-09-30 16:24:49 +03:00
parent a2ad0537c8
commit 02dfc857af
3 changed files with 353 additions and 472 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

420
css/style.css
View File

@ -1,166 +1,117 @@
@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", "Iosevka Slab", "Consolas", "Source Code Pro", "monospace"; font-family: "Iosevka Slab Regular", "monospace";
background-color: black; background-color: black;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9;
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: #c9c9c9; }
} a:hover {
a:hover {
cursor: pointer; cursor: pointer;
color: #c9c9c9; color: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
}
nav ul>li>ul:hover a { nav ul > li > ul:hover a {
color: #c9c9c9; color: #c9c9c9; }
}
hr { hr {
height: 10.5px; height: 10.5px;
border: 0; border: 0;
border-bottom: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9;
margin-bottom: 15px; 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: black; }
}
nav>li>ul li>ul:hover>hr,
li.button-list>ul:hover a hr {
border-color: #c9c9c9;
}
nav > li > ul li > ul:hover > hr,
li.button-list > ul:hover a hr {
border-color: #c9c9c9; }
/* 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: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
} li.button-list > ul > li {
width: 100%; }
li.button-list>ul>li { li.button-list > ul a {
width: 100%;
}
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: black;
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: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black;
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: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
} nav > li > ul:focus {
nav>li>ul:focus {
background-color: #171c94; background-color: #171c94;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9; }
} 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: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black;
@ -177,27 +128,20 @@ nav>li>ul>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: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black;
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: #171c94;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9; }
}
/* Miscallaneous Classes */ /* Miscallaneous Classes */
.box { .box {
border: 2px solid #c9c9c9; border: 2px solid #c9c9c9;
margin: 0.5ch; margin: 0.5ch;
@ -207,14 +151,10 @@ nav>li>ul>li>ul:hover {
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 {
display: inline-block; }
.box.inline { .box.double {
display: inline-block;
}
.box.double {
border-style: double; border-style: double;
border-width: 4px; border-width: 4px;
margin: calc(0.5ch); margin: calc(0.5ch);
@ -222,85 +162,59 @@ nav>li>ul>li>ul:hover {
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: black;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9;
box-shadow: 0 0 0 0.25ch black; box-shadow: 0 0 0 0.25ch black; }
} .box.white {
.box.white {
background-color: #c9c9c9; background-color: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black;
box-shadow: 0 0 0 0.25ch #c9c9c9; box-shadow: 0 0 0 0.25ch #c9c9c9; }
} .box.white a {
color: black; }
.box.white a { .box.white a:hover {
color: black; background-color: #171c94;
} color: #c9c9c9;
border-color: #c9c9c9; }
.box.white a:hover { .box.blue {
background-color: #171c94; background-color: #171c94;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9;
} box-shadow: 0 0 0 0.25ch #171c94; }
.box.blue li.button-list > ul:hover {
.box.blue {
background-color: #171c94;
color: #c9c9c9;
border-color: #c9c9c9;
box-shadow: 0 0 0 0.25ch #171c94;
}
.box.blue li.button-list>ul:hover {
background-color: #c9c9c9; background-color: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black; }
} .box.blue li.button-list > ul:hover > a {
color: black; }
.box.blue li.button-list>ul:hover>a { .box.blue a:hover {
color: black;
}
.box.blue a:hover {
background-color: #c9c9c9; background-color: #c9c9c9;
color: #171c94; color: #171c94;
border-color: #171c94; border-color: #171c94; }
} .box.blue hr {
border-color: #c9c9c9; }
.box.blue hr { .box.blue button:hover {
border-color: #c9c9c9;
}
.box.blue button:hover {
background-color: #c9c9c9; background-color: #c9c9c9;
color: #171c94; color: #171c94;
border-color: #171c94; border-color: #171c94; }
} .box.blue .checkbox-right:hover,
.box.blue .checkbox-left:hover,
.box.blue .checkbox-right:hover, .box.blue .radio-right:hover,
.box.blue .checkbox-left:hover, .box.blue .radio-left:hover {
.box.blue .radio-right:hover,
.box.blue .radio-left:hover {
background-color: #c9c9c9; background-color: #c9c9c9;
color: #171c94; color: #171c94;
border-color: #171c94; border-color: #171c94; }
}
.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:
* *
@ -313,14 +227,10 @@ nav>li>ul>li>ul:hover {
* } * }
* } * }
*/ */
/* 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,
@ -328,40 +238,29 @@ input[type=radio] {
.radio-left:hover { .radio-left:hover {
cursor: pointer; cursor: pointer;
color: #c9c9c9; color: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
}
.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 {
content: "[x]"; }
input[type=checkbox]:checked+.checkbox-left::before { input[type=radio]:checked + .radio-right::after {
content: "[x]"; content: "(x)"; }
} input[type=radio]:checked + .radio-left::before {
content: "(x)"; }
input[type=radio]:checked+.radio-right::after {
content: "(x)";
}
input[type=radio]:checked+.radio-left::before {
content: "(x)";
}
input[type=text], input[type=text],
button { button {
@ -369,159 +268,114 @@ 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,
button:hover {
input[type=text]:hover,
button:hover {
cursor: pointer; cursor: pointer;
color: #c9c9c9; color: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
}
label:hover { label:hover {
cursor: pointer; cursor: pointer; }
}
button:focus, button:focus, button:hover, button:active, button::-moz-focus-inner {
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: #c9c9c9;
background-color: #171c94; background-color: #171c94; }
} .textinput::before {
content: "["; }
.textinput::before { .textinput::after {
content: "["; content: "]"; }
} .textinput:hover > input[type=text] {
.textinput::after {
content: "]";
}
.textinput:hover>input[type=text] {
background-color: #171c94; background-color: #171c94;
color: #c9c9c9; color: #c9c9c9;
border-color: #c9c9c9; border-color: #c9c9c9; }
}
input[type=text] { input[type=text] {
background-color: #c9c9c9; background-color: #c9c9c9;
color: black; color: black;
border-color: black; border-color: black;
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; }
}
.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 */

2
css/style.css.map
View File

File diff suppressed because one or more lines are too long

183
scss/style.scss
View File

@ -1,31 +1,30 @@
@charset "UTF-8"; @charset "UTF-8";
$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);
$em-height: 16px; $em-height: 16px;
$line-overflow: 5px; $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;
border-color: $default-white; border-color: $default-white;
} }
@mixin blueOnWhite { @mixin blueOnWhite {
background-color: $default-white; background-color: $default-white;
color: $default-blue; color: $default-blue;
border-color: $default-blue; border-color: $default-blue;
} }
@mixin whiteOnBlack { @mixin whiteOnBlack {
background-color: $default-black; background-color: $default-black;
color: $default-white; color: $default-white;
border-color: $default-white; border-color: $default-white;
} }
@mixin blackOnWhite { @mixin blackOnWhite {
background-color: $default-white; background-color: $default-white;
color: $default-black; color: $default-black;
@ -45,19 +44,20 @@ $box-double-border: 4px;
src: url("../fonts/iosevka-slab-regular.woff2") format("woff2"); src: url("../fonts/iosevka-slab-regular.woff2") format("woff2");
} }
:root { // Styles applying to everyting :root {
// Styles applying to everyting
font-family: "Iosevka Slab Regular", "monospace"; font-family: "Iosevka Slab Regular", "monospace";
@include whiteOnBlack; @include whiteOnBlack;
font-weight: 400; font-weight: 400;
font-size: $em-height; font-size: $em-height;
line-height: $line-height; line-height: $line-height;
} }
/* General styles for elements */ /* General styles for elements */
* { // Remove margin and padding from everything by default * {
// Remove margin and padding from everything by default
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -66,7 +66,8 @@ p {
width: auto; width: auto;
} }
b { // Bolded text b {
// Bolded text
font-weight: 1000; font-weight: 1000;
} }
@ -80,10 +81,11 @@ ul {
a { a {
color: $default-white; color: $default-white;
@include hoverable($default-white, $default-blue); @include hoverable($default-white,
$default-blue);
} }
nav ul > li > ul:hover a { nav ul>li>ul:hover a {
color: $default-white; color: $default-white;
} }
@ -91,30 +93,35 @@ hr {
height: $line-height / 2; height: $line-height / 2;
border: 0; border: 0;
border-bottom: 1px solid $default-white; border-bottom: 1px solid $default-white;
margin-bottom: $em-height - 1px; margin-bottom: $line-height / 2 - 1px;
} }
nav li hr, li.button-list > ul a hr, .white hr {
nav li hr,
li.button-list>ul a hr,
.white hr {
border-color: $default-black; border-color: $default-black;
} }
nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
nav>li>ul li>ul:hover>hr,
li.button-list>ul:hover a hr {
border-color: $default-white; border-color: $default-white;
} }
/* Lists */ /* Lists */
li { 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, $default-blue); @include hoverable($default-white,
$default-blue);
& > li { &>li {
width: 100%; width: 100%;
} }
a { a {
display: block; display: block;
width: 100%; width: 100%;
@ -122,9 +129,10 @@ li {
} }
} }
/* Navbars */
@keyframes hide { /* Navbars */
@keyframes hide {
0% { 0% {
opacity: 0; opacity: 0;
left: inherit; left: inherit;
@ -136,47 +144,44 @@ li {
opacity: 0; opacity: 0;
left: -9999px; left: -9999px;
} }
} }
nav { nav {
a { a {
color: $default-black; color: $default-black;
display: block; display: block;
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;
padding: 0; padding: 0;
display: table-cell; display: table-cell;
padding-left: 1ch; padding-left: 1ch;
padding-right: 1ch; padding-right: 1ch;
@include hoverable($default-white, $default-blue); @include hoverable($default-white,
$default-blue);
&:focus { &:focus {
@include whiteOnBlue; @include whiteOnBlue;
li {
li { // Display inner items on focus // Display inner items on focus
display: block; display: block;
opacity: 1; opacity: 1;
left: inherit; left: inherit;
animation-name: hide; animation-name: hide;
animation-name: none; animation-name: none;
} }
} }
&>li {
& > li { // Navbar inner lists // Navbar inner lists
@include blackOnWhite; @include blackOnWhite;
position: absolute; position: absolute;
border: 2px solid; border: 2px solid;
@ -188,20 +193,18 @@ nav {
padding: calc(0.25ch + 2px); padding: calc(0.25ch + 2px);
padding-top: $line-height / 2; padding-top: $line-height / 2;
padding-bottom: $line-height / 2; padding-bottom: $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;
} }
} }
@ -210,6 +213,7 @@ nav {
} }
} }
/* Miscallaneous Classes */ /* Miscallaneous Classes */
.box { .box {
@ -218,35 +222,30 @@ nav {
padding: calc(0.5ch - #{$box-border}); padding: calc(0.5ch - #{$box-border});
width: auto; width: auto;
margin-top: $line-height / 2; margin-top: $line-height / 2;
margin-bottom: $line-height / 2 ; margin-bottom: $line-height / 2;
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;
margin: calc(0.5ch); margin: calc(0.5ch);
padding: calc(0.5ch - (#{$box-double-border})); padding: calc(0.5ch - (#{$box-double-border}));
margin-top: $line-height / 2 ; margin-top: $line-height / 2;
margin-bottom: $line-height / 2 ; margin-bottom: $line-height / 2;
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 {
@ -254,15 +253,13 @@ nav {
} }
} }
} }
&.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 {
@ -276,7 +273,10 @@ nav {
@include blueOnWhite; @include blueOnWhite;
} }
} }
.checkbox-right, .checkbox-left, .radio-right, .radio-left { .checkbox-right,
.checkbox-left,
.radio-right,
.radio-left {
&:hover { &:hover {
@include blueOnWhite; @include blueOnWhite;
} }
@ -294,6 +294,7 @@ nav {
-webkit-user-select: none; -webkit-user-select: none;
} }
/* How to add pages: /* How to add pages:
* *
* (at)for (dollar)i from 1 through 20 { * (at)for (dollar)i from 1 through 20 {
@ -306,14 +307,20 @@ nav {
* } * }
*/ */
/* Form styles */ /* Form styles */
input[type=checkbox], input[type=radio] { input[type=checkbox],
input[type=radio] {
display: none; display: none;
} }
.checkbox-right, .checkbox-left, .radio-right, .radio-left { .checkbox-right,
@include hoverable($default-white, $default-blue); .checkbox-left,
.radio-right,
.radio-left {
@include hoverable($default-white,
$default-blue);
} }
.checkbox-right { .checkbox-right {
@ -321,6 +328,7 @@ input[type=checkbox], input[type=radio] {
content: "[ ]"; content: "[ ]";
} }
} }
.checkbox-left { .checkbox-left {
&::before { &::before {
content: "[ ]"; content: "[ ]";
@ -332,6 +340,7 @@ input[type=checkbox], input[type=radio] {
content: "( )"; content: "( )";
} }
} }
.radio-left { .radio-left {
&::before { &::before {
content: "( )"; content: "( )";
@ -339,31 +348,32 @@ input[type=checkbox], input[type=radio] {
} }
input[type=checkbox]:checked { input[type=checkbox]:checked {
& + .checkbox-right::after { &+.checkbox-right::after {
content: "[x]"; content: "[x]";
} }
& + .checkbox-left::before { &+.checkbox-left::before {
content: "[x]"; content: "[x]";
} }
} }
input[type=radio]:checked { input[type=radio]:checked {
& + .radio-right::after { &+.radio-right::after {
content: "(x)"; content: "(x)";
} }
& + .radio-left::before { &+.radio-left::before {
content: "(x)"; content: "(x)";
} }
} }
input[type=text], button { input[type=text],
button {
background-color: inherit; background-color: inherit;
border: none; border: none;
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
@include hoverable($default-white,
@include hoverable($default-white, $default-blue); $default-blue);
} }
label:hover { label:hover {
@ -371,27 +381,32 @@ label:hover {
} }
button { button {
&:focus, &:hover, &:active, &::-moz-focus-inner { &:focus,
&:hover,
&:active,
&::-moz-focus-inner {
border: none; border: none;
text-decoration: none; text-decoration: none;
} }
&::before {
&::before { content: "[ "; } content: "[ ";
&::after { content: " ]"; } }
&::after {
content: " ]";
}
} }
.textinput { .textinput {
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;
} }
} }
@ -401,19 +416,31 @@ input[type=text] {
width: 15ch; width: 15ch;
} }
/* Style helpers, like space-takers */ /* Style helpers, like space-takers */
@for $i from 1 through 5 { @for $i from 1 through 5 {
.space-#{$i} { min-height: $line-height * $i; } .space-#{$i} {
min-height: $line-height * $i;
}
} }
@for $width from 1 through 5 { @for $width from 1 through 5 {
.width-#{$width * 5} { width: $width * 5ch; } .width-#{$width * 5} {
width: $width * 5ch;
}
} }
@for $width from 1 through 5 { @for $width from 1 through 5 {
.width-#{$width * 50} { width: $width * 50ch - 2ch; } .width-#{$width * 50} {
width: $width * 50ch - 2ch;
}
} }
@for $i from 1 through 5 { @for $i from 1 through 5 {
.padding-#{$i} { padding: $i * 1ch; padding-top: $line-height * $i; padding-bottom: $line-height * $i; } .padding-#{$i} {
padding: $i * 1ch;
padding-top: $line-height * $i;
padding-bottom: $line-height * $i;
}
} }