mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
93 lines
2.5 KiB
SCSS
93 lines
2.5 KiB
SCSS
@mixin box-shadow($shadows...) {
|
|
-moz-box-shadow: $shadows;
|
|
-webkit-box-shadow: $shadows;
|
|
box-shadow: $shadows;
|
|
-o-box-shadow: $shadows;
|
|
}
|
|
|
|
@mixin rotate($degrees) {
|
|
-webkit-transform: rotate($degrees);
|
|
-moz-transform: rotate($degrees);
|
|
-ms-transform: rotate($degrees);
|
|
-o-transform: rotate($degrees);
|
|
transform: rotate($degrees);
|
|
}
|
|
|
|
@mixin rotate-important($degrees) {
|
|
-webkit-transform: rotate($degrees) !important;
|
|
-moz-transform: rotate($degrees) !important;
|
|
-ms-transform: rotate($degrees) !important;
|
|
-o-transform: rotate($degrees) !important;
|
|
transform: rotate($degrees) !important;
|
|
}
|
|
|
|
@mixin no-animation() {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-ms-transition: none !important;
|
|
-o-transition: none !important;
|
|
transition: none !important;
|
|
}
|
|
|
|
@mixin transition($trans) {
|
|
-webkit-transition: $trans;
|
|
-moz-transition: $trans;
|
|
-ms-transition: $trans;
|
|
-o-transition: $trans;
|
|
transition: $trans;
|
|
}
|
|
|
|
@mixin rotate-animation-important($duration, $degrees) {
|
|
-webkit-transition-duration: $duration !important;
|
|
-moz-transition-duration: $duration !important;
|
|
-ms-transition-duration: $duration !important;
|
|
-o-transition-duration: $duration !important;
|
|
transition-duration: $duration !important;
|
|
-webkit-transition-property: -webkit-transform !important;
|
|
-moz-transition-property: -moz-transform !important;
|
|
-ms-transition-property: -ms-transform !important;
|
|
-o-transition-property: -o-transform !important;
|
|
transition-property: transform !important;
|
|
@include rotate-important($degrees);
|
|
}
|
|
|
|
@mixin rotate-animation($duration, $degrees) {
|
|
-webkit-transition-duration: $duration;
|
|
-moz-transition-duration: $duration;
|
|
-ms-transition-duration: $duration;
|
|
-o-transition-duration: $duration;
|
|
transition-duration: $duration;
|
|
-webkit-transition-property: -webkit-transform;
|
|
-moz-transition-property: -moz-transform;
|
|
-ms-transition-property: -ms-transform;
|
|
-o-transition-property: -o-transform;
|
|
transition-property: transform;
|
|
@include rotate($degrees);
|
|
}
|
|
|
|
@mixin red-dot {
|
|
background: $brand-danger;
|
|
border: 1px solid $color-white;
|
|
border-radius: 50%;
|
|
content: "";
|
|
height: .5em;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: .5em;
|
|
}
|
|
|
|
@mixin not-started {
|
|
border: 1px solid var(--sn-sleepy-grey);
|
|
color: var(--sn-black);
|
|
}
|
|
|
|
// Material design mixins
|
|
|
|
@mixin md-card-style {
|
|
background-color: $color-white;
|
|
border: 1px solid $color-concrete;
|
|
border-radius: 5px;
|
|
transition: $md-transaction;
|
|
}
|