reorganized sass project files
outsourced sass code from main.sass in order to make maintanance more easy to be performed
This commit is contained in:
@ -5,6 +5,10 @@
|
||||
<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="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
@ -61,10 +65,11 @@
|
||||
<br>
|
||||
<h1>Code Embed</h1>
|
||||
<pre>
|
||||
<code>
|
||||
<code class="language-html">
|
||||
<h1>test</h1>
|
||||
code here, escape it yourself.
|
||||
<h2>test</h2>
|
||||
|
||||
</code>
|
||||
</pre>
|
||||
<h1 style="text-align: center;">Alert Elements</h1>
|
||||
@ -115,5 +120,7 @@
|
||||
<br><br><br>
|
||||
<br><br><br>
|
||||
<script src="js/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,9 +1,5 @@
|
||||
$primBG: rgb(248, 248, 248)
|
||||
$columns: 12
|
||||
$navBG: #f1f1f1
|
||||
$navgap: 1em
|
||||
$navdefcolor: #2e2e2e
|
||||
$navhovcolor: #a5a5a5
|
||||
$primary: #3498db
|
||||
$primary_dark: #2980b9
|
||||
$danger: #e74c3c
|
||||
@ -31,110 +27,12 @@ main
|
||||
width: 100%
|
||||
word-break: break-word
|
||||
pre
|
||||
background-color: #d8d8d8
|
||||
/*background-color: #d8d8d8*/
|
||||
border: 1px solid #d8d8d8
|
||||
border-radius: 5px
|
||||
@for $i from 1 through 12
|
||||
h#{$i}
|
||||
margin: 0
|
||||
/* 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
|
||||
.embed
|
||||
background-color: #d8d8d8
|
||||
border-radius: 5px
|
||||
padding: 5px
|
||||
.dev
|
||||
border: 1px solid black
|
||||
.display
|
||||
@ -146,86 +44,7 @@ input:checked + .slider:before
|
||||
max-width: 90em
|
||||
margin: 0 auto
|
||||
/* Alert Embeds */
|
||||
.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
|
||||
|
||||
div[class^="col-"]
|
||||
padding: 1rem 0
|
||||
.row
|
||||
@ -236,102 +55,4 @@ div[class^="col-"]
|
||||
flex: 0 0 100% / $columns * $i
|
||||
.col-offset-#{$i}
|
||||
margin-left: 100% / $columns * $i
|
||||
header
|
||||
background: $navBG
|
||||
text-align: center
|
||||
position: fixed
|
||||
height: 30px
|
||||
z-index: 999
|
||||
width: 100%
|
||||
height: auto
|
||||
top: 0
|
||||
padding: 10px
|
||||
.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
|
||||
position: absolute
|
||||
text-align: left
|
||||
top: 100%
|
||||
width: 100%
|
||||
left: 0
|
||||
background: $navBG
|
||||
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
|
||||
|
||||
|
||||
93
src/scss/messaging.sass
Normal file
93
src/scss/messaging.sass
Normal file
@ -0,0 +1,93 @@
|
||||
$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
|
||||
word-wrap: break-word
|
||||
104
src/scss/navbar.sass
Normal file
104
src/scss/navbar.sass
Normal file
@ -0,0 +1,104 @@
|
||||
|
||||
$navBG: #f1f1f1
|
||||
$navgap: 1em
|
||||
$navdefcolor: #2e2e2e
|
||||
$navhovcolor: #a5a5a5
|
||||
header
|
||||
background: $navBG
|
||||
text-align: center
|
||||
position: fixed
|
||||
height: 30px
|
||||
z-index: 999
|
||||
width: 100%
|
||||
height: auto
|
||||
top: 0
|
||||
padding: 10px
|
||||
.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
|
||||
position: absolute
|
||||
text-align: left
|
||||
top: 100%
|
||||
width: 100%
|
||||
left: 0
|
||||
background: $navBG
|
||||
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
|
||||
100
src/scss/selector.sass
Normal file
100
src/scss/selector.sass
Normal file
@ -0,0 +1,100 @@
|
||||
$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
|
||||
cursor: pointer
|
||||
Reference in New Issue
Block a user