Made the scss a bit neater, added forms and pages
This commit is contained in:
Teascade
parent
ff87ef6aa7
commit
ac84a23f00
32
index.html
32
index.html
@ -1,11 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS example</title>
|
||||
<link type="text/css" rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<input type="radio" id="radio-page-1" name="pages">
|
||||
<input type="radio" id="radio-page-2" name="pages">
|
||||
<nav>
|
||||
<li>
|
||||
<ul>GFA.EXE</ul><ul tabindex="0" class="list-symbol">File
|
||||
@ -22,6 +24,10 @@
|
||||
<li>
|
||||
<ul>Style</ul>
|
||||
<ul>Another style</ul>
|
||||
</li></ul><ul tabindex="0" class="list-symbol">Pages
|
||||
<li>
|
||||
<ul><label for="radio-page-1">Page 1</label></ul>
|
||||
<ul><label for="radio-page-2">Page 2</label></ul>
|
||||
</li></ul><ul tabindex="0" class="list-symbol">Help
|
||||
<li>
|
||||
<ul><a href="https://git.teasca.de/teascade/retrofuturistic-universe">What is this?</a></ul>
|
||||
@ -31,7 +37,7 @@
|
||||
</li></ul>
|
||||
</li>
|
||||
</nav>
|
||||
<div class=""></div>
|
||||
<div class="page-1">
|
||||
<p>Good day! <b>Bold!</b></p>
|
||||
<div>
|
||||
<div class="box white width-50">
|
||||
@ -70,5 +76,21 @@
|
||||
</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 class="page-2">
|
||||
<p>Hello! Welcome to <b>Page 2</b></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
218
style.css
218
style.css
@ -28,9 +28,9 @@ ul {
|
||||
a {
|
||||
color: #c9c9c9; }
|
||||
a:hover {
|
||||
background-color: #171c94;
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
background-color: #171c94; }
|
||||
|
||||
nav ul > li > ul:hover a {
|
||||
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 {
|
||||
content: "- "; }
|
||||
li.button-list > ul {
|
||||
width: calc(100% - 1ch); }
|
||||
width: calc(100% - 1ch);
|
||||
text-decoration: underline; }
|
||||
li.button-list > ul:hover {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9; }
|
||||
li.button-list > ul:hover > a {
|
||||
color: #c9c9c9; }
|
||||
li.button-list > ul > li {
|
||||
width: 100%; }
|
||||
li.button-list > ul a {
|
||||
@ -95,10 +94,9 @@ nav > li {
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch; }
|
||||
nav > li > ul:hover {
|
||||
background-color: #171c94;
|
||||
cursor: pointer;
|
||||
color: #c9c9c9;
|
||||
border-color: #c9c9c9;
|
||||
cursor: pointer; }
|
||||
background-color: #171c94; }
|
||||
nav > li > ul:focus {
|
||||
background-color: #171c94;
|
||||
color: #c9c9c9;
|
||||
@ -197,10 +195,214 @@ nav > li {
|
||||
border-color: #171c94; }
|
||||
.box.blue hr {
|
||||
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 {
|
||||
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 */
|
||||
.space-1em {
|
||||
min-height: 21px; }
|
||||
|
||||
File diff suppressed because one or more lines are too long
138
style.scss
138
style.scss
@ -32,6 +32,14 @@ $box-double-border: 4px;
|
||||
border-color: $default-black;
|
||||
}
|
||||
|
||||
@mixin hoverable($hoverFg, $hoverBg) {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $hoverFg;
|
||||
background-color: $hoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
:root { // Styles applying to everyting
|
||||
font-family: "Iosevka Slab", "Iosevka", "Consolas", "monospace";
|
||||
|
||||
@ -67,9 +75,7 @@ ul {
|
||||
|
||||
a {
|
||||
color: $default-white;
|
||||
&:hover {
|
||||
@include whiteOnBlue;
|
||||
}
|
||||
@include hoverable($default-white, $default-blue);
|
||||
}
|
||||
|
||||
nav ul > li > ul:hover a {
|
||||
@ -99,13 +105,10 @@ li {
|
||||
}
|
||||
&.button-list > ul {
|
||||
width: calc(100% - 1ch);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
@include whiteOnBlue;
|
||||
|
||||
& > a {
|
||||
color: $default-white;
|
||||
}
|
||||
}
|
||||
|
||||
& > li {
|
||||
@ -157,11 +160,8 @@ nav {
|
||||
display: inline-block;
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
@include hoverable($default-white, $default-blue);
|
||||
|
||||
&:hover { // Navbar items
|
||||
@include whiteOnBlue;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
@include whiteOnBlue;
|
||||
|
||||
@ -273,6 +273,16 @@ nav {
|
||||
hr {
|
||||
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: " ▼";
|
||||
}
|
||||
|
||||
.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 */
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user