scinote-web/app/assets/stylesheets/mixins.scss
mlorb 9693f84bbd
Implement actions dropdown on project card [SCI-5132] [SCI-5179] (#2968)
* Implement actions dropdown on project card
* make comments counter to work
2020-12-04 09:38:34 +01:00

89 lines
2.4 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;
}
// Material design mixins
@mixin md-card-style {
background-color: $color-white;
border: 1px solid $color-concrete;
border-radius: 5px;
transition: $md-transaction;
}