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

51
src/index.html
View File

@ -8,10 +8,11 @@
<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="scss/button.sass">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
</head> </head>
<body> <body>
<header> <header class="locked-top">
<h1 class="nav-logo">Logo</h1> <h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle"> <input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"> <label for="nav-toggle" class="nav-toggle-label">
@ -29,6 +30,11 @@
</header> </header>
<main> <main>
<div class="container"> <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> <h1>Toggle Slide</h1>
<br> <br>
<!-- Rectangular switch --> <!-- Rectangular switch -->
@ -66,12 +72,49 @@
<h1>Code Embed</h1> <h1>Code Embed</h1>
<pre> <pre>
<code class="language-html"> <code class="language-html">
<h1>test</h1> <h1>test</h1>
code here, escape it yourself. code here, escape it yourself.
<h2>test</h2> <h2>test</h2>
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
</code> </code>
</pre> </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> <h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div><br> <div class="alert-primary"> test </div><br>
<div class="alert-danger"> 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 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}
@ -43,8 +42,10 @@ pre
width: calc( 100% - 10em ) width: calc( 100% - 10em )
max-width: 90em max-width: 90em
margin: 0 auto margin: 0 auto
/* Alert Embeds */ .link
color: #2980b9
text-decoration: none
font-size: 12pt
div[class^="col-"] div[class^="col-"]
padding: 1rem 0 padding: 1rem 0
.row .row
@ -55,4 +56,3 @@ div[class^="col-"]
flex: 0 0 100% / $columns * $i flex: 0 0 100% / $columns * $i
.col-offset-#{$i} .col-offset-#{$i}
margin-left: 100% / $columns * $i margin-left: 100% / $columns * $i

35
src/scss/navbar.sass
View File

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