Merge branch 'main' of github.com:steevLP/steevcss
This commit is contained in:
commit
095c701c56
@ -1,25 +1,25 @@
|
|||||||
var code = document.querySelectorAll("code");
|
var code = document.querySelectorAll("code");
|
||||||
|
|
||||||
// code embed
|
// code embed
|
||||||
code.forEach(c => {
|
code.forEach(c => {
|
||||||
let code = c.innerHTML.toString();
|
let code = c.innerHTML.toString();
|
||||||
var output = "";
|
var output = "";
|
||||||
for(let i = 0; i < code.length; i++){
|
for(let i = 0; i < code.length; i++){
|
||||||
switch(code.charAt(i)){
|
switch(code.charAt(i)){
|
||||||
default: output += code.charAt(i); break;
|
default: output += code.charAt(i); break;
|
||||||
case ">": output += ">"; break;
|
case ">": output += ">"; break;
|
||||||
case "<": output += "<"; break;
|
case "<": output += "<"; break;
|
||||||
case "&": output += "&"; break;
|
case "&": output += "&"; break;
|
||||||
case "\"": output += """; break;
|
case "\"": output += """; break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
c.innerHTML = output;
|
c.innerHTML = output;
|
||||||
});
|
});
|
||||||
|
|
||||||
// TODO JavaScript Input value return
|
// TODO JavaScript Input value return
|
||||||
// Current way..
|
// Current way..
|
||||||
// -------------------------------------
|
// -------------------------------------
|
||||||
// get input by getting the input object
|
// get input by getting the input object
|
||||||
// catch oninput event inside a function
|
// catch oninput event inside a function
|
||||||
// Handle it inside the function
|
// Handle it inside the function
|
||||||
// -------------------------------------
|
// -------------------------------------
|
||||||
47
src/scss/button.sass
Normal file
47
src/scss/button.sass
Normal 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
0
src/scss/forms.sass
Normal file
@ -1,93 +1,93 @@
|
|||||||
$primary: #3498db
|
$primary: #3498db
|
||||||
$primary_dark: #2980b9
|
$primary_dark: #2980b9
|
||||||
$danger: #e74c3c
|
$danger: #e74c3c
|
||||||
$danger_dark: #c0392b
|
$danger_dark: #c0392b
|
||||||
$warning: #f1c40f
|
$warning: #f1c40f
|
||||||
$warning_dark: #f39c12
|
$warning_dark: #f39c12
|
||||||
$success: #2ecc71
|
$success: #2ecc71
|
||||||
$success_dark: #27ae60
|
$success_dark: #27ae60
|
||||||
|
|
||||||
.embed
|
.embed
|
||||||
background-color: #d8d8d8
|
background-color: #d8d8d8
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
padding: 5px
|
padding: 5px
|
||||||
.alert-primary
|
.alert-primary
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
border: 1px solid $primary_dark
|
border: 1px solid $primary_dark
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
color: white
|
color: white
|
||||||
.alert-danger
|
.alert-danger
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
background-color: $danger
|
background-color: $danger
|
||||||
border: 1px solid $danger_dark
|
border: 1px solid $danger_dark
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
color: white
|
color: white
|
||||||
.alert-warning
|
.alert-warning
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
background-color: $warning
|
background-color: $warning
|
||||||
border: 1px solid $warning_dark
|
border: 1px solid $warning_dark
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
color: white
|
color: white
|
||||||
.alert-success
|
.alert-success
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
background-color: $success
|
background-color: $success
|
||||||
border: 1px solid $success_dark
|
border: 1px solid $success_dark
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
color: white
|
color: white
|
||||||
.notification-primary
|
.notification-primary
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex
|
display: flex
|
||||||
padding: 5px
|
padding: 5px
|
||||||
border: 2px solid $primary
|
border: 2px solid $primary
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
.notification-primary h2
|
.notification-primary h2
|
||||||
border-right: 0.3rem solid $primary
|
border-right: 0.3rem solid $primary
|
||||||
padding: 5px
|
padding: 5px
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
min-width: 70px
|
min-width: 70px
|
||||||
height: auto
|
height: auto
|
||||||
display: flex
|
display: flex
|
||||||
.notification-danger
|
.notification-danger
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex
|
display: flex
|
||||||
padding: 5px
|
padding: 5px
|
||||||
border: 2px solid $danger
|
border: 2px solid $danger
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
.notification-danger h2
|
.notification-danger h2
|
||||||
border-right: 0.3rem solid $danger
|
border-right: 0.3rem solid $danger
|
||||||
padding: 5px
|
padding: 5px
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
min-width: 70px
|
min-width: 70px
|
||||||
height: auto
|
height: auto
|
||||||
display: flex
|
display: flex
|
||||||
.notification-warning
|
.notification-warning
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex
|
display: flex
|
||||||
padding: 5px
|
padding: 5px
|
||||||
border: 2px solid $warning
|
border: 2px solid $warning
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
.notification-warning h2
|
.notification-warning h2
|
||||||
border-right: 0.3rem solid $warning
|
border-right: 0.3rem solid $warning
|
||||||
padding: 5px
|
padding: 5px
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
min-width: 70px
|
min-width: 70px
|
||||||
height: auto
|
height: auto
|
||||||
display: flex
|
display: flex
|
||||||
.notification-success
|
.notification-success
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex
|
display: flex
|
||||||
padding: 5px
|
padding: 5px
|
||||||
border: 2px solid $success
|
border: 2px solid $success
|
||||||
border-radius: 2px
|
border-radius: 2px
|
||||||
.notification-success h2
|
.notification-success h2
|
||||||
border-right: 0.3rem solid $success
|
border-right: 0.3rem solid $success
|
||||||
padding: 5px
|
padding: 5px
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
min-width: 70px
|
min-width: 70px
|
||||||
height: auto
|
height: auto
|
||||||
display: flex
|
display: flex
|
||||||
.notification-body
|
.notification-body
|
||||||
line-height: 30pt
|
line-height: 30pt
|
||||||
font-size: 15pt
|
font-size: 15pt
|
||||||
word-wrap: break-word
|
word-wrap: break-word
|
||||||
@ -1,100 +1,100 @@
|
|||||||
$primBG: rgb(248, 248, 248)
|
$primBG: rgb(248, 248, 248)
|
||||||
$columns: 12
|
$columns: 12
|
||||||
$primary: #3498db
|
$primary: #3498db
|
||||||
$primary_dark: #2980b9
|
$primary_dark: #2980b9
|
||||||
|
|
||||||
/* The switch - the box around the slider */
|
/* The switch - the box around the slider */
|
||||||
.switch
|
.switch
|
||||||
position: relative
|
position: relative
|
||||||
display: inline-block
|
display: inline-block
|
||||||
width: 60px
|
width: 60px
|
||||||
height: 34px
|
height: 34px
|
||||||
/* Hide default HTML checkbox */
|
/* Hide default HTML checkbox */
|
||||||
.switch input
|
.switch input
|
||||||
opacity: 0
|
opacity: 0
|
||||||
width: 0
|
width: 0
|
||||||
height: 0
|
height: 0
|
||||||
/* The slider */
|
/* The slider */
|
||||||
.slider
|
.slider
|
||||||
position: absolute
|
position: absolute
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
top: 0
|
top: 0
|
||||||
left: 0
|
left: 0
|
||||||
right: 0
|
right: 0
|
||||||
bottom: 0
|
bottom: 0
|
||||||
background-color: #ccc
|
background-color: #ccc
|
||||||
-webkit-transition: .4s
|
-webkit-transition: .4s
|
||||||
transition: .4s
|
transition: .4s
|
||||||
.slider:before
|
.slider:before
|
||||||
position: absolute
|
position: absolute
|
||||||
content: ""
|
content: ""
|
||||||
height: 26px
|
height: 26px
|
||||||
width: 26px
|
width: 26px
|
||||||
left: 4px
|
left: 4px
|
||||||
bottom: 4px
|
bottom: 4px
|
||||||
background-color: white
|
background-color: white
|
||||||
-webkit-transition: .4s
|
-webkit-transition: .4s
|
||||||
transition: .4s
|
transition: .4s
|
||||||
input:checked + .slider
|
input:checked + .slider
|
||||||
background-color: $primary
|
background-color: $primary
|
||||||
input:focus + .slider
|
input:focus + .slider
|
||||||
box-shadow: 0 0 1px $primary
|
box-shadow: 0 0 1px $primary
|
||||||
input:checked + .slider:before
|
input:checked + .slider:before
|
||||||
-webkit-transform: translateX(26px)
|
-webkit-transform: translateX(26px)
|
||||||
-ms-transform: translateX(26px)
|
-ms-transform: translateX(26px)
|
||||||
transform: translateX(26px)
|
transform: translateX(26px)
|
||||||
/* Rounded sliders */
|
/* Rounded sliders */
|
||||||
.slider.round
|
.slider.round
|
||||||
border-radius: 34px
|
border-radius: 34px
|
||||||
.slider.round:before
|
.slider.round:before
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
/* Range slider */
|
/* Range slider */
|
||||||
.range-slider
|
.range-slider
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
border-radius: 5px
|
border-radius: 5px
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 25px
|
height: 25px
|
||||||
background: #d8d8d8
|
background: #d8d8d8
|
||||||
outline: none
|
outline: none
|
||||||
opacity: 0.7
|
opacity: 0.7
|
||||||
-webkit-transition: .2s
|
-webkit-transition: .2s
|
||||||
transition: opacity .2s
|
transition: opacity .2s
|
||||||
.range-slider:hover
|
.range-slider:hover
|
||||||
opacity: 1
|
opacity: 1
|
||||||
.range-slider::-webkit-slider-thumb
|
.range-slider::-webkit-slider-thumb
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
appearance: none
|
appearance: none
|
||||||
width: 25px
|
width: 25px
|
||||||
height: 25px
|
height: 25px
|
||||||
background: #5b6568
|
background: #5b6568
|
||||||
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: #5b6568
|
||||||
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: #d8d8d8
|
||||||
outline: none
|
outline: none
|
||||||
opacity: 0.7
|
opacity: 0.7
|
||||||
-webkit-transition: .2s
|
-webkit-transition: .2s
|
||||||
transition: opacity .2s
|
transition: opacity .2s
|
||||||
.range-slider-rounded:hover
|
.range-slider-rounded:hover
|
||||||
opacity: 1
|
opacity: 1
|
||||||
.range-slider-rounded::-webkit-slider-thumb
|
.range-slider-rounded::-webkit-slider-thumb
|
||||||
-webkit-appearance: none
|
-webkit-appearance: none
|
||||||
appearance: none
|
appearance: none
|
||||||
border-radius: 50%
|
border-radius: 50%
|
||||||
width: 25px
|
width: 25px
|
||||||
height: 25px
|
height: 25px
|
||||||
background: #5b6568
|
background: #5b6568
|
||||||
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: #ecf0f1
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
Loading…
x
Reference in New Issue
Block a user