You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
8.0 KiB
451 lines
8.0 KiB
7 months ago
|
// ================================================================================================
|
||
|
|
// File Name: utilities.scss
|
||
|
|
// Description: Utility classes provides color, width, position & background etc..
|
||
|
|
// related customization.
|
||
|
|
// ----------------------------------------------------------------------------------------------
|
||
|
|
// Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
|
||
|
|
// Author: PIXINVENT
|
||
|
|
// Author URL: http://www.themeforest.net/user/pixinvent
|
||
|
|
// ================================================================================================
|
||
|
|
|
||
|
|
// Sizes Variable for height and width mixins
|
||
|
|
$sizes-px: (
|
||
|
|
// in px
|
||
|
|
50: 50px,
|
||
|
|
100: 100px,
|
||
|
|
150: 150px,
|
||
|
|
200: 200px,
|
||
|
|
250: 250px,
|
||
|
|
300: 300px,
|
||
|
|
350: 350px,
|
||
|
|
400: 405px,
|
||
|
|
450: 455px,
|
||
|
|
500: 500px,
|
||
|
|
550: 550px,
|
||
|
|
600: 600px,
|
||
|
|
650: 650px,
|
||
|
|
700: 700px,
|
||
|
|
750: 750px,
|
||
|
|
800: 800px
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
$sizes-per: (
|
||
|
|
// in %
|
||
|
|
5: 5%,
|
||
|
|
10: 10%,
|
||
|
|
15: 15%,
|
||
|
|
20: 20%,
|
||
|
|
25: 25%,
|
||
|
|
30: 30%,
|
||
|
|
35: 35%,
|
||
|
|
40: 40%,
|
||
|
|
45: 45%,
|
||
|
|
50: 50%,
|
||
|
|
55: 55%,
|
||
|
|
60: 60%,
|
||
|
|
65: 65%,
|
||
|
|
70: 70%,
|
||
|
|
75: 75%,
|
||
|
|
80: 80%,
|
||
|
|
85: 85%,
|
||
|
|
90: 90%,
|
||
|
|
95: 95%
|
||
|
|
) !default;
|
||
|
|
|
||
|
|
//--------------- Text ---------------
|
||
|
|
//------------------------------------
|
||
|
|
|
||
|
|
// Font Size
|
||
|
|
//----------
|
||
|
|
//small
|
||
|
|
.font-small-1 {
|
||
|
|
font-size: 0.7rem !important;
|
||
|
|
|
||
|
|
// for Feather SVG icons as we are using base size as 1rem
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 0.7rem !important;
|
||
|
|
width: 0.7rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-small-2 {
|
||
|
|
font-size: 0.8rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 0.8rem !important;
|
||
|
|
width: 0.8rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-small-3 {
|
||
|
|
font-size: 0.9rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 0.9rem !important;
|
||
|
|
width: 0.9rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-small-4 {
|
||
|
|
font-size: 1rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1rem !important;
|
||
|
|
width: 1rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//medium
|
||
|
|
.font-medium-1 {
|
||
|
|
font-size: 1.1rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1.1rem !important;
|
||
|
|
width: 1.1rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-medium-2 {
|
||
|
|
font-size: 1.2rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1.2rem !important;
|
||
|
|
width: 1.2rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-medium-3 {
|
||
|
|
font-size: 1.3rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1.3rem !important;
|
||
|
|
width: 1.3rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-medium-4 {
|
||
|
|
font-size: 1.4rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1.4rem !important;
|
||
|
|
width: 1.4rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-medium-5 {
|
||
|
|
font-size: 1.5rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 1.5rem !important;
|
||
|
|
width: 1.5rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//large
|
||
|
|
.font-large-1 {
|
||
|
|
font-size: 2rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 2rem !important;
|
||
|
|
width: 2rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-large-2 {
|
||
|
|
font-size: 3rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 3rem !important;
|
||
|
|
width: 3rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-large-3 {
|
||
|
|
font-size: 4rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 4rem !important;
|
||
|
|
width: 4rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-large-4 {
|
||
|
|
font-size: 5rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 5rem !important;
|
||
|
|
width: 5rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.font-large-5 {
|
||
|
|
font-size: 6rem !important;
|
||
|
|
@at-root svg#{&} {
|
||
|
|
height: 6rem !important;
|
||
|
|
width: 6rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Line height
|
||
|
|
//----------
|
||
|
|
.line-height-1 {
|
||
|
|
line-height: 1 !important;
|
||
|
|
}
|
||
|
|
.line-height-condensed {
|
||
|
|
line-height: 1.5 !important;
|
||
|
|
}
|
||
|
|
.line-height-inherit {
|
||
|
|
line-height: inherit !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Transform
|
||
|
|
//----------
|
||
|
|
.rotate-45 {
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
.rotate-45-inverse {
|
||
|
|
transform: rotate(-45deg);
|
||
|
|
}
|
||
|
|
.rotate-90 {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
.rotate-90-inverse {
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
.rotate-180 {
|
||
|
|
transform: rotate(180deg);
|
||
|
|
}
|
||
|
|
.rotate-180-inverse {
|
||
|
|
transform: rotate(-180deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Borders --------------
|
||
|
|
//-------------------------------------
|
||
|
|
|
||
|
|
// Border width - 2px
|
||
|
|
.border-2 {
|
||
|
|
border-width: 2px !important;
|
||
|
|
}
|
||
|
|
.border-top-2 {
|
||
|
|
border-top-width: 2px !important;
|
||
|
|
}
|
||
|
|
.border-bottom-2 {
|
||
|
|
border-bottom-width: 2px !important;
|
||
|
|
}
|
||
|
|
.border-start-2 {
|
||
|
|
border-left-width: 2px !important;
|
||
|
|
}
|
||
|
|
.border-end-2 {
|
||
|
|
border-right-width: 2px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Border width - 3px
|
||
|
|
.border-3 {
|
||
|
|
border-width: 3px !important;
|
||
|
|
}
|
||
|
|
.border-top-3 {
|
||
|
|
border-top-width: 3px !important;
|
||
|
|
}
|
||
|
|
.border-bottom-3 {
|
||
|
|
border-bottom-width: 3px !important;
|
||
|
|
}
|
||
|
|
.border-start-3 {
|
||
|
|
border-left-width: 3px !important;
|
||
|
|
}
|
||
|
|
.border-end-3 {
|
||
|
|
border-right-width: 3px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Shapes radius : Round / Square
|
||
|
|
.round {
|
||
|
|
@include border-radius(1.5rem);
|
||
|
|
}
|
||
|
|
.square {
|
||
|
|
@include border-radius(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Sizing --------------
|
||
|
|
//------------------------------------
|
||
|
|
|
||
|
|
// Width && Height
|
||
|
|
.fit {
|
||
|
|
max-width: 100% !important;
|
||
|
|
}
|
||
|
|
.half-width {
|
||
|
|
width: 50% !important;
|
||
|
|
}
|
||
|
|
.full-width {
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
.full-height {
|
||
|
|
height: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// height & width in PX
|
||
|
|
@each $name, $size in $sizes-px {
|
||
|
|
.height-#{$name} {
|
||
|
|
height: $size !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.width-#{$name} {
|
||
|
|
width: $size !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// height & width in %
|
||
|
|
@each $name, $size in $sizes-per {
|
||
|
|
.height-#{$name}-per {
|
||
|
|
height: $size !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.width-#{$name}-per {
|
||
|
|
width: $size !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//------------- Overflow -------------
|
||
|
|
//------------------------------------
|
||
|
|
.overflow-visible {
|
||
|
|
overflow: visible;
|
||
|
|
}
|
||
|
|
.overflow-scroll {
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
.overflow-x-scroll {
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
.overflow-y-scroll {
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Cursor --------------
|
||
|
|
//------------------------------------
|
||
|
|
.cursor-pointer {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.cursor-move {
|
||
|
|
cursor: move;
|
||
|
|
}
|
||
|
|
.cursor-default {
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
.cursor-progress {
|
||
|
|
cursor: progress;
|
||
|
|
}
|
||
|
|
.cursor-not-allowed {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Z-index --------------
|
||
|
|
//-------------------------------------
|
||
|
|
.zindex-1 {
|
||
|
|
z-index: 1 !important;
|
||
|
|
}
|
||
|
|
.zindex-2 {
|
||
|
|
z-index: 2 !important;
|
||
|
|
}
|
||
|
|
.zindex-3 {
|
||
|
|
z-index: 3 !important;
|
||
|
|
}
|
||
|
|
.zindex-4 {
|
||
|
|
z-index: 4 !important;
|
||
|
|
}
|
||
|
|
.zindex-0 {
|
||
|
|
z-index: 0 !important;
|
||
|
|
}
|
||
|
|
.zindex-minus-1 {
|
||
|
|
z-index: -1 !important;
|
||
|
|
}
|
||
|
|
.zindex-minus-2 {
|
||
|
|
z-index: -2 !important;
|
||
|
|
}
|
||
|
|
.zindex-minus-3 {
|
||
|
|
z-index: -3 !important;
|
||
|
|
}
|
||
|
|
.zindex-minus-4 {
|
||
|
|
z-index: -4 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
//------------ Box Shadow ------------
|
||
|
|
//------------------------------------
|
||
|
|
.box-shadow-0 {
|
||
|
|
box-shadow: none !important;
|
||
|
|
}
|
||
|
|
.box-shadow-1 {
|
||
|
|
box-shadow: 0 2px 5px 0 rgba($black, 0.16), 0 2px 10px 0 rgba($black, 0.12);
|
||
|
|
}
|
||
|
|
.box-shadow-2 {
|
||
|
|
box-shadow: 0 8px 17px 0 rgba($black, 0.2), 0 6px 20px 0 rgba($black, 0.19);
|
||
|
|
}
|
||
|
|
.box-shadow-3 {
|
||
|
|
box-shadow: 0 12px 15px 0 rgba($black, 0.24), 0 17px 50px 0 rgba($black, 0.19);
|
||
|
|
}
|
||
|
|
.box-shadow-4 {
|
||
|
|
box-shadow: 0 16px 28px 0 rgba($black, 0.22), 0 25px 55px 0 rgba($black, 0.21);
|
||
|
|
}
|
||
|
|
.box-shadow-5 {
|
||
|
|
box-shadow: 0 27px 24px 0 rgba($black, 0.2), 0 40px 77px 0 rgba($black, 0.22);
|
||
|
|
}
|
||
|
|
.box-shadow-6 {
|
||
|
|
box-shadow: 0 4px 8px 0 rgba($black, 0.12), 0 2px 4px 0 rgba($black, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Outline --------------
|
||
|
|
//-------------------------------------
|
||
|
|
.outline-none {
|
||
|
|
outline: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Lists --------------
|
||
|
|
//-----------------------------------
|
||
|
|
.list-style-inside {
|
||
|
|
list-style: inside;
|
||
|
|
}
|
||
|
|
.list-style-circle {
|
||
|
|
list-style: circle;
|
||
|
|
}
|
||
|
|
.list-style-square {
|
||
|
|
list-style: square;
|
||
|
|
}
|
||
|
|
|
||
|
|
//--------- Background Image ---------
|
||
|
|
//------------------------------------
|
||
|
|
.bg-cover {
|
||
|
|
background-size: cover !important;
|
||
|
|
}
|
||
|
|
.background-repeat {
|
||
|
|
background-repeat: repeat !important;
|
||
|
|
}
|
||
|
|
.background-no-repeat {
|
||
|
|
background-repeat: no-repeat !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
//-------------- Icons --------------
|
||
|
|
//-----------------------------------
|
||
|
|
.icon-bg-circle {
|
||
|
|
color: $white;
|
||
|
|
padding: 0.5rem;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.icon-left {
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
.icon-right {
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Used for blockUI
|
||
|
|
.blockOverlay {
|
||
|
|
z-index: 1050 !important;
|
||
|
|
}
|
||
|
|
.blockElement,
|
||
|
|
.blockPage {
|
||
|
|
z-index: 1051 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hidden {
|
||
|
|
display: none;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
&:hover {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//Tables
|
||
|
|
//--------------------------
|
||
|
|
.table-middle {
|
||
|
|
td {
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//SVG
|
||
|
|
//--------------------------
|
||
|
|
.fill-current {
|
||
|
|
fill: currentColor;
|
||
|
|
}
|
||
|
|
|
||
|
|
//Cursor
|
||
|
|
//--------------------------
|
||
|
|
.pointer-events-none {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|