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

changed project structure

Browse Source 
moves files from scss to sass directory
moved all variables to different file to simplify theming accross the
whole library
This commit is contained in:
Steev
2022-03-15 13:39:39 +01:00
parent 095c701c56
commit efd8da0bc8
23 changed files with 1153 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/index.html
View File

@ -4,10 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sass test</title>
<link rel="stylesheet" href="scss/main.sass">
<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="sass/variables.sass">
<link rel="stylesheet" href="sass/main.sass">
<link rel="stylesheet" href="sass/navbar.sass">
<link rel="stylesheet" href="sass/messaging.sass">
<link rel="stylesheet" href="sass/selector.sass">
<link rel="stylesheet" href="sass/button.sass">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
</head>
<body>
@ -29,6 +31,12 @@
</header>
<main>
<div class="container">
<h1>Button Test</h1>
<button class="btn">test</button>
<button class="btn btn-primary">test</button>
<button class="btn btn-warning">test</button>
<button class="btn btn-danger">test</button>
<button class="btn btn-success">test</button>
<h1>Toggle Slide</h1>
<br>
<!-- Rectangular switch -->

15
src/scss/button.sass → src/sass/button.sass
View File

@ -1,15 +1,4 @@
$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
@import variables
/* Button Style Classes */
.btn
@ -36,7 +25,7 @@ $padding: 5px
/* Hover classes */
.btn:hover
background-color: #d8d8d8d8
background-color: rgba(216, 216, 216, 0.847)
.btn-primary:hover
background-color: $primary_dark
.btn-danger:hover

5
src/sass/forms.sass Normal file
View File

@ -0,0 +1,5 @@
@import variables
/* flat forms*/
.forms
background-color: $darkbg
border:

11
src/scss/main.sass → src/sass/main.sass
View File

@ -1,13 +1,4 @@
$primBG: rgb(248, 248, 248)
$columns: 12
$primary: #3498db
$primary_dark: #2980b9
$danger: #e74c3c
$danger_dark: #c0392b
$warning: #f1c40f
$warning_dark: #f39c12
$success: #2ecc71
$success_dark: #27ae60
@import variables
*
box-sizing: border-box

177
src/scss/messaging.sass → src/sass/messaging.sass
View File

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

9
src/scss/navbar.sass → src/sass/navbar.sass
View File

@ -1,10 +1,7 @@
@import variables
$navBG: #f1f1f1
$navgap: 1em
$navdefcolor: #2e2e2e
$navhovcolor: #a5a5a5
header
background: $navBG
background: $primBG
text-align: center
height: 30px
z-index: 999
@ -47,7 +44,7 @@ header
nav
text-align: left
width: 100%
background: $navBG
background: $primBG
display: none
transform: scale(1, 0)
transform-origin: top

195
src/scss/selector.sass → src/sass/selector.sass
View File

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

18
src/sass/variables.sass Normal file
View File

@ -0,0 +1,18 @@
$border_width: 2px
$border_radius: 5px
$padding: 5px
$columns: 12
$navgap: 1em
/* Colours */
$navhovcolor: #a5a5a5
$navdefcolor: #2e2e2e
$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

0
src/scss/forms.sass
View File