// update tag border
html {
border: none !important;
}
// Blur effect
.blur {
box-shadow: $blur-box-shadow;
-webkit-backdrop-filter: $blur-backdrop-filter;
backdrop-filter: $blur-backdrop-filter;
background-color: $card-background-blur !important;
&.saturation-less {
-webkit-backdrop-filter: $blur-backdrop-filter-less;
backdrop-filter: $blur-backdrop-filter-less;
}
&.blur-rounded {
border-radius: $blur-border-radius-rounded;
}
&.blur-light {
background-color: $blur-light-background;
}
&.blur-dark {
background-color: $blur-dark-background;
}
}
.shadow-blur {
box-shadow: $shadow-blur-box-shadow !important;
}
.shadow-card {
box-shadow: $card-box-shadow !important;
}
.navbar-blur {
-webkit-backdrop-filter: $blur-backdrop-filter;
backdrop-filter: $blur-backdrop-filter;
background-color: rgba($white, .58) !important;
}
.blur-section {
-webkit-backdrop-filter: $blur-backdrop-filter;
backdrop-filter: $blur-backdrop-filter;
&.blur-gradient-primary {
@include gradient-directional(rgba($primary-gradient, .95) 0%, rgba($primary-gradient-state, .95) 100%, $deg: 310deg);
}
}
// Transition on hover
* {
&.move-on-hover {
-webkit-transition: $move-transition;
transition: $move-transition;
overflow: $move-overflow;
-webkit-transform-origin: $move-transform-origin;
transform-origin: $move-transform-origin;
transform-origin: $move-transform-origin;
-webkit-transform: $move-transform;
transform: $move-transform;
-webkit-backface-visibility: $move-backface-visibility;
backface-visibility: $move-backface-visibility;
will-change: $move-will-change;
&:hover {
-webkit-transform: $move-hover-transform;
transform: $move-hover-transform;
}
}
&.gradient-animation {
background: $gradient-animation-background;
background-size: $gradient-animation-bg-size !important;
animation: $device-wrapper-animation;
}
}
hr {
border-top: none;
height: 1px;
}
// Vertical Line
hr.vertical {
position: absolute;
background-color: $hr-bg-color;
height: 100%;
right: 0;
top: 0;
width: 1px;
&.light {
background-image: $hr-vertical-bg-image-light;
}
&.dark {
background-image: $hr-vertical-bg-image-dark;
}
&.gray-light {
background-image: $hr-horizontal-bg-image-gray-light;
}
}
// Horizontal Line
hr.horizontal {
background-color: $hr-bg-color;
&.light {
background-image: $hr-horizontal-bg-image-light;
}
&.dark {
background-image: $hr-horizontal-bg-image-dark;
}
&.gray-light {
background-image: $hr-horizontal-bg-image-gray-light;
}
}
// lock style
.lock-size {
width: 1.7rem;
height: 1.7rem;
}
.border-radius-xs {
border-radius: $border-radius-xs;
}
.border-radius-sm {
border-radius: $border-radius-sm;
}
.border-radius-md {
border-radius: $border-radius-md;
}
.border-radius-lg {
border-radius: $border-radius-lg;
}
.border-radius-xl {
border-radius: $border-radius-xl;
}
.border-radius-2xl {
border-radius: $border-radius-2xl;
}
.border-radius-section {
border-radius: $border-radius-section;
}
.border-bottom-end-radius-0 {
border-bottom-right-radius: 0;
}
.border-top-end-radius-0 {
border-top-right-radius: 0;
}
.border-bottom-start-radius-0 {
border-bottom-left-radius: 0;
}
.border-top-start-radius-0 {
border-top-left-radius: 0;
}
.border-dashed{
border-style: dashed;
}
.z-index-sticky {
z-index: $zindex-sticky;
}
// moving waves animation
.waves {
position: $waves-position;
width: $waves-width;
height: $waves-height;
margin-bottom: $waves-margin-bottom;
/*Fix for safari gap*/
min-height: $waves-min-height;
max-height: $waves-max-height;
&.waves-sm {
height: $waves-height-sm;
min-height: $waves-min-height-sm;
}
&.no-animation {
.moving-waves > use {
animation: none;
}
}
}
.wave-rotate {
transform: $waves-rotate;
}
/* Animation for the waves */
.moving-waves > use {
animation: $moving-waves-animation;
}
.moving-waves > use:nth-child(1) {
animation-delay: $moving-waves-child-1-delay;
animation-duration: $moving-waves-child-1-duration;
}
.moving-waves > use:nth-child(2) {
animation-delay: $moving-waves-child-2-delay;
animation-duration: $moving-waves-child-2-duration;
}
.moving-waves > use:nth-child(3) {
animation-delay: $moving-waves-child-3-delay;
animation-duration: $moving-waves-child-3-duration;
}
.moving-waves > use:nth-child(4) {
animation-delay: $moving-waves-child-4-delay;
animation-duration: $moving-waves-child-4-duration;
}
.moving-waves > use:nth-child(5) {
animation-delay: $moving-waves-child-5-delay;
animation-duration: $moving-waves-child-5-duration;
}
.moving-waves > use:nth-child(6) {
animation-delay: $moving-waves-child-6-delay;
animation-duration: $moving-waves-child-6-duration;
}
@keyframes move-forever {
0% {
transform: $moving-waves-keyframe-0;
}
100% {
transform: $moving-waves-keyframe-100;
}
}
/*Shrinking for mobile*/
@include media-breakpoint-down(md) {
.waves {
height: $waves-mobile-height;
min-height: $waves-mobile-height;
}
hr.horizontal {
background-color: $hr-bg;
&:not(.dark) {
background-image: $hr-bg-image;
}
&.vertical {
transform: $hr-transform;
}
&.dark {
background-image: $hr-bg-dark-image;
}
}
}
.overflow-visible {
overflow: visible !important;
}
// popover title
.popover {
.popover-header {
font-weight: 600;
}
}
// Background Sizes
.bg-cover{
background-size: cover;
}
// Mask Class
.mask {
position: $mask-position;
background-size: $mask-bg-size;
background-position: $mask-bg-position;
top: $mask-top;
left: $mask-left;
width: $mask-width;
height: $mask-height;
opacity: $mask-opacity;
}
// Cursor Pointer Class
.cursor-pointer {
cursor: pointer;
}
// Translate 50% Class
.transform-translate-50{
transform: translate(0,-50%)
}
// VR Pages
@include media-breakpoint-up(lg) {
.virtual-reality {
.sidenav {
margin-top: $spacer * 1.5;
animation-name: $animation-name;
animation-fill-mode: $animation-mode;
animation-duration: $animation-duration;
transform: $transform-scale;
background: $white;
left: $position-left !important;
position: absolute;
}
}
}
// Separator Skew
.separator {
position: absolute;
top: auto;
right: 0;
left: 0;
overflow: hidden;
width: 100%;
height: $separator-height;
transform: $separator-transform;
pointer-events: none;
&.separator-bottom {
top: auto !important;
bottom: 0 !important;
}
&.separator-top {
top: 0 !important;
bottom: auto !important;
}
&.separator-skew {
height: 70px;
}
.fill-default {
fill: $argon-default-color;
}
}
.bg-default {
background-color: $argon-default-color;
}
// profile layout card position
.card {
&.card-profile-bottom {
margin-top: 15rem;
}
}