Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
66 lines
1.5 KiB
/**
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
@mixin components__button() {
|
|
.button {
|
|
position: relative;
|
|
color: $crispy__color-white;
|
|
|
|
border: 0;
|
|
padding: 10px 30px;
|
|
|
|
transition: background-color 0.3s ease-in-out;
|
|
background: url(
|
|
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFklEQVQYlWNgIBJIIWFsfCooGEg3AACalwOpdVZM4wAAAABJRU5ErkJggg==
|
|
) repeat;
|
|
|
|
&--highlight {
|
|
border: 4px solid $crispy__color-background;
|
|
|
|
&:after, &:before {
|
|
position: absolute;
|
|
z-index: -1;
|
|
|
|
top: -6px;
|
|
width: 15px;
|
|
height: 56px;
|
|
content: '';
|
|
}
|
|
|
|
&:before {
|
|
left: -6px;
|
|
}
|
|
|
|
&:after {
|
|
right: -6px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $name, $color in $crispy__colors {
|
|
.button--#{$name} {
|
|
text-shadow: 0 0 3px #000000;
|
|
background-color: darken($color, 8%) !important;
|
|
|
|
&:hover {
|
|
background-color: lighten($color, 5%) !important;
|
|
}
|
|
|
|
&.button--highlight {
|
|
&:after, &:before {
|
|
background-color: darken($color, 8%) !important;
|
|
}
|
|
|
|
&:hover {
|
|
&:after, &:before {
|
|
background-color: lighten($color, 5%) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|