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.
106 lines
2.0 KiB
106 lines
2.0 KiB
// ================================================================================================ |
|
// File Name: helper.scss |
|
// Description: Helper classes provides template related customization. |
|
// ---------------------------------------------------------------------------------------------- |
|
// Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template |
|
// Author: PIXINVENT |
|
// Author URL: http://www.themeforest.net/user/pixinvent |
|
// ================================================================================================ |
|
|
|
// Content helpers |
|
// ------------------------- |
|
|
|
// typography page icon with list |
|
.list-style-icons { |
|
padding-left: 10px; |
|
margin-left: 0; |
|
list-style: none; |
|
> li svg, |
|
> li i { |
|
margin-right: 6px; |
|
} |
|
} |
|
|
|
//Pull the element |
|
.pull-up { |
|
transition: all 0.25s ease; |
|
|
|
&:hover { |
|
transform: translateY(-4px) scale(1.02); |
|
box-shadow: 0px 14px 24px rgba(62, 57, 107, 0.2); |
|
z-index: 30; |
|
} |
|
} |
|
|
|
// Spinner classes |
|
.spinner { |
|
display: inline-block; |
|
animation: spin 1s linear infinite; |
|
} |
|
@keyframes spin { |
|
0% { |
|
transform: rotate(0deg); |
|
} |
|
100% { |
|
transform: rotate(360deg); |
|
} |
|
} |
|
|
|
.spinner-reverse { |
|
display: inline-block; |
|
animation: spin-reverse 1s linear infinite; |
|
} |
|
@keyframes spin-reverse { |
|
0% { |
|
transform: rotate(0deg); |
|
} |
|
100% { |
|
transform: rotate(-360deg); |
|
} |
|
} |
|
|
|
// Bullets used in application pages |
|
.bullet { |
|
width: 1rem; |
|
height: 1rem; |
|
border-radius: 50%; |
|
display: inline-block; |
|
&.bullet-xs { |
|
width: 0.5rem; |
|
height: 0.5rem; |
|
} |
|
&.bullet-sm { |
|
width: 0.714rem; |
|
height: 0.714rem; |
|
} |
|
&.bullet-lg { |
|
width: 1.25rem; |
|
height: 1.25rem; |
|
} |
|
} |
|
|
|
// Section Label - used in pages and apps |
|
.section-label { |
|
font-size: 0.85rem; |
|
color: $text-muted; |
|
text-transform: uppercase; |
|
letter-spacing: 0.6px; |
|
} |
|
|
|
// Used for table cell fit |
|
.cell-fit { |
|
width: 0.1%; |
|
white-space: nowrap; |
|
} |
|
|
|
// Card match height |
|
.match-height { |
|
> [class*='col'] { |
|
display: flex; |
|
flex-flow: column; |
|
|
|
> .card { |
|
flex: 1 1 auto; |
|
} |
|
} |
|
}
|
|
|