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

added bundled sass file

Browse Source
This commit is contained in:
Steev 2022-03-20 13:02:13 +01:00
commit 3b9b883216
11 changed files with 126 additions and 9483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9525
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -13,5 +13,8 @@
"node-sass": "^5.0.0", "node-sass": "^5.0.0",
"parcel-bundler": "^1.3.1", "parcel-bundler": "^1.3.1",
"sass": "^1.32.5" "sass": "^1.32.5"
},
"dependencies": {
"core-js": "^3.21.1"
} }
} }

4
src/index.html
View File

@ -7,9 +7,11 @@
<link rel="stylesheet" href="sass/variables.sass"> <link rel="stylesheet" href="sass/variables.sass">
<link rel="stylesheet" href="sass/main.sass"> <link rel="stylesheet" href="sass/main.sass">
<link rel="stylesheet" href="sass/navbar.sass"> <link rel="stylesheet" href="sass/navbar.sass">
<link rel="stylesheet" href="sass/button.sass">
<link rel="stylesheet" href="sass/messaging.sass"> <link rel="stylesheet" href="sass/messaging.sass">
<link rel="stylesheet" href="sass/selector.sass"> <link rel="stylesheet" href="sass/selector.sass">
<link rel="stylesheet" href="sass/button.sass"> <link rel="stylesheet" href="sass/forms.sass">
<link rel="stylesheet" href="sass/bundled.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>

13
src/sass/bundled.sass Normal file
View File

@ -0,0 +1,13 @@
@import variables
@import main
@import navbar
@import button
@import messaging
@import selector
@import forms

2
src/sass/button.sass
View File

@ -28,7 +28,7 @@
/* Hover classes */ /* Hover classes */
.btn:hover .btn:hover
background-color: rgba(216, 216, 216, 0.847) background-color: $neutral_dark
.btn-primary:hover .btn-primary:hover
background-color: $primary_dark background-color: $primary_dark
.btn-danger:hover .btn-danger:hover

5
src/sass/forms.sass
View File

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

6
src/sass/main.sass
View File

@ -4,13 +4,13 @@
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: $neutral
border: 2px solid #c0c0c0 border: 2px solid $neutral
border-radius: 5px border-radius: 5px
body body
margin: 0 margin: 0
padding: 0 padding: 0
background: $primBG background: $neutral
main main
z-index: 980 z-index: 980
position: relative position: relative

2
src/sass/messaging.sass
View File

@ -1,7 +1,7 @@
@import variables @import variables
.embed .embed
background-color: #d8d8d8 background-color: $neutral_gray_light
border-radius: 5px border-radius: 5px
padding: 5px padding: 5px
.alert-primary .alert-primary

23
src/sass/navbar.sass
View File

@ -1,7 +1,7 @@
@import variables @import variables
header header
background: $primBG background: $neutral_gray_light
text-align: center text-align: center
height: 30px height: 30px
z-index: 999 z-index: 999
@ -44,7 +44,7 @@ header
nav nav
text-align: left text-align: left
width: 100% width: 100%
background: $primBG background: $neutral_gray_light
display: none display: none
transform: scale(1, 0) transform: scale(1, 0)
transform-origin: top transform-origin: top
@ -61,10 +61,10 @@ nav a
text-decoration: none text-decoration: none
font-size: 1.2rem font-size: 1.2rem
text-transform: uppercase text-transform: uppercase
color: $navdefcolor color: $neutral
opacity: 0 opacity: 0
nav a:hover nav a:hover
color: $navhovcolor color: $neutral_dark
.nav-toggle:checked ~ nav .nav-toggle:checked ~ nav
display: block display: block
transform: scale(1,1) transform: scale(1,1)
@ -101,24 +101,27 @@ nav li
.nav-left ul .nav-left ul
display: flex display: flex
justify-content: flex-end justify-content: flex-end
/* =========================== */
/* Sidebar code */
/* =========================== */
.sidebar-wrapper .sidebar-wrapper
display: flex; display: flex;
.sidebar-wrapper .sidebar-content .sidebar-content
width: 100% width: 100%
.sidebar-wrapper .sidebar-left .sidebar-left
padding: 0 padding: 0
margin: 0 margin: 0
margin-left: 0 margin-left: 0
padding-right: 5px padding-right: 5px
height: 100% height: 100%
.sidebar-wrapper .sidebar-left .sidebar-menu ul .sidebar-menu ul
width: fit-content width: fit-content
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-title .sidebar-title
width: max-content width: max-content
font-size: 20pt font-size: 20pt
padding-right: 5px padding-right: 5px
.sidebar-wrapper .sidebar-left .sidebar-menu .sidebar-item li .sidebar-item li
width: fit-content width: fit-content
color: #2980b9 color: $primary
text-decoration: none text-decoration: none
font-size: 12pt font-size: 12pt

15
src/sass/selector.sass
View File

@ -11,6 +11,7 @@
opacity: 0 opacity: 0
width: 0 width: 0
height: 0 height: 0
/* The slider */ /* The slider */
.slider .slider
position: absolute position: absolute
@ -19,7 +20,7 @@
left: 0 left: 0
right: 0 right: 0
bottom: 0 bottom: 0
background-color: #ccc background-color: $neutral_gray_light
-webkit-transition: .4s -webkit-transition: .4s
transition: .4s transition: .4s
.slider:before .slider:before
@ -51,7 +52,7 @@ input:checked + .slider:before
border-radius: 5px border-radius: 5px
width: 100% width: 100%
height: 25px height: 25px
background: #d8d8d8 background: $neutral_gray_light
outline: none outline: none
opacity: 0.7 opacity: 0.7
-webkit-transition: .2s -webkit-transition: .2s
@ -63,19 +64,19 @@ input:checked + .slider:before
appearance: none appearance: none
width: 25px width: 25px
height: 25px height: 25px
background: #5b6568 background: $neutral_gray_dark
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: $neutral_gray_dark
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: $neutral_gray_light
outline: none outline: none
opacity: 0.7 opacity: 0.7
-webkit-transition: .2s -webkit-transition: .2s
@ -88,10 +89,10 @@ input:checked + .slider:before
border-radius: 50% border-radius: 50%
width: 25px width: 25px
height: 25px height: 25px
background: #5b6568 background: $neutral_gray_dark
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: $neutral_gray_light
cursor: pointer cursor: pointer

11
src/sass/variables.sass
View File

@ -1,14 +1,15 @@
$border_width: 1px /* Sizing Properties */
$border_width: 2px
$border_radius: 5px $border_radius: 5px
$padding: 5px $padding: 5px
$columns: 12 $columns: 12
$navgap: 1em $navgap: 1em
/* Colours */ /* Colours */
$navhovcolor: #a5a5a5 $neutral: #a5a5a5
$navdefcolor: #2e2e2e $neutral_dark: #2e2e2e
$default: rgb(248, 248, 248) $neutral_gray_light: rgb(248, 248, 248)
$default_dark: #d1d1d1 $neutral_gray_dark: rgb(70, 70, 70)
$primary: #3498db $primary: #3498db
$primary_dark: #2980b9 $primary_dark: #2980b9
$danger: #e74c3c $danger: #e74c3c