Made the scss a bit neater, added forms and pages
This commit is contained in:
Teascade
parent
ff87ef6aa7
commit
ac84a23f00
152
index.html
152
index.html
@ -1,74 +1,96 @@
|
|||||||
<!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="style.css" />
|
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<input type="radio" id="radio-page-1" name="pages">
|
||||||
<li>
|
<input type="radio" id="radio-page-2" name="pages">
|
||||||
<ul>GFA.EXE</ul><ul tabindex="0" class="list-symbol">File
|
<nav>
|
||||||
<li>
|
<li>
|
||||||
<ul>Save</ul>
|
<ul>GFA.EXE</ul><ul tabindex="0" class="list-symbol">File
|
||||||
<ul>Save As</ul>
|
<li>
|
||||||
<ul>Exit</ul>
|
<ul>Save</ul>
|
||||||
</li>
|
<ul>Save As</ul>
|
||||||
</ul><ul tabindex="0" class="list-symbol">Edit
|
<ul>Exit</ul>
|
||||||
<li>
|
</li>
|
||||||
<ul>Scale</ul>
|
</ul><ul tabindex="0" class="list-symbol">Edit
|
||||||
<ul>Something</ul>
|
<li>
|
||||||
|
<ul>Scale</ul>
|
||||||
|
<ul>Something</ul>
|
||||||
</li></ul><ul tabindex="0" class="list-symbol">View
|
</li></ul><ul tabindex="0" class="list-symbol">View
|
||||||
<li>
|
<li>
|
||||||
<ul>Style</ul>
|
<ul>Style</ul>
|
||||||
<ul>Another style</ul>
|
<ul>Another style</ul>
|
||||||
</li></ul><ul tabindex="0" class="list-symbol">Help
|
</li></ul><ul tabindex="0" class="list-symbol">Pages
|
||||||
<li>
|
<li>
|
||||||
<ul><a href="https://git.teasca.de/teascade/retrofuturistic-universe">What is this?</a></ul>
|
<ul><label for="radio-page-1">Page 1</label></ul>
|
||||||
<ul><a href="https://git.teasca.de/teascade/retrofuturistic-universe/issues">Oh no</a></ul>
|
<ul><label for="radio-page-2">Page 2</label></ul>
|
||||||
<ul><hr></ul>
|
</li></ul><ul tabindex="0" class="list-symbol">Help
|
||||||
<ul>A thing under hr</ul>
|
<li>
|
||||||
</li></ul>
|
<ul><a href="https://git.teasca.de/teascade/retrofuturistic-universe">What is this?</a></ul>
|
||||||
</li>
|
<ul><a href="https://git.teasca.de/teascade/retrofuturistic-universe/issues">Oh no</a></ul>
|
||||||
</nav>
|
<ul><hr></ul>
|
||||||
<div class=""></div>
|
<ul>A thing under hr</ul>
|
||||||
<p>Good day! <b>Bold!</b></p>
|
</li></ul>
|
||||||
<div>
|
|
||||||
<div class="box white width-50">
|
|
||||||
<p><b>Links!</b></p>
|
|
||||||
<li class="button-list">
|
|
||||||
<ul><a href="https://teasca.de/">Teasca.de</a></ul>
|
|
||||||
<ul><a href="https://github.com/teascade">GitHub</a></ul>
|
|
||||||
<ul><a href="https://social.targaryen.house/@teascade">Mastodon</a></ul>
|
|
||||||
</li>
|
</li>
|
||||||
<div class="hr"><hr></div>
|
</nav>
|
||||||
<p>Stuff under the hr!</p>
|
<div class="page-1">
|
||||||
</li>
|
<p>Good day! <b>Bold!</b></p>
|
||||||
</div
|
<div>
|
||||||
><div class="box double white width-50">
|
<div class="box white width-50">
|
||||||
<p>Welcome to a thing! This is a list, hello!</p>
|
<p><b>Links!</b></p>
|
||||||
<p>The list:</p>
|
<li class="button-list">
|
||||||
<li>
|
<ul><a href="https://teasca.de/">Teasca.de</a></ul>
|
||||||
<ul>Thing in a list </ul>
|
<ul><a href="https://github.com/teascade">GitHub</a></ul>
|
||||||
<ul>Another thing</ul>
|
<ul><a href="https://social.targaryen.house/@teascade">Mastodon</a></ul>
|
||||||
</li>
|
</li>
|
||||||
<div class="space-1em"></div>
|
<div class="hr"><hr></div>
|
||||||
</div>
|
<p>Stuff under the hr!</p>
|
||||||
</div>
|
</li>
|
||||||
<div>
|
</div
|
||||||
<div class="box blue width-100">
|
><div class="box double white width-50">
|
||||||
<div class="padding-1">
|
<p>Welcome to a thing! This is a list, hello!</p>
|
||||||
<div class="">
|
<p>The list:</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>
|
<li>
|
||||||
<div class="space-1em"></div>
|
<ul>Thing in a list </ul>
|
||||||
<p><b>Some stuff</b></p>
|
<ul>Another thing</ul>
|
||||||
<div class="space-1em"></div>
|
</li>
|
||||||
<p>This is a blue box</p>
|
<div class="space-1em"></div>
|
||||||
<div class="hr"><hr></div>
|
</div>
|
||||||
<p>Hello! I'm under hr!</p>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box blue width-100">
|
||||||
|
<div class="padding-1">
|
||||||
|
<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>
|
||||||
|
<div class="space-1em"></div>
|
||||||
|
<p><b>Some stuff</b></p>
|
||||||
|
<div class="space-1em"></div>
|
||||||
|
<p>This is a blue box</p>
|
||||||
|
<div class="hr"><hr></div>
|
||||||
|
<p>Hello! I'm under hr!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="box white width-100">
|
||||||
|
<div class="padding-1">
|
||||||
|
<b>A test form!</b>
|
||||||
|
<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="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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="page-2">
|
||||||
</div>
|
<p>Hello! Welcome to <b>Page 2</b></p>
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
218
style.css
218
style.css
@ -28,9 +28,9 @@ ul {
|
|||||||
a {
|
a {
|
||||||
color: #c9c9c9; }
|
color: #c9c9c9; }
|
||||||
a:hover {
|
a:hover {
|
||||||
background-color: #171c94;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: #c9c9c9;
|
||||||
border-color: #c9c9c9; }
|
background-color: #171c94; }
|
||||||
|
|
||||||
nav ul > li > ul:hover a {
|
nav ul > li > ul:hover a {
|
||||||
color: #c9c9c9; }
|
color: #c9c9c9; }
|
||||||
@ -53,13 +53,12 @@ nav > li > ul li > ul:hover > hr, li.button-list > ul:hover a hr {
|
|||||||
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; }
|
||||||
li.button-list > ul:hover {
|
li.button-list > ul:hover {
|
||||||
background-color: #171c94;
|
background-color: #171c94;
|
||||||
color: #c9c9c9;
|
color: #c9c9c9;
|
||||||
border-color: #c9c9c9; }
|
border-color: #c9c9c9; }
|
||||||
li.button-list > ul:hover > a {
|
|
||||||
color: #c9c9c9; }
|
|
||||||
li.button-list > ul > li {
|
li.button-list > ul > li {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
li.button-list > ul a {
|
li.button-list > ul a {
|
||||||
@ -95,10 +94,9 @@ nav > li {
|
|||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch; }
|
padding-right: 1ch; }
|
||||||
nav > li > ul:hover {
|
nav > li > ul:hover {
|
||||||
background-color: #171c94;
|
cursor: pointer;
|
||||||
color: #c9c9c9;
|
color: #c9c9c9;
|
||||||
border-color: #c9c9c9;
|
background-color: #171c94; }
|
||||||
cursor: pointer; }
|
|
||||||
nav > li > ul:focus {
|
nav > li > ul:focus {
|
||||||
background-color: #171c94;
|
background-color: #171c94;
|
||||||
color: #c9c9c9;
|
color: #c9c9c9;
|
||||||
@ -197,10 +195,214 @@ nav > li {
|
|||||||
border-color: #171c94; }
|
border-color: #171c94; }
|
||||||
.box.blue hr {
|
.box.blue hr {
|
||||||
border-color: #c9c9c9; }
|
border-color: #c9c9c9; }
|
||||||
|
.box.blue button:hover {
|
||||||
|
background-color: #c9c9c9;
|
||||||
|
color: #171c94;
|
||||||
|
border-color: #171c94; }
|
||||||
|
.box.blue .checkbox-right:hover, .box.blue .checkbox-left:hover, .box.blue .radio-right:hover, .box.blue .radio-left:hover {
|
||||||
|
background-color: #c9c9c9;
|
||||||
|
color: #171c94;
|
||||||
|
border-color: #171c94; }
|
||||||
|
|
||||||
.list-symbol::after {
|
.list-symbol::after {
|
||||||
content: " ▼"; }
|
content: " ▼"; }
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none; }
|
||||||
|
|
||||||
|
.page-1 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-1:checked ~ .page-1 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-2 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-2:checked ~ .page-2 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-3 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-3:checked ~ .page-3 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-4 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-4:checked ~ .page-4 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-5 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-5:checked ~ .page-5 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-6 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-6:checked ~ .page-6 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-7 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-7:checked ~ .page-7 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-8 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-8:checked ~ .page-8 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-9 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-9:checked ~ .page-9 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-10 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-10:checked ~ .page-10 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-11 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-11:checked ~ .page-11 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-12 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-12:checked ~ .page-12 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-13 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-13:checked ~ .page-13 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-14 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-14:checked ~ .page-14 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-15 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-15:checked ~ .page-15 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-16 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-16:checked ~ .page-16 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-17 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-17:checked ~ .page-17 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-18 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-18:checked ~ .page-18 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-19 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-19:checked ~ .page-19 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.page-20 {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
#radio-page-20:checked ~ .page-20 {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
/* Form styles */
|
||||||
|
input[type=checkbox], input[type=radio] {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.checkbox-right:hover, .checkbox-left:hover, .radio-right:hover, .radio-left:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #c9c9c9;
|
||||||
|
background-color: #171c94; }
|
||||||
|
|
||||||
|
.checkbox-right::after {
|
||||||
|
content: "[ ]"; }
|
||||||
|
|
||||||
|
.checkbox-left::before {
|
||||||
|
content: "[ ]"; }
|
||||||
|
|
||||||
|
.radio-right::after {
|
||||||
|
content: "( )"; }
|
||||||
|
|
||||||
|
.radio-left::before {
|
||||||
|
content: "( )"; }
|
||||||
|
|
||||||
|
input[type=checkbox]:checked + .checkbox-right::after {
|
||||||
|
content: "[x]"; }
|
||||||
|
input[type=checkbox]:checked + .checkbox-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], button {
|
||||||
|
background-color: inherit;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit; }
|
||||||
|
input[type=text]:hover, button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #c9c9c9;
|
||||||
|
background-color: #171c94; }
|
||||||
|
|
||||||
|
button:focus, button:hover, button:active, button::-moz-focus-inner {
|
||||||
|
border: none;
|
||||||
|
text-decoration: none; }
|
||||||
|
button::before {
|
||||||
|
content: "[ "; }
|
||||||
|
button::after {
|
||||||
|
content: " ]"; }
|
||||||
|
|
||||||
|
.textinput {
|
||||||
|
display: inline-block; }
|
||||||
|
.textinput:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #c9c9c9;
|
||||||
|
background-color: #171c94; }
|
||||||
|
.textinput::before {
|
||||||
|
content: "["; }
|
||||||
|
.textinput::after {
|
||||||
|
content: "]"; }
|
||||||
|
.textinput:hover > input[type=text] {
|
||||||
|
background-color: #171c94;
|
||||||
|
color: #c9c9c9;
|
||||||
|
border-color: #c9c9c9; }
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
background-color: #c9c9c9;
|
||||||
|
color: black;
|
||||||
|
border-color: black;
|
||||||
|
width: 15ch; }
|
||||||
|
|
||||||
/* Style helpers, like space-takers */
|
/* Style helpers, like space-takers */
|
||||||
.space-1em {
|
.space-1em {
|
||||||
min-height: 21px; }
|
min-height: 21px; }
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
148
style.scss
148
style.scss
@ -32,6 +32,14 @@ $box-double-border: 4px;
|
|||||||
border-color: $default-black;
|
border-color: $default-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin hoverable($hoverFg, $hoverBg) {
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
color: $hoverFg;
|
||||||
|
background-color: $hoverBg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:root { // Styles applying to everyting
|
:root { // Styles applying to everyting
|
||||||
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
||||||
|
|
||||||
@ -67,9 +75,7 @@ ul {
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
color: $default-white;
|
color: $default-white;
|
||||||
&:hover {
|
@include hoverable($default-white, $default-blue);
|
||||||
@include whiteOnBlue;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul > li > ul:hover a {
|
nav ul > li > ul:hover a {
|
||||||
@ -99,13 +105,10 @@ li {
|
|||||||
}
|
}
|
||||||
&.button-list > ul {
|
&.button-list > ul {
|
||||||
width: calc(100% - 1ch);
|
width: calc(100% - 1ch);
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
|
|
||||||
& > a {
|
|
||||||
color: $default-white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > li {
|
& > li {
|
||||||
@ -157,11 +160,8 @@ nav {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-left: 1ch;
|
padding-left: 1ch;
|
||||||
padding-right: 1ch;
|
padding-right: 1ch;
|
||||||
|
@include hoverable($default-white, $default-blue);
|
||||||
|
|
||||||
&:hover { // Navbar items
|
|
||||||
@include whiteOnBlue;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@include whiteOnBlue;
|
@include whiteOnBlue;
|
||||||
|
|
||||||
@ -250,11 +250,11 @@ nav {
|
|||||||
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 {
|
||||||
@ -273,6 +273,16 @@ nav {
|
|||||||
hr {
|
hr {
|
||||||
border-color: $default-white;
|
border-color: $default-white;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
&:hover {
|
||||||
|
@include blueOnWhite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checkbox-right, .checkbox-left, .radio-right, .radio-left {
|
||||||
|
&:hover {
|
||||||
|
@include blueOnWhite;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -280,6 +290,112 @@ nav {
|
|||||||
content: " ▼";
|
content: " ▼";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $i from 1 through 20 {
|
||||||
|
.page-#{$i} {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#radio-page-#{$i}:checked ~ .page-#{$i} {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Form styles */
|
||||||
|
|
||||||
|
input[type=checkbox], input[type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-right, .checkbox-left, .radio-right, .radio-left {
|
||||||
|
@include hoverable($default-white, $default-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-right {
|
||||||
|
&::after {
|
||||||
|
content: "[ ]";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.checkbox-left {
|
||||||
|
&::before {
|
||||||
|
content: "[ ]";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-right {
|
||||||
|
&::after {
|
||||||
|
content: "( )";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.radio-left {
|
||||||
|
&::before {
|
||||||
|
content: "( )";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=checkbox]:checked {
|
||||||
|
& + .checkbox-right::after {
|
||||||
|
content: "[x]";
|
||||||
|
}
|
||||||
|
& + .checkbox-left::before {
|
||||||
|
content: "[x]";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=radio]:checked {
|
||||||
|
& + .radio-right::after {
|
||||||
|
content: "(x)";
|
||||||
|
}
|
||||||
|
& + .radio-left::before {
|
||||||
|
content: "(x)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text], button {
|
||||||
|
background-color: inherit;
|
||||||
|
border: none;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
@include hoverable($default-white, $default-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
&:focus, &:hover, &:active, &::-moz-focus-inner {
|
||||||
|
border: none;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before { content: "[ "; }
|
||||||
|
&::after { content: " ]"; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.textinput {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
@include hoverable($default-white, $default-blue);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: "[";
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
content: "]";
|
||||||
|
}
|
||||||
|
&:hover > input[type=text] {
|
||||||
|
@include whiteOnBlue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
@include blackOnWhite;
|
||||||
|
width: 15ch;
|
||||||
|
}
|
||||||
|
|
||||||
/* Style helpers, like space-takers */
|
/* Style helpers, like space-takers */
|
||||||
|
|
||||||
@for $i from 1 through 5 {
|
@for $i from 1 through 5 {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user