changed project structure
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:
36
src/sass/button.sass
Normal file
36
src/sass/button.sass
Normal file
@ -0,0 +1,36 @@
|
||||
@import variables
|
||||
|
||||
/* 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: rgba(216, 216, 216, 0.847)
|
||||
.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
|
||||
5
src/sass/forms.sass
Normal file
5
src/sass/forms.sass
Normal file
@ -0,0 +1,5 @@
|
||||
@import variables
|
||||
/* flat forms*/
|
||||
.forms
|
||||
background-color: $darkbg
|
||||
border:
|
||||
49
src/sass/main.sass
Normal file
49
src/sass/main.sass
Normal file
@ -0,0 +1,49 @@
|
||||
@import variables
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif
|
||||
hr
|
||||
background-color: #c0c0c0
|
||||
border: 2px solid #c0c0c0
|
||||
border-radius: 5px
|
||||
body
|
||||
margin: 0
|
||||
padding: 0
|
||||
background: $primBG
|
||||
main
|
||||
z-index: 980
|
||||
position: relative
|
||||
top: 5.5em
|
||||
width: 100%
|
||||
word-break: break-word
|
||||
pre
|
||||
/*background-color: #d8d8d8*/
|
||||
border-radius: 5px
|
||||
@for $i from 1 through 12
|
||||
h#{$i}
|
||||
margin: 0
|
||||
.dev
|
||||
border: 1px solid black
|
||||
.display
|
||||
background-color: lightcoral
|
||||
border: 1px solid red
|
||||
text-align: center
|
||||
.container
|
||||
width: calc( 100% - 10em )
|
||||
max-width: 90em
|
||||
margin: 0 auto
|
||||
.link
|
||||
color: #2980b9
|
||||
text-decoration: none
|
||||
font-size: 12pt
|
||||
div[class^="col-"]
|
||||
padding: 1rem 0
|
||||
.row
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
@for $i from 1 through $columns
|
||||
.col-#{$i}
|
||||
flex: 0 0 100% / $columns * $i
|
||||
.col-offset-#{$i}
|
||||
margin-left: 100% / $columns * $i
|
||||
86
src/sass/messaging.sass
Normal file
86
src/sass/messaging.sass
Normal file
@ -0,0 +1,86 @@
|
||||
@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
|
||||
124
src/sass/navbar.sass
Normal file
124
src/sass/navbar.sass
Normal file
@ -0,0 +1,124 @@
|
||||
@import variables
|
||||
|
||||
header
|
||||
background: $primBG
|
||||
text-align: center
|
||||
height: 30px
|
||||
z-index: 999
|
||||
width: 100%
|
||||
height: auto
|
||||
padding: 10px
|
||||
.locked-top
|
||||
top: 0
|
||||
position: fixed
|
||||
.nav-toggle
|
||||
display: none
|
||||
.nav-toggle-label
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
margin-left: 1em
|
||||
height: 100%
|
||||
display: flex
|
||||
align-items: center
|
||||
.nav-toggle-label span,
|
||||
.nav-toggle-label span::before,
|
||||
.nav-toggle-label span::after
|
||||
display: block
|
||||
background: white
|
||||
height: 2px
|
||||
width: 2em
|
||||
border-radius: 2px
|
||||
.nav-toggle-label span::before,
|
||||
.nav-toggle-label span::after
|
||||
content: ''
|
||||
position: absolute
|
||||
.nav-toggle-label span::before
|
||||
bottom: 30px
|
||||
.nav-toggle-label span::after
|
||||
top: 30px
|
||||
.nav-locked
|
||||
top: 100%
|
||||
left: 0
|
||||
position: absolute
|
||||
nav
|
||||
text-align: left
|
||||
width: 100%
|
||||
background: $primBG
|
||||
display: none
|
||||
transform: scale(1, 0)
|
||||
transform-origin: top
|
||||
transition: 400ms
|
||||
transition: transform 400ms ease-in-out
|
||||
nav ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
nav li
|
||||
margin-bottom: 1em
|
||||
margin-left: 1em
|
||||
nav a
|
||||
text-decoration: none
|
||||
font-size: 1.2rem
|
||||
text-transform: uppercase
|
||||
color: $navdefcolor
|
||||
opacity: 0
|
||||
nav a:hover
|
||||
color: $navhovcolor
|
||||
.nav-toggle:checked ~ nav
|
||||
display: block
|
||||
transform: scale(1,1)
|
||||
transition: 400ms
|
||||
.nav-toggle:checked ~ nav a
|
||||
opacity: 1
|
||||
transition: opacity 150ms ease-in-out
|
||||
@media screen and (min-width: 800px)
|
||||
.nav-toggle-label
|
||||
display: none
|
||||
header
|
||||
display: grid
|
||||
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
|
||||
nav
|
||||
all: unset
|
||||
display: flex
|
||||
align-items: center
|
||||
nav a
|
||||
opacity: 1
|
||||
nav ul
|
||||
display: flex
|
||||
nav li
|
||||
margin-left: $navgap
|
||||
margin-bottom: 0
|
||||
list-style: none
|
||||
.nav-logo-left
|
||||
grid-column: 2 / span 1
|
||||
.nav-left
|
||||
all: unset
|
||||
grid-column: 3 / 4
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
align-items: center
|
||||
.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
|
||||
97
src/sass/selector.sass
Normal file
97
src/sass/selector.sass
Normal file
@ -0,0 +1,97 @@
|
||||
@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
18
src/sass/variables.sass
Normal 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
|
||||
Reference in New Issue
Block a user