Merge branch 'main' of github.com:steevLP/steevcss
This commit is contained in:
commit
095c701c56
@ -1,25 +1,25 @@
|
||||
var code = document.querySelectorAll("code");
|
||||
|
||||
// code embed
|
||||
code.forEach(c => {
|
||||
let code = c.innerHTML.toString();
|
||||
var output = "";
|
||||
for(let i = 0; i < code.length; i++){
|
||||
switch(code.charAt(i)){
|
||||
default: output += code.charAt(i); break;
|
||||
case ">": output += ">"; break;
|
||||
case "<": output += "<"; break;
|
||||
case "&": output += "&"; break;
|
||||
case "\"": output += """; break;
|
||||
}
|
||||
}
|
||||
c.innerHTML = output;
|
||||
});
|
||||
|
||||
// TODO JavaScript Input value return
|
||||
// Current way..
|
||||
// -------------------------------------
|
||||
// get input by getting the input object
|
||||
// catch oninput event inside a function
|
||||
// Handle it inside the function
|
||||
var code = document.querySelectorAll("code");
|
||||
|
||||
// code embed
|
||||
code.forEach(c => {
|
||||
let code = c.innerHTML.toString();
|
||||
var output = "";
|
||||
for(let i = 0; i < code.length; i++){
|
||||
switch(code.charAt(i)){
|
||||
default: output += code.charAt(i); break;
|
||||
case ">": output += ">"; break;
|
||||
case "<": output += "<"; break;
|
||||
case "&": output += "&"; break;
|
||||
case "\"": output += """; break;
|
||||
}
|
||||
}
|
||||
c.innerHTML = output;
|
||||
});
|
||||
|
||||
// TODO JavaScript Input value return
|
||||
// Current way..
|
||||
// -------------------------------------
|
||||
// get input by getting the input object
|
||||
// catch oninput event inside a 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_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
|
||||
$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
|
||||
@ -1,100 +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
|
||||
$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
|
||||
Loading…
x
Reference in New Issue
Block a user