Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button styling V1

Browse Source 
Added first Version of Button styling improvements follow soon classes should stay as they are
This commit is contained in:
steev 2022-03-15 13:18:49 +01:00
parent d4a0cb45ef
commit 6489990afe
8 changed files with 615 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

293
src/index.html
View File

@ -1,126 +1,169 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title> <title>Sass test</title>
<link rel="stylesheet" href="scss/main.sass"> <link rel="stylesheet" href="scss/main.sass">
<link rel="stylesheet" href="scss/navbar.sass"> <link rel="stylesheet" href="scss/navbar.sass">
<link rel="stylesheet" href="scss/messaging.sass"> <link rel="stylesheet" href="scss/messaging.sass">
<link rel="stylesheet" href="scss/selector.sass"> <link rel="stylesheet" href="scss/selector.sass">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"> <link rel="stylesheet" href="scss/button.sass">
</head> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
<body> </head>
<header> <body>
<h1 class="nav-logo">Logo</h1> <header class="locked-top">
<input id="nav-toggle" type="checkbox" class="nav-toggle"> <h1 class="nav-logo">Logo</h1>
<label for="nav-toggle" class="nav-toggle-label"> <input id="nav-toggle" type="checkbox" class="nav-toggle">
<span></span> <label for="nav-toggle" class="nav-toggle-label">
</label> <span></span>
<nav> </label>
<ul> <nav>
<li><a href="#">Test</a></li> <ul>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
</ul> <li><a href="#">Test</a></li>
</nav> </ul>
</header> </nav>
<main> </header>
<div class="container"> <main>
<h1>Toggle Slide</h1> <div class="container">
<br> <button class="btn ">button</button>
<!-- Rectangular switch --> <button class="btn btn-primary">button</button>
<label class="switch"> <button class="btn btn-danger">button</button>
<input type="checkbox"> <button class="btn btn-warning">button</button>
<span class="slider"></span> <button class="btn btn-success">button</button>
</label> <h1>Toggle Slide</h1>
<!-- Rounded switch --> <br>
<label class="switch"> <!-- Rectangular switch -->
<input type="checkbox"> <label class="switch">
<span class="slider round"></span> <input type="checkbox">
</label> <span class="slider"></span>
<br><br> </label>
<h1>Slider</h1> <!-- Rounded switch -->
<br> <label class="switch">
<input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider"> <input type="checkbox">
<span>Span Value: </span><span id="output">0</span> <span class="slider round"></span>
<script> </label>
var slider = document.getElementById("slider"); <br><br>
var output = document.getElementById("output"); <h1>Slider</h1>
output.innerHTML = slider.value; // Display the default slider value <br>
<input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
// Update the current slider value (each time you drag the slider handle) <span>Span Value: </span><span id="output">0</span>
slider.oninput = function() { <script>
output.innerHTML = this.value; var slider = document.getElementById("slider");
} var output = document.getElementById("output");
</script> output.innerHTML = slider.value; // Display the default slider value
<br><br>
<div class="embed"> // Update the current slider value (each time you drag the slider handle)
<h1>Embed</h1> slider.oninput = function() {
<hr> output.innerHTML = this.value;
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p> }
</div> </script>
<br> <br><br>
<h1>Code Embed</h1> <div class="embed">
<pre> <h1>Embed</h1>
<code class="language-html"> <hr>
<h1>test</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
code here, escape it yourself. </div>
<h2>test</h2> <br>
<h1>Code Embed</h1>
</code> <pre>
</pre> <code class="language-html">
<h1 style="text-align: center;">Alert Elements</h1> <h1>test</h1>
<div class="alert-primary"> test </div><br> code here, escape it yourself.
<div class="alert-danger"> test </div><br> <h2>test</h2>
<div class="alert-warning"> test </div><br> <link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
<div class="alert-success"> test </div>
<br> </code>
<h1 style="text-align: center;">Notification Elements</h1> </pre>
<div class="notification-primary"> <header>
<h2>ein kleiner test satz</h2> <h1 class="nav-logo">Logo</h1>
<span class="notification-body">Funktion test des objektes</span> <input id="nav-toggle" type="checkbox" class="nav-toggle">
</div> <label for="nav-toggle" class="nav-toggle-label">
<br> <span></span>
<div class="notification-danger"> </label>
<h2>ein kleiner test satz</h2> <nav>
<span class="notification-body">Funktion test des objektes</span> <ul>
</div> <li><a href="#">Test</a></li>
<br> <li><a href="#">Test</a></li>
<div class="notification-warning"> <li><a href="#">Test</a></li>
<h2>ein kleiner test satz</h2> <li><a href="#">Test</a></li>
<span class="notification-body">Funktion test des objektes</span> <li><a href="#">Test</a></li>
</div> </ul>
<br> </nav>
<div class="notification-success"> </header>
<h2>ein kleiner test satz</h2> <pre>
<span class="notification-body">Funktion test des objektes</span> <code class="language-html">
</div> <header>
<br> <h1 class="nav-logo">Logo</h1>
<h1 style="text-align: center;">CSS Grid</h1> <input id="nav-toggle" type="checkbox" class="nav-toggle">
<div class="row"> <label for="nav-toggle" class="nav-toggle-label">
<div class="col-12 display"><h1>12</h1></div> <span></span>
<div class="col-11 display"><h1>11</h1></div> </label>
<div class="col-1 display"><h1>1</h1></div> <nav>
<div class="col-10 display"><h1>10</h1></div> <ul>
<div class="col-2 display"><h1>2</h1></div> <li><a href="#">Test</a></li>
<div class="col-9 display"><h1>9</h1></div> <li><a href="#">Test</a></li>
<div class="col-3 display"><h1>3</h1></div> <li><a href="#">Test</a></li>
<div class="col-8 display"><h1>8</h1></div> <li><a href="#">Test</a></li>
<div class="col-4 display"><h1>4</h1></div> <li><a href="#">Test</a></li>
<div class="col-7 display"><h1>7</h1></div> </ul>
<div class="col-5 display"><h1>5</h1></div> </nav>
<div class="col-6 display"><h1>6</h1></div> </header>
<div class="col-6 display"><h1>6</h1></div> </code>
</div> </pre>
</div> <h1 style="text-align: center;">Alert Elements</h1>
</main> <div class="alert-primary"> test </div><br>
<br><br><br> <div class="alert-danger"> test </div><br>
<br><br><br> <div class="alert-warning"> test </div><br>
<script src="js/steevcss.js"></script> <div class="alert-success"> test </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> <br>
<script>hljs.highlightAll();</script> <h1 style="text-align: center;">Notification Elements</h1>
</body> <div class="notification-primary">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-danger">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-warning">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-success">
<h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<h1 style="text-align: center;">CSS Grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>
<div class="col-11 display"><h1>11</h1></div>
<div class="col-1 display"><h1>1</h1></div>
<div class="col-10 display"><h1>10</h1></div>
<div class="col-2 display"><h1>2</h1></div>
<div class="col-9 display"><h1>9</h1></div>
<div class="col-3 display"><h1>3</h1></div>
<div class="col-8 display"><h1>8</h1></div>
<div class="col-4 display"><h1>4</h1></div>
<div class="col-7 display"><h1>7</h1></div>
<div class="col-5 display"><h1>5</h1></div>
<div class="col-6 display"><h1>6</h1></div>
<div class="col-6 display"><h1>6</h1></div>
</div>
</div>
</main>
<br><br><br>
<br><br><br>
<script src="js/steevcss.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html> </html>

48
src/js/steevcss.js
View File

@ -1,25 +1,25 @@
var code = document.querySelectorAll("code"); var code = document.querySelectorAll("code");
// code embed // code embed
code.forEach(c => { code.forEach(c => {
let code = c.innerHTML.toString(); let code = c.innerHTML.toString();
var output = ""; var output = "";
for(let i = 0; i < code.length; i++){ for(let i = 0; i < code.length; i++){
switch(code.charAt(i)){ switch(code.charAt(i)){
default: output += code.charAt(i); break; default: output += code.charAt(i); break;
case ">": output += "&gt;"; break; case ">": output += "&gt;"; break;
case "<": output += "&lt;"; break; case "<": output += "&lt;"; break;
case "&": output += "&amp;"; break; case "&": output += "&amp;"; break;
case "\"": output += "&quot;"; break; case "\"": output += "&quot;"; break;
} }
} }
c.innerHTML = output; c.innerHTML = output;
}); });
// TODO JavaScript Input value return // TODO JavaScript Input value return
// Current way.. // Current way..
// ------------------------------------- // -------------------------------------
// get input by getting the input object // get input by getting the input object
// catch oninput event inside a function // catch oninput event inside a function
// Handle it inside the function // Handle it inside the function
// ------------------------------------- // -------------------------------------

47
src/scss/button.sass Normal file
View File

@ -0,0 +1,47 @@
$primBG: rgb(248, 248, 248)
$primary: #3498db
$primary_dark: #2980b9
$danger: #e74c3c
$danger_dark: #c0392b
$warning: #f1c40f
$warning_dark: #f39c12
$success: #2ecc71
$success_dark: #27ae60
$border_width: 2px
$border_radius: 5px
$padding: 5px
/* Button Style Classes */
.btn
border-radius: $border_radius
border-width: $border_width
padding: $padding
transition: 50ms
.btn-primary
background-color: $primary
border: $border_width solid $primary_dark
color: white
.btn-danger
background-color: $danger
border: $border_width solid $danger_dark
color: white
.btn-warning
background-color: $warning
border: $border_width solid $warning_dark
color: white
.btn-success
background-color: $success
border: $border_width solid $success_dark
color: white
/* Hover classes */
.btn:hover
background-color: #d8d8d8d8
.btn-primary:hover
background-color: $primary_dark
.btn-danger:hover
background-color: $danger_dark
.btn-warning:hover
background-color: $warning_dark
.btn-success:hover
background-color: $success_dark

0
src/scss/forms.sass Normal file
View File

116
src/scss/main.sass
View File

@ -1,58 +1,58 @@
$primBG: rgb(248, 248, 248) $primBG: rgb(248, 248, 248)
$columns: 12 $columns: 12
$primary: #3498db $primary: #3498db
$primary_dark: #2980b9 $primary_dark: #2980b9
$danger: #e74c3c $danger: #e74c3c
$danger_dark: #c0392b $danger_dark: #c0392b
$warning: #f1c40f $warning: #f1c40f
$warning_dark: #f39c12 $warning_dark: #f39c12
$success: #2ecc71 $success: #2ecc71
$success_dark: #27ae60 $success_dark: #27ae60
* *
box-sizing: border-box box-sizing: border-box
font-family: Verdana, Geneva, Tahoma, sans-serif font-family: Verdana, Geneva, Tahoma, sans-serif
hr hr
background-color: #c0c0c0 background-color: #c0c0c0
border: 2px solid #c0c0c0 border: 2px solid #c0c0c0
border-radius: 5px border-radius: 5px
body body
margin: 0 margin: 0
padding: 0 padding: 0
background: $primBG background: $primBG
main main
z-index: 980 z-index: 980
position: relative position: relative
top: 5.5em top: 5.5em
width: 100% width: 100%
word-break: break-word word-break: break-word
pre pre
/*background-color: #d8d8d8*/ /*background-color: #d8d8d8*/
border: 1px solid #d8d8d8 border-radius: 5px
border-radius: 5px @for $i from 1 through 12
@for $i from 1 through 12 h#{$i}
h#{$i} margin: 0
margin: 0 .dev
.dev border: 1px solid black
border: 1px solid black .display
.display background-color: lightcoral
background-color: lightcoral border: 1px solid red
border: 1px solid red text-align: center
text-align: center .container
.container width: calc( 100% - 10em )
width: calc( 100% - 10em ) max-width: 90em
max-width: 90em margin: 0 auto
margin: 0 auto .link
/* Alert Embeds */ color: #2980b9
text-decoration: none
div[class^="col-"] font-size: 12pt
padding: 1rem 0 div[class^="col-"]
.row padding: 1rem 0
display: flex .row
flex-wrap: wrap display: flex
@for $i from 1 through $columns flex-wrap: wrap
.col-#{$i} @for $i from 1 through $columns
flex: 0 0 100% / $columns * $i .col-#{$i}
.col-offset-#{$i} flex: 0 0 100% / $columns * $i
margin-left: 100% / $columns * $i .col-offset-#{$i}
margin-left: 100% / $columns * $i

184
src/scss/messaging.sass
View File

@ -1,93 +1,93 @@
$primary: #3498db $primary: #3498db
$primary_dark: #2980b9 $primary_dark: #2980b9
$danger: #e74c3c $danger: #e74c3c
$danger_dark: #c0392b $danger_dark: #c0392b
$warning: #f1c40f $warning: #f1c40f
$warning_dark: #f39c12 $warning_dark: #f39c12
$success: #2ecc71 $success: #2ecc71
$success_dark: #27ae60 $success_dark: #27ae60
.embed .embed
background-color: #d8d8d8 background-color: #d8d8d8
border-radius: 5px border-radius: 5px
padding: 5px padding: 5px
.alert-primary .alert-primary
border-radius: 2px border-radius: 2px
background-color: $primary background-color: $primary
border: 1px solid $primary_dark border: 1px solid $primary_dark
padding: 1rem padding: 1rem
color: white color: white
.alert-danger .alert-danger
border-radius: 2px border-radius: 2px
background-color: $danger background-color: $danger
border: 1px solid $danger_dark border: 1px solid $danger_dark
padding: 1rem padding: 1rem
color: white color: white
.alert-warning .alert-warning
border-radius: 2px border-radius: 2px
background-color: $warning background-color: $warning
border: 1px solid $warning_dark border: 1px solid $warning_dark
padding: 1rem padding: 1rem
color: white color: white
.alert-success .alert-success
border-radius: 2px border-radius: 2px
background-color: $success background-color: $success
border: 1px solid $success_dark border: 1px solid $success_dark
padding: 1rem padding: 1rem
color: white color: white
.notification-primary .notification-primary
width: 100%; width: 100%;
display: flex display: flex
padding: 5px padding: 5px
border: 2px solid $primary border: 2px solid $primary
border-radius: 2px border-radius: 2px
.notification-primary h2 .notification-primary h2
border-right: 0.3rem solid $primary border-right: 0.3rem solid $primary
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
height: auto height: auto
display: flex display: flex
.notification-danger .notification-danger
width: 100%; width: 100%;
display: flex display: flex
padding: 5px padding: 5px
border: 2px solid $danger border: 2px solid $danger
border-radius: 2px border-radius: 2px
.notification-danger h2 .notification-danger h2
border-right: 0.3rem solid $danger border-right: 0.3rem solid $danger
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
height: auto height: auto
display: flex display: flex
.notification-warning .notification-warning
width: 100%; width: 100%;
display: flex display: flex
padding: 5px padding: 5px
border: 2px solid $warning border: 2px solid $warning
border-radius: 2px border-radius: 2px
.notification-warning h2 .notification-warning h2
border-right: 0.3rem solid $warning border-right: 0.3rem solid $warning
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
height: auto height: auto
display: flex display: flex
.notification-success .notification-success
width: 100%; width: 100%;
display: flex display: flex
padding: 5px padding: 5px
border: 2px solid $success border: 2px solid $success
border-radius: 2px border-radius: 2px
.notification-success h2 .notification-success h2
border-right: 0.3rem solid $success border-right: 0.3rem solid $success
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
height: auto height: auto
display: flex display: flex
.notification-body .notification-body
line-height: 30pt line-height: 30pt
font-size: 15pt font-size: 15pt
word-wrap: break-word word-wrap: break-word

231
src/scss/navbar.sass
View File

@ -1,104 +1,127 @@
$navBG: #f1f1f1 $navBG: #f1f1f1
$navgap: 1em $navgap: 1em
$navdefcolor: #2e2e2e $navdefcolor: #2e2e2e
$navhovcolor: #a5a5a5 $navhovcolor: #a5a5a5
header header
background: $navBG background: $navBG
text-align: center text-align: center
position: fixed height: 30px
height: 30px z-index: 999
z-index: 999 width: 100%
width: 100% height: auto
height: auto padding: 10px
top: 0 .locked-top
padding: 10px top: 0
.nav-toggle position: fixed
display: none .nav-toggle
.nav-toggle-label display: none
position: absolute .nav-toggle-label
top: 0 position: absolute
left: 0 top: 0
margin-left: 1em left: 0
height: 100% margin-left: 1em
display: flex height: 100%
align-items: center display: flex
.nav-toggle-label span, align-items: center
.nav-toggle-label span::before, .nav-toggle-label span,
.nav-toggle-label span::after .nav-toggle-label span::before,
display: block .nav-toggle-label span::after
background: white display: block
height: 2px background: white
width: 2em height: 2px
border-radius: 2px width: 2em
.nav-toggle-label span::before, border-radius: 2px
.nav-toggle-label span::after .nav-toggle-label span::before,
content: '' .nav-toggle-label span::after
position: absolute content: ''
.nav-toggle-label span::before position: absolute
bottom: 30px .nav-toggle-label span::before
.nav-toggle-label span::after bottom: 30px
top: 30px .nav-toggle-label span::after
nav top: 30px
position: absolute .nav-locked
text-align: left top: 100%
top: 100% left: 0
width: 100% position: absolute
left: 0 nav
background: $navBG text-align: left
display: none width: 100%
transform: scale(1, 0) background: $navBG
transform-origin: top display: none
transition: 400ms transform: scale(1, 0)
transition: transform 400ms ease-in-out transform-origin: top
nav ul transition: 400ms
margin: 0 transition: transform 400ms ease-in-out
padding: 0 nav ul
list-style-type: none margin: 0
nav li padding: 0
margin-bottom: 1em list-style-type: none
margin-left: 1em nav li
nav a margin-bottom: 1em
text-decoration: none margin-left: 1em
font-size: 1.2rem nav a
text-transform: uppercase text-decoration: none
color: $navdefcolor font-size: 1.2rem
opacity: 0 text-transform: uppercase
nav a:hover color: $navdefcolor
color: $navhovcolor opacity: 0
.nav-toggle:checked ~ nav nav a:hover
display: block color: $navhovcolor
transform: scale(1,1) .nav-toggle:checked ~ nav
transition: 400ms display: block
.nav-toggle:checked ~ nav a transform: scale(1,1)
opacity: 1 transition: 400ms
transition: opacity 150ms ease-in-out .nav-toggle:checked ~ nav a
@media screen and (min-width: 800px) opacity: 1
.nav-toggle-label transition: opacity 150ms ease-in-out
display: none @media screen and (min-width: 800px)
header .nav-toggle-label
display: grid display: none
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr header
nav display: grid
all: unset grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
display: flex nav
align-items: center all: unset
nav a display: flex
opacity: 1 align-items: center
nav ul nav a
display: flex opacity: 1
nav li nav ul
margin-left: $navgap display: flex
margin-bottom: 0 nav li
list-style: none margin-left: $navgap
.nav-logo-left margin-bottom: 0
grid-column: 2 / span 1 list-style: none
.nav-left .nav-logo-left
all: unset grid-column: 2 / span 1
grid-column: 3 / 4 .nav-left
display: flex all: unset
justify-content: flex-end grid-column: 3 / 4
align-items: center display: flex
.nav-left ul justify-content: flex-end
display: flex align-items: center
justify-content: flex-end .nav-left ul
display: flex
justify-content: flex-end
.sidebar-wrapper
display: flex;
.sidebar-wrapper .sidebar-content
width: 100%
.sidebar-wrapper .sidebar-left
padding: 0
margin: 0
margin-left: 0
padding-right: 5px
height: 100%
.sidebar-wrapper .sidebar-left .sidebar-menu ul
width: fit-content
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title
width: max-content
font-size: 20pt
padding-right: 5px
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li
width: fit-content
color: #2980b9
text-decoration: none
font-size: 12pt

198
src/scss/selector.sass
View File

@ -1,100 +1,100 @@
$primBG: rgb(248, 248, 248) $primBG: rgb(248, 248, 248)
$columns: 12 $columns: 12
$primary: #3498db $primary: #3498db
$primary_dark: #2980b9 $primary_dark: #2980b9
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch .switch
position: relative position: relative
display: inline-block display: inline-block
width: 60px width: 60px
height: 34px height: 34px
/* Hide default HTML checkbox */ /* Hide default HTML checkbox */
.switch input .switch input
opacity: 0 opacity: 0
width: 0 width: 0
height: 0 height: 0
/* The slider */ /* The slider */
.slider .slider
position: absolute position: absolute
cursor: pointer cursor: pointer
top: 0 top: 0
left: 0 left: 0
right: 0 right: 0
bottom: 0 bottom: 0
background-color: #ccc background-color: #ccc
-webkit-transition: .4s -webkit-transition: .4s
transition: .4s transition: .4s
.slider:before .slider:before
position: absolute position: absolute
content: "" content: ""
height: 26px height: 26px
width: 26px width: 26px
left: 4px left: 4px
bottom: 4px bottom: 4px
background-color: white background-color: white
-webkit-transition: .4s -webkit-transition: .4s
transition: .4s transition: .4s
input:checked + .slider input:checked + .slider
background-color: $primary background-color: $primary
input:focus + .slider input:focus + .slider
box-shadow: 0 0 1px $primary box-shadow: 0 0 1px $primary
input:checked + .slider:before input:checked + .slider:before
-webkit-transform: translateX(26px) -webkit-transform: translateX(26px)
-ms-transform: translateX(26px) -ms-transform: translateX(26px)
transform: translateX(26px) transform: translateX(26px)
/* Rounded sliders */ /* Rounded sliders */
.slider.round .slider.round
border-radius: 34px border-radius: 34px
.slider.round:before .slider.round:before
border-radius: 50% border-radius: 50%
/* Range slider */ /* Range slider */
.range-slider .range-slider
-webkit-appearance: none -webkit-appearance: none
border-radius: 5px border-radius: 5px
width: 100% width: 100%
height: 25px height: 25px
background: #d8d8d8 background: #d8d8d8
outline: none outline: none
opacity: 0.7 opacity: 0.7
-webkit-transition: .2s -webkit-transition: .2s
transition: opacity .2s transition: opacity .2s
.range-slider:hover .range-slider:hover
opacity: 1 opacity: 1
.range-slider::-webkit-slider-thumb .range-slider::-webkit-slider-thumb
-webkit-appearance: none -webkit-appearance: none
appearance: none appearance: none
width: 25px width: 25px
height: 25px height: 25px
background: #5b6568 background: #5b6568
cursor: pointer cursor: pointer
.range-slider::-moz-range-thumb .range-slider::-moz-range-thumb
width: 25px width: 25px
height: 25px height: 25px
background: #5b6568 background: #5b6568
cursor: pointer cursor: pointer
.range-slider-rounded .range-slider-rounded
-webkit-appearance: none -webkit-appearance: none
border-radius: 5px border-radius: 5px
width: 100% width: 100%
height: 15px height: 15px
background: #d8d8d8 background: #d8d8d8
outline: none outline: none
opacity: 0.7 opacity: 0.7
-webkit-transition: .2s -webkit-transition: .2s
transition: opacity .2s transition: opacity .2s
.range-slider-rounded:hover .range-slider-rounded:hover
opacity: 1 opacity: 1
.range-slider-rounded::-webkit-slider-thumb .range-slider-rounded::-webkit-slider-thumb
-webkit-appearance: none -webkit-appearance: none
appearance: none appearance: none
border-radius: 50% border-radius: 50%
width: 25px width: 25px
height: 25px height: 25px
background: #5b6568 background: #5b6568
cursor: pointer cursor: pointer
.range-slider-rounded::-moz-range-thumb .range-slider-rounded::-moz-range-thumb
width: 25px width: 25px
height: 25px height: 25px
background: #ecf0f1 background: #ecf0f1
cursor: pointer cursor: pointer