first commit
This commit is contained in:
107
resources/sass/mixins/_animation.scss
Executable file
107
resources/sass/mixins/_animation.scss
Executable file
@ -0,0 +1,107 @@
|
||||
// Animation mixins
|
||||
|
||||
@keyframes dropdownAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transform: translate3d(0, 0px , 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownAnimation {
|
||||
-webkit-animation-name: dropdownAnimation;
|
||||
animation-name: dropdownAnimation;
|
||||
-webkit-animation-duration: $action-transition-duration;
|
||||
animation-duration: $action-transition-duration;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOUt;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.infinite-spin {
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
animation-name: spin;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@mixin transition($settings) {
|
||||
-webkit-transition: $settings;
|
||||
-moz-transition: $settings;
|
||||
-ms-transition: $settings;
|
||||
-o-transition: $settings;
|
||||
transition: $settings;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
$dim : 7px;
|
||||
$mult : 4;
|
||||
@keyframes pulse{
|
||||
0% {
|
||||
opacity: 1;
|
||||
width: $dim;
|
||||
height: $dim;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
95% {
|
||||
opacity: 0.1;
|
||||
left: -(($dim * $mult) - $dim) * .5;
|
||||
top: -(($dim * $mult) - $dim) * .5;
|
||||
width: $dim * $mult;
|
||||
height: $dim * $mult;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: $dim;
|
||||
height: $dim;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
animation-name: pulse;
|
||||
animation-duration: .9s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
56
resources/sass/mixins/_buttons.scss
Executable file
56
resources/sass/mixins/_buttons.scss
Executable file
@ -0,0 +1,56 @@
|
||||
@mixin social-button($color) {
|
||||
background: $color;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($color, 10%);
|
||||
color: $white;
|
||||
}
|
||||
&.btn-social-icon-text {
|
||||
padding: 0 1.5rem 0 0;
|
||||
background: lighten($color, 10%);
|
||||
i {
|
||||
background: $color;
|
||||
padding: .75rem;
|
||||
display: inline-block;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin social-outline-button($color) {
|
||||
border: 1px solid $color;
|
||||
color: $color;
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-inverse-variant($color, $color-hover: $white) {
|
||||
background-color: rgba($color, 0.2);
|
||||
background-image: none;
|
||||
border-color: rgba($color, 0);
|
||||
&:not(.btn-inverse-light) {
|
||||
color: $color;
|
||||
}
|
||||
&:hover,
|
||||
&.active,
|
||||
&:active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-color: rgba($color, 0.3);
|
||||
border-color: rgba($color, 0);
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
72
resources/sass/mixins/_misc.scss
Executable file
72
resources/sass/mixins/_misc.scss
Executable file
@ -0,0 +1,72 @@
|
||||
// Miscellaneous Mixins
|
||||
|
||||
// general transform
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
|
||||
// scale
|
||||
@mixin scale($scale) {
|
||||
@include transform(scale($scale));
|
||||
}
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
// skew
|
||||
@mixin skew ($x, $y) {
|
||||
@include transform(skew(#{$x}deg, #{$y}deg));
|
||||
}
|
||||
//transform origin
|
||||
@mixin transform-origin ($origin) {
|
||||
moz-transform-origin: $origin;
|
||||
-o-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin;
|
||||
-webkit-transform-origin: $origin;
|
||||
transform-origin: $origin;
|
||||
}
|
||||
//Ellipsis
|
||||
%ellipsor{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width:100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
%ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@mixin ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
91
resources/sass/mixins/_width.scss
Executable file
91
resources/sass/mixins/_width.scss
Executable file
@ -0,0 +1,91 @@
|
||||
//width mixin
|
||||
@mixin make-width($num, $viewport: "") {
|
||||
$p: $num + "%";
|
||||
|
||||
@if $viewport == "" {
|
||||
$viewport: "-";
|
||||
} @else {
|
||||
$viewport: "-" + $viewport + "-";
|
||||
}
|
||||
|
||||
.wd#{$viewport}#{$num} { width: #{$num}px; }
|
||||
.wd#{$viewport}#{$num}p { width: #{$p}; }
|
||||
.mx-wd#{$viewport}#{$num}p { max-width: #{$p}; }
|
||||
.mn-wd#{$viewport}#{$num}p { min-width: #{$p}; }
|
||||
|
||||
.wd#{$viewport}#{$num}-f { width: #{$num}px !important; }
|
||||
.wd#{$viewport}#{$num}p-f { width: #{$p} !important; }
|
||||
.mx-wd#{$viewport}#{$num}p-f { max-width: #{$p} !important; }
|
||||
.mn-wd#{$viewport}#{$num}p-f { min-width: #{$p} !important; }
|
||||
}
|
||||
|
||||
$num: 5;
|
||||
@while $num <= 100 {
|
||||
@include make-width($num);
|
||||
$num: $num + 5;
|
||||
}
|
||||
|
||||
$num: 150;
|
||||
@while $num <= 1000 {
|
||||
.wd-#{$num} { width: #{$num}px; }
|
||||
.wd-#{$num}-f { width: #{$num}px !important; }
|
||||
$num: $num + 50;
|
||||
}
|
||||
|
||||
@mixin do-make-width($viewport, $num, $max, $plus) {
|
||||
@while $num <= $max {
|
||||
@include make-width($num,$viewport);
|
||||
$num: $num + $plus;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
@include do-make-width("xs",5,100,5);
|
||||
@include do-make-width("xs",150,1000,50);
|
||||
|
||||
.wd-xs-auto { width: auto; }
|
||||
.wd-xs-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include do-make-width("sm",5,100,5);
|
||||
@include do-make-width("sm",150,1000,50);
|
||||
|
||||
.wd-sm-auto { width: auto; }
|
||||
.wd-sm-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include do-make-width("md",5,100,5);
|
||||
@include do-make-width("md",150,1000,50);
|
||||
|
||||
.wd-md-auto { width: auto; }
|
||||
.wd-md-auto-f { width: auto !important; }
|
||||
|
||||
//Custom
|
||||
.wd-md-120 { width: 120px; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include do-make-width("lg",5,100,5);
|
||||
@include do-make-width("lg",150,1000,50);
|
||||
|
||||
.wd-lg-auto { width: auto; }
|
||||
.wd-lg-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include do-make-width("xl",5,100,5);
|
||||
@include do-make-width("xl",150,1000,50);
|
||||
|
||||
.wd-xl-auto { width: auto; }
|
||||
.wd-xl-auto { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include do-make-width("xxl",5,100,5);
|
||||
@include do-make-width("xxl",150,1000,50);
|
||||
|
||||
.wd-xxl-auto { width: auto; }
|
||||
.wd-xxl-auto { width: auto !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user