*/
@media only screen and (min-width: 992px) {
.show-hover-container:not(:hover) .show-hover-item {
visibility: hidden;
transition: box-shadow 250ms ease,transform 250ms ease; } }
/* all devices */
.show-hover-container-all:not(:hover) .show-hover-item-all {
visibility: hidden;
transition: box-shadow 250ms ease,transform 250ms ease; }
/*
VIZIBILITY CLASSES, EASIER|INTUITIVE (old bootstrap)
INSTEAD OF .d-*
https://getbootstrap.com/docs/4.3/utilities/display/
MIXIN USED
*/
/*
Viewport
*/
/**
Embed media
**/
/**
File input
**/
/**
- Cursors
**/
/**
- Flex
**/
/**
:: WORKING : DISABLED|NOT NEEDED ::
Squared Grid
:: Chrome, FF, Opera, Safari (IE not tested)
.row-squared {
display: flex;
flex-wrap: wrap;
}
.col-squared {
width: 100%;
}
@media (min-width: map-get($grid-breakpoints, "lg")) {
.col-squared {
width: 50%;
}
}
@media (max-width: map-get($grid-breakpoints, "lg") - 1) { // xl: 1200px, lg: 992px, md: 768px
.col-squared {
width: 25%;
}
}
.col-squared:before {
content: "";
float: left;
padding-top: 100%;
}
**/
/**
- Bordered Grid .row-grid
**/
/* bordered grid */
/*
Grid Gutters
*/
/*
Bordered columns
old: rgba(0,0,0,.1)
*/
/*
Kanban grid
*/
/*
Grid notes-like
*/
/**
- Line Height
**/
/**
- Table
**/
/* bootstrap fix */
/* slightly text shadow */
/* text color missing from botostrap */
/*
Links
.text-
.text-*-hover
*/
/*
Color text
*/
/**
- Z Index
**/
/* z-index */
/**
- Rtl Utils .text-align-start, .text-align-end, .float-start, .float-end
.p--0-start, .p--0-end, .m--0-start, .m--0-end
.b--0-start, .b--0-end, .b--0-start, .b--0-end
.m-auto-start, .m-auto-end
**/
/**
- Generic Animations .animate-fadein CSS: animation: __utilFadeIn .25s ease;
.animate-fadeinSlow CSS: animation: __utilFadeInSlow 2s ease;
.animate-fadeinup CSS: animation: __utilFadeInUp .25s ease-out forwards;
.animate-fadeindown CSS: animation: __utilFadeInDown .25s ease-out forwards;
.animate-bouncein CSS: animation: __utilBounceIn .25s ease-out forwards;
.animate-bounceinup CSS: animation: __utilBounceInUp .25s ease-out forwards;
.animate-shine CSS: animation: __utilShine 6s infinite ease-in-out;
.animate-pulse CSS: animation: __utilPulse 2s infinite;
.animate-reveal-up (50px)
.animate-reveal-down (50px)
**/
/*
Animate SlideIn
*/
/*
Animate Blink
*/
/*
Animate Reveal
*/
/*
Fade In
animation: __utilFadeIn .25s ease;
*/
/*
Fade In Slow
animation: __utilFadeInSlow .25s ease;
*/
/*
Fade in up
Fade in down
*/
/*
Bounce In
animation: __utilBounceIn .25s ease-out forwards;
*/
/*
Bounce In Up
animation: __utilBounceInUp .25s ease-out forwards;
*/
/*
Shine
*/
/*
Smooth Zoom
https://w3bits.com/labs/css-image-hover-zoom/
*/
/**
- Responsive (mobile) .text-center-xs, .float-none-xs, .d-block-xs
.m--0-xs, .m*--0-xs,
.p--0-xs, .p*--0-xs,
.b--0-xs, .b*--0-xs,
**/
@media only screen and (max-width: 991px) and (min-width: 768px) {
/* button fix */ }
@media only screen and (max-width: 768px) {
/* button fix */
/*
Grid Gutters
*/ }
@media print {
@page {
margin: 0 -6cm; }
.row > * {
float: left; }
.col-lg-9 {
width: 75%; }
.col-lg-8 {
width: 66.66666667%; }
.col-lg-7 {
width: 58.33333333%; }
.col-lg-6 {
width: 50%; }
.col-lg-4 {
width: 33.33333333%; } }
/**
BOOTSTRAP RTL FIXES
various positioning
**/
/* arrow-lg */
/* center positioning */
/* center positioning -lg */
/**
Various Blocks
**/
/*
Image stretch
Desktop only!
*/
/*
Images Block
*/
/*
Images Block 2
All devices
*/
@media only screen and (min-width: 768px) {
body:not(.layout-admin) .section {
padding: 100px 0; } }
@media only screen and (max-width: 768px) {
body:not(.layout-admin) .section {
padding: 80px 0; } }
/**
// slightly gradient! veeeery slightly!
// to have that "something" and not complete FLAT!
// Check first if Botstrap gradients enabled in variables!
@if $enable-gradients == false {
.btn {
position: relative;
}
.btn:not(.bg-transparent):not(.btn-ghost):not(.bg-nogradient):after {
content:'';
background-image: linear-gradient(-315deg,rgba(255,255,255,0),rgba(255,255,255,.08));
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.btn.rounded-circle:after {
border-radius: 50%;
}
.btn.btn-pill:after {
border-radius: $border-radius-pill;
}
.btn.rounded-xl:after {
border-radius: .8rem;
}
// reset .btn-group
.btn-group .btn-pill:after,
.btn-group .rounded-circle:after {
background-image: none;
display: none;
}
}
**/
/**
BUTTONS
Soft buttons : based on bootstrap scheme
Shadowed buttons : shadow on hover;
Vendor buttons
Pill buttons
Icon buttons
* cancel hover shadow by adding .btn-noshadow
**/
/*
Icon Spacing|Correction
Usage - span is required only if icon is present
Button TextButton Text
*/
/*
using .group-icon
or icon is placed last one
*/
/*
Modal & Alert Close Buttons
*/
/*
Soft buttons
.btn-soft - transition to original button color
.btn-soft-static - no transition, keep same color
*/
.btn-soft.btn-primary:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #2117d7;
border-color: #f1f0fd;
background-color: #f1f0fd; }
.btn-soft.btn-secondary:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #494f54;
border-color: #f0f2f2;
background-color: #f0f2f2; }
.btn-soft.btn-success:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #4a7e20;
border-color: #e4f5d7;
background-color: #e4f5d7; }
.btn-soft.btn-info:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #2bdbf3;
border-color: #bbf3fb;
background-color: #bbf3fb; }
.btn-soft.btn-warning:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #f7c12c;
border-color: #fdedc0;
background-color: #fdedc0; }
.btn-soft.btn-danger:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #ec0c24;
border-color: #feeef0;
background-color: #feeef0; }
.btn-soft.btn-light:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #cbd3da;
border-color: white;
background-color: white; }
.btn-soft.btn-dark:not(:hover):not([aria-expanded="true"]):not(.active) {
color: #080808;
border-color: #c4c4c4;
background-color: #c4c4c4; }
/*
Shadowed buttons
* cancel hover shadow by adding .btn-noshadow -or- .shadow-none
*/
.btn-primary:not(.btn-noshadow):hover,
.btn-primary:not(.btn-noshadow):not(.btn-soft):focus,
.btn-primary:not(.btn-noshadow):not(.btn-soft):active {
box-shadow: 0 4px 11px rgba(87, 79, 236, 0.35); }
/*
Vendor buttons
* cancel hover shadow by adding .btn-noshadow
*/
/*
Pill buttons
Also, we have .rounded-bill in bootstrap
*/
/*
Icon buttons
*/
/* no rounded - fixed paddings */
/* rounded */
/*
Ghost buttons
*/
.btn-ghost:not(:hover):not(:active):not(:focus) {
background-color: transparent !important;
border-color: transparent !important; }
@media only screen and (max-width: 991px) {
/*
Example usage case
Projects
*/
/* hide button text, keep the icon only (or group icon) */ }
/*
Toggle Button
*/
/* by javascript */
/* active */
/* by bootstrap (dropdowns, collapse, etc) */
/*
Burger menu button
*/
.card {
box-shadow: 0 6px 12px rgba(140, 152, 164, 0.075); }
/*
Soft badges
.badge-soft
*/
/* icon fix */
/*
DROPDOWN : GENERAL SETUP
--
Bootstrap is "missing" nested|multilevel dropdowns and opening them on mouse over!
So, instead of developing new plugins reinventing the weel (more code, more issues),
we use dropdowns for almost everything!
++++++++++++++++++++++
NOTE: many rules are splitted on desktop/mobile for specific functions/fixes
So also check the bottom @media before making changes!
++++++++++++++++++++++
*/
/* animation on hover, also on mobile (collapsing) */
/* box shadow */
/*.dropdown-menu:not(.shadow-none) {*/
/* force disabled link */
/*
default dropdown link
hovers : see @media on bottom
*/
/* dropdown header */
/* dropdown footer */
a.dropdown-footer:not(:hover),
.dropdown-footer > a:not(:hover) {
color: #1c0950; }
/* dropdown item */
/* keep icons in place */
/*
highlighted/active color
hovers : see @media
*/
/* icons positioning for a nice default look */
/*
DROPDOWN : UPPERCASE FORCED
also font scaled down to avoid too large looking
*/
/*
DROPDOWN : CLEAN
no background color on hover
*/
/*
DROPDOWN : INVERT
open in oposite direction
*/
/*
DROPDOWN : NESTED POSITIONING
again, bootstrap was not developed for this
*/
/* deep level icon indicator */
/* turn down icon */
@media only screen and (max-width: 991px) {
/*
deep links indicator
turn icon down on active
*/ }
/*
DROPDOWN : MEGA
Dropdown links inside mega menu
Links are formatted for dropdown.
We make them fit inside mega menu
NOTE: Use
instead of
for mega dropdowns
REASON: avoiding grid collisions
*/
/*
Dropdown mega menu
multiple lists, same column
*/
/*
PREFIX ICON|INDICATOR
Add to .dropdown-menu following classes:
.prefix-link-icon .prefix-icon-dot - link prefix
.prefix-link-icon .prefix-icon-line - link prefix
.prefix-link-icon .prefix-icon-ico - link prefix
.prefix-link-icon .prefix-icon-arrow - link prefix
.prefix-icon-ignore - ignore, do not use on a specific link
*/
/* dropdown header */
/* setup */
/* dot */
/* line */
/* square */
/* arrow */
/* hover color */
/* desktop only */
@media only screen and (min-width: 991px) {
/* keep link highlighted on hover */
/* show on mouse over */
/*
Dropdown mega menu : full width
*/
/*
Dropdown mega menu : Sizes
*/
/*
DROPDOWN : DARK
*/
/* links */
/* grid */
/* multilevel dropdown inside content : multilevel click issue : [hack|overwriting popper.js] */
/* Animate : Fade In Up */
/* Animate : Bounce In Up */ }
/* mobile only */
@media only screen and (max-width: 991px) {
/*
default dropdown link
do not keep it active on second click
*/
/*
Dropdown mega menu / full width
*/
/* links inside mega menu */
/* multilevel dropdown inside content */
/* fix position of dropdown on navbar */ }
/*
*/
/* active */
/* disabled */
/* invalid */
/* colors */
/* checkbox */
/* setup */
/* large */
/* stripped table */
/*
*/
/**
SIDEBAR
Dropped .aside-left & .aside-right
.aside-start = left on LTR
.aside-start = right on RTL
.aside-end = right on LTR
.aside-end = left on RTL
Header : match sidebar background color
#header.header-match-aside-primary
#header.header-match-aside-secondary
**/
/* sidebar (also used by admin) */
/*
Nav Item
Paddings
orig: .5rem 1rem
*/
/*
hover & active background color
overwrite _navigations.scss
*/
/*
disabled links
*/
/*
spacings
*/
/*
EXTENDED NAV
Like a secondary sidebar
*/
/* hide : is inactive */
/* overlay */
/* fade in animation */
/*
Header : match sidebar
background color
*/
/**
CUSTOM, SIMPLE
(ecommerce cart, etc)
**/
/**
Responsive
**/
@media only screen and (min-width: 992px) {
/*
ASIDE : FOCUS
Push header
*/
/**
FRONTEND DEDICATED
**/
/**
ASIDE FLOAT
**/ }
@media only screen and (max-width: 991px) {
/*
HIDE|SHOW
*/
/* extended */
/* extended - position forced */ }
/**
Fullscreen Element
**/
/* show element on fullscreen only */
/* hidden element on fullscreen only */
/**
Modals
**/
/**
PAGINATION : PILL
**/
/*
Process Steps
.process-steps-primary