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

45
src/index.html
View File

@ -8,10 +8,11 @@
<link rel="stylesheet" href="scss/navbar.sass">
<link rel="stylesheet" href="scss/messaging.sass">
<link rel="stylesheet" href="scss/selector.sass">
<link rel="stylesheet" href="scss/button.sass">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
</head>
<body>
<header>
<header class="locked-top">
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
@ -29,6 +30,11 @@
</header>
<main>
<div class="container">
<button class="btn ">button</button>
<button class="btn btn-primary">button</button>
<button class="btn btn-danger">button</button>
<button class="btn btn-warning">button</button>
<button class="btn btn-success">button</button>
<h1>Toggle Slide</h1>
<br>
<!-- Rectangular switch -->
@ -69,9 +75,46 @@
<h1>test</h1>
code here, escape it yourself.
<h2>test</h2>
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
</code>
</pre>
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<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>
</ul>
</nav>
</header>
<pre>
<code class="language-html">
<header>
<h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
<nav>
<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>
</ul>
</nav>
</header>
</code>
</pre>
<h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div><br>
<div class="alert-danger"> test </div><br>

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

8
src/scss/main.sass
View File

@ -28,7 +28,6 @@ main
word-break: break-word
pre
/*background-color: #d8d8d8*/
border: 1px solid #d8d8d8
border-radius: 5px
@for $i from 1 through 12
h#{$i}
@ -43,8 +42,10 @@ pre
width: calc( 100% - 10em )
max-width: 90em
margin: 0 auto
/* Alert Embeds */
.link
color: #2980b9
text-decoration: none
font-size: 12pt
div[class^="col-"]
padding: 1rem 0
.row
@ -55,4 +56,3 @@ div[class^="col-"]
flex: 0 0 100% / $columns * $i
.col-offset-#{$i}
margin-left: 100% / $columns * $i

35
src/scss/navbar.sass
View File

@ -6,13 +6,14 @@ $navhovcolor: #a5a5a5
header
background: $navBG
text-align: center
position: fixed
height: 30px
z-index: 999
width: 100%
height: auto
top: 0
padding: 10px
.locked-top
top: 0
position: fixed
.nav-toggle
display: none
.nav-toggle-label
@ -39,12 +40,13 @@ header
bottom: 30px
.nav-toggle-label span::after
top: 30px
nav
position: absolute
text-align: left
.nav-locked
top: 100%
width: 100%
left: 0
position: absolute
nav
text-align: left
width: 100%
background: $navBG
display: none
transform: scale(1, 0)
@ -102,3 +104,24 @@ nav li
.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