Skip to content

Instantly share code, notes, and snippets.

button.btn.primary{
background-color: #4a90e2;
box-shadow: 0px 3px 15px rgba(#4a90e2, 0.6);
}
button.btn.success{
background-color: #13b843;
box-shadow: 0px 3px 15px rgba(#13b843, 0.6);
}
...
...
// Theming button
@each $colorName, $color in $colors {
button.btn.#{$colorName}{
background-color: $color;
box-shadow: 0px 3px 15px rgba($color, 0.6);
}
}
button.btn{
border: none;
padding: 10px 20px;
border-radius: 5px;
background-color: #4a90e2;
color: #FFF;
margin: 10px;
cursor: pointer;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
// Function for getting colors from the array
@function color($colorname) {
@return map-get($colors, $colorname);
}
// List of colors
$colors: (
primary: #4a90e2,
success: #13b843,
warning: #FFA726,
danger: #F44336,
dark: #4c5b74
);
.hv-item-child{
padding: 0 15px;
position: relative;
&:before, &:after{
content: '';
position: absolute;
background-color: $line-color;
left: 0;
}
.hv-item-parent{
&:after{
position: absolute;
content: '';
width: 2px;
height: $bottom-margin / 2;
bottom: 0;
left: 50%;
background-color: $line-color;
transform: translateY(100%);
// Simple style for the content of parent & child
p{
margin: 0;
background-color: #fff;
color: #00B9AE;
padding: 20px;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(#CC8367, 0.22);
}
<!-- Key component -->
<div class="hv-item">
<div class="hv-item-parent">
<p> This will be parent </p>
</div>
<div class="hv-item-children">
<div class="hv-item-child">
<p> child Item </p>