restore composer.json, add mysqli extension

This commit is contained in:
2026-04-15 17:02:52 +05:00
commit 77cf56a348
4317 changed files with 1397107 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
// Alerts
.alert {
font-weight: 500;
border: none;
// close
.close:focus{
outline: 0;
}
// For Alert Content
p {
font-weight: 500;
padding: 2px 0;
margin-bottom: 0;
vertical-align: middle;
}
span{
vertical-align: middle;
}
// For alert heading
.alert-heading {
font-weight: 700;
font-size: 0.9rem;
padding: 0;
padding-bottom: 8px;
}
// For dark alert
&.alert-dark {
.alert-heading {
@include alert-heading-bs($dark);
}
}
// For light alert
&.alert-light {
.alert-heading {
@include alert-heading-bs($light);
}
}
}

View File

@@ -0,0 +1,67 @@
.collapse-icon {
.card-header {
position: relative;
}
[data-toggle="collapse"] {
&:after {
position: absolute;
top: 48%;
right: 20px;
margin-top: -8px;
font-family: 'feather';
content: "\e845";
transition: all 300ms linear 0s;
font-size: 0.9rem;
}
&:before {
position: absolute;
top: 48%;
right: 20px;
margin-top: -8px;
font-family: 'feather';
content: "\e842";
transition: all 300ms linear 0s;
font-size: 0.9rem;
}
}
&.left {
a {
padding-left: 28px;
&:before,
&:after {
left: 20px;
right: auto;
}
}
}
[aria-expanded="true"] {
&:before {
opacity: 0;
}
}
[aria-expanded="false"] {
&:after {
opacity: 0;
}
}
&.accordion-icon-rotate {
[aria-expanded="true"] {
&:before {
transform: rotate(180deg);
}
}
[aria-expanded="false"] {
&:after {
transform: rotate(-180deg);
}
}
}
}

View File

@@ -0,0 +1,88 @@
// Badge
.badge {
color: $white;
background-color: $primary;
font-weight: 400;
&[class*='badge-'] {
[class*='icon-'] {
line-height: 1;
}
a {
color: $white;
}
i{
vertical-align: middle;
}
// badge dropdown alignment
.dropdown-toggle,
&.dropdown-toggle {
span,i {
vertical-align: text-top;
}
i{
padding-left: .2rem;
}
&::after {
position: relative;
top: 0;
left: 0;
font-size: 1rem;
}
}
.dropdown-menu {
a {
color: $dropdown-color;
}
}
}
// square badge
&.badge-square {
border-radius: 0;
}
// badge-up
// to align badge over any element
&.badge-up {
position: absolute;
top: -1rem;
right: -1rem;
&.badge-sm{
top: -.5rem;
right: -.5rem;
}
}
}
// badge sizes
.badge-xl {
font-size: 1.8rem;
}
.badge-lg {
font-size: 1.2rem;
}
.badge-md {
font-size: 1rem;
}
.badge-sm {
font-size: 0.7rem;
}
// For fullscreen search
.badge-icon {
i {
font-size: 100%;
margin-right: 5px;
}
}
// badge dropup pointer
.dropup{
.badge{
cursor: pointer;
}
}

View File

@@ -0,0 +1,111 @@
.breadcrumb {
font-size: $font-size-base;
font-family: $font-family-monospace;
background-color: transparent;
padding: 0.5rem 0 0.5rem $breadcrumb-padding-x !important;
border-left: 1px solid lighten($gray-600, 10%);
border-radius: 0;
> li {
+ li::before {
padding-right: .6rem;
padding-left: .6rem;
}
}
/* .breadcrumb-item:first-child{
a{
&:after{
content: "\e965";
font-family: 'feather';
}
}
} */
.breadcrumb-item + .breadcrumb-item{
padding-left: 0;
&:before{
content: "\e847";
font-family: 'feather';
color: $body-color;
}
}
.breadcrumb-item.active{
color: $body-color;
}
}
/* Custom scss for page headers style */
.breadcrumbs-right{
.breadcrumb {
float:right;
}
}
.breadcrumbs-top{
.breadcrumb {
margin: 0;
padding: 0;
}
}
/* Component Specific */
#component-breadcrumbs{
.breadcrumb{
border: none;
.breadcrumb-item + .breadcrumb-item:before{
font-family: none;
padding: 0 1rem;
}
}
.default-breadcrumb{
&.breadcrumb{
.breadcrumb-item + .breadcrumb-item:before{
content: "/";
}
}
}
.breadcrumb-dots{
&.breadcrumb{
.breadcrumb-item + .breadcrumb-item:before{
content: ".";
position: relative;
top: -4px;
}
}
}
.breadcrumb-dashes{
&.breadcrumb{
.breadcrumb-item + .breadcrumb-item:before{
content: "-";
}
}
}
.breadcrumb-pipes{
&.breadcrumb{
.breadcrumb-item + .breadcrumb-item:before{
content: "|";
}
}
}
.breadcrumb-chevron{
&.breadcrumb{
.breadcrumb-item + .breadcrumb-item:before{
content: "\e844";
font-family: 'feather';
position: relative;
top: 1px;
}
}
}
}
#breadcrumb-alignment{
.breadcrumb-wrapper{
box-shadow: 1px 1px 10px rgba($pure-black,.1);
padding: 1px;
border-radius: 10px;
.breadcrumb{
margin-top: .8rem;
}
}
}

View File

@@ -0,0 +1,198 @@
// var for boxshadow of gradient buttons
// Buttons
.btn {
// to change cursor of disabled button
&:disabled{
cursor: default;
}
// for white button
&.btn-white{
color: $body-color;
&:hover,&:focus,&:active{
color: $body-color !important;
}
}
// box shadow for gradient colors
&[class*="bg-gradient-"]:hover{
box-shadow: $gradient-button-bs;
}
// For Boxshadow on hover of normal light, dark and secondary btn
&.btn-secondary {
color: $white;
&:hover {
box-shadow: 0 8px 25px -8px rgba($secondary, 1);
}
}
&.btn-dark {
&:hover {
box-shadow: 0 8px 25px -8px rgba($dark, 1);
}
}
&.btn-light {
&:hover {
box-shadow: 0 8px 25px -8px rgba($light, 1);
}
}
// For Light,dark and secondary outline btns
&.btn-outline-secondary,
&.btn-outline-dark,
&.btn-outline-light {
border: 1px solid;
}
// Flat Secondary, Light and Dark
&.btn-flat-secondary {
&:hover {
background-color: rgba($secondary, 0.1);
}
&:active,
&:focus {
background: $secondary
}
}
&.btn-flat-dark {
&:hover {
background-color: rgba($dark, 0.1);
}
&:active,
&:focus {
background: $dark;
color: $white;
}
}
&.btn-flat-light {
&:hover {
background-color: rgba($light, 0.1);
}
&:active,
&:focus {
background: $light;
}
}
// to remove extra spacing because of border in btn outline
&[class*="btn-outline-"]{
padding-top: calc(#{$btn-padding-y} - 1px);
padding-bottom: calc(#{$btn-padding-y} - 1px);
&.btn-lg{
padding-top: calc(#{$btn-padding-y-lg} - 1px);
padding-bottom: calc(#{$btn-padding-y-lg} - 1px);
}
&.btn-sm{
padding-top: calc(#{$btn-padding-y-sm} - 1px);
padding-bottom: calc(#{$btn-padding-y-sm} - 1px);
}
}
// Relief Buttons Secondary, Light and Dark
&.btn-relief-secondary {
background-color: $secondary;
box-shadow: inset 0 -3px 0 0 rgba($pure-black, .2);
color: $white;
&:hover {
color: $white;
}
&:active,
&:focus {
outline: none;
transform: translateY(3px);
}
}
&.btn-relief-light {
background-color: $light;
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .2);
color: $white;
&:hover {
color: $white;
}
&:active,
&:focus {
outline: none;
transform: translateY(3px);
}
}
&.btn-relief-dark {
background-color: $dark;
box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .1);
color: $white;
&:hover {
color: $white;
}
&:active,
&:focus {
outline: none;
transform: translateY(3px);
}
}
// For btn-icon
&.btn-icon {
padding: .715rem .736rem;
}
&.btn-sm{
&.btn-icon{
padding: .5rem;
}
}
&.btn-lg{
&.btn-icon{
padding: 1rem;
}
}
// Remove focus/active focus outline
&.btn-square {
@include button-square-variant(0);
}
&.btn-round {
@include button-round-variant(2rem);
}
&:focus,
&.focus,
&:active,
&.active {
outline: none;
box-shadow: none !important;
}
&.btn-icon {
i {
font-size: 1.1rem;
}
}
}
// For White Btn
.btn.btn-outline-white,
.btn-white{
&:hover{
color: $black !important;
}
}
// Added cursor pointer as in latest bootstrap do not have this
button,
html [type="button"],
[type="reset"],
[type="submit"] {
cursor: pointer;
}
// For Waves Padding
.waves-button-input {
padding: unset;
}

View File

@@ -0,0 +1,273 @@
.card-group, .card-deck{
margin-bottom: 0.75rem;
}
.card {
// box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
margin-bottom: $spacer * 2.2;
border: none;
border-radius: $border-radius;
box-shadow: 0px 4px 25px 0px rgba(0,0,0,.1);
transition: all .3s ease-in-out;
.card {
box-shadow: none !important;
}
.card-subtitle{
margin-top: .5rem;
}
.card-title{
font-weight: 500;
letter-spacing: 0.05rem;
font-size: 1.32rem;
margin-bottom: $card-spacer-y / 3;
}
.card-bordered{
border: $card-border-width solid $card-border-color;
}
.card-img-overlay{
border-radius: $card-border-radius;
}
//fullscreen card
&.card-fullscreen {
display: block;
z-index: 9999;
position: fixed;
width: 100% !important;
height: 100% !important;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.card-body[class*='border-bottom-'] {
border-bottom-width: 2px !important;
}
.card-img-overlay{
&.bg-overlay{
background: rgba(0,0,0,0.45);
}
.text-muted{
color:$gray-800 !important;
}
}
&.card-minimal{
border: none;
box-shadow: none;
}
.card-header {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: none;
padding: 1.5rem 1.5rem 0;
background-color: transparent;
.card-title{
margin-bottom: 0;
}
.heading-elements,
.heading-elements-toggle{
background-color: inherit;
position: absolute;
top: 17px;
right: 21px;
cursor: pointer;
&.heading-top-elements{
// top: 0px;
.page-item{
display: inline-block
}
}
a{
padding: 0;
padding-left: 8px;
&.btn{
padding-top:6px;
padding-bottom:6px;
}
&[data-action="collapse"]{
i{
transition: all .25s ease-out;
display: inline-block;
}
&.rotate{
i{
transform: rotate(-180deg);
}
}
}
}
}
}
.card-footer{
border-top: 1px solid $gray-300;
}
}
// Card Column
.card-columns{
.card{
margin-bottom: $spacer * 2.2;
}
}
.text-white{
.card-text{
color: rgba($white,1);
}
.card-img-overlay{
.text-muted{
color: $white !important;
}
}
code{
background-color: rgba($white, 1);
}
.heading-elements{
i{
color: $white;
}
}
}
.card-head-inverse{
.heading-elements{
i{
color: $white;
}
}
color: $white;
}
.card-transparent{
background-color:transparent;
}
@include media-breakpoint-down(md) {
.heading-elements{
text-align: center;
.list-inline{
display: none;
}
&.visible{
top: 22px !important;
.list-inline{
background-color: $white;
display: block;
position: absolute;
top: 12px;
right: 15px;
}
display: block;
margin-top: 0;
top: 100%;
top: 50px;
height: auto;
left: 0px;
padding: 10px;
z-index: 997;
position: absolute;
width: 100%;
}
}
}
@include media-breakpoint-up(lg) {
.heading-elements-toggle{
display: none;
}
}
// overlay-img-card
.overlay-img-card{
.card-img-overlay,img{
max-height: 34.64rem;
}
}
// activity timeline for cards page
.activity-timeline{
// for left time line
&.timeline-left{
border-left: 2px solid $gray-300;
padding-left: 40px;
margin-left: 1.5rem;
li{
position: relative;
margin-bottom: 20px;
p{
margin-bottom: 0;
}
//icon styles
.timeline-icon{
position: absolute;
top: 0;
left: -4.3rem;
padding: .7rem;
display: flex;
align-items: center;
border-radius: 50%;
color: $white;
i{
vertical-align: sub;
}
}
}
}
// for right timeline
&.timeline-right{
border-right: 2px solid $gray-300;
padding-right: 40px;
margin-right: 1.5rem;
li{
position: relative;
margin-bottom: 20px;
text-align: right;
p{
margin-bottom: 0;
}
// icon styles
.timeline-icon{
position: absolute;
top: 0;
right: -4.3rem;
padding: .6rem .7rem;
border-radius: 50%;
color: $white;
i{
vertical-align: sub;
}
}
}
}
}
// IE Specific CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// img-fluid class
.card-body, .card-content{
min-height: 1px;
}
.profile-card-2{
.card{
.card-header{
display: block;
}
}
}
.profile-card-1,
.profile-card-3{
.card{
.avatar{
margin-left: auto;
margin-right: auto;
}
}
}
}

View File

@@ -0,0 +1,16 @@
// Inline code
code {
padding: .1rem .4rem;
font-size: 90%;
color: $code-color;
background-color: $kbd-bg;
@include border-radius($border-radius/2);
}
pre{
background-color : #f7f7f9;
code
{
background-color: transparent !important;
}
}

View File

@@ -0,0 +1,113 @@
// For Collaspe And Accordion
// For collapse-title
.accordion,
.collapse-bordered {
.collapse-title {
font-weight: 400;
font-size: 1.2rem;
}
.card-header{
cursor: pointer;
}
}
// For collapse title
.collapse-title{
color: inherit;
&:hover{
color: inherit;
}
}
// To add a border below collapse/accordion heading
.collapse-bordered {
.card:first-child {
border-top: 0;
}
.card:last-child {
border-bottom: 0;
}
.card {
margin-bottom: 0;
border-bottom: 1px solid rgba($pure-black, .04);
border-radius: 0;
.card-header {
padding: 1rem;
}
.card-body {
padding: 1rem;
line-height: 1.5;
}
}
}
.accordion {
.collapse-border-item {
&.card {
border: 1px solid rgba($pure-black, .1);
margin-bottom: 0;
&:first-child {
border-bottom: 0;
}
.card-header {
padding: 1rem;
}
.card-body {
padding: 1rem;
line-height: 1.5;
}
}
}
}
// For Collapse with shadow
.accordion-shadow {
box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1) ;
padding: .15rem .75rem;
border-radius: $border-radius;
.card {
&.open{
border-radius: 0.571rem;
margin: 10px 0;
border: 0;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
}
}
.card:first-child {
border-top-left-radius: 0.571rem;
border-top-right-radius: 0.571rem;
}
.card:last-child {
border-bottom-left-radius: 0.571rem;
border-bottom-right-radius: 0.571rem;
}
}
// For Collapse with border
.collapse-border {
border: 1px solid rgba($pure-black, .1);
border-radius: 0.5rem;
&+.collapse.show {
border: 1px solid rgba($pure-black, .1)
}
}
// For Collapse with margin
.collapse-margin {
margin-top: .71rem;
margin-bottom: .71rem !important;
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .05);
border-radius: 5px;
border-bottom: 0 solid transparent !important;
.card-header {
padding: 1rem;
border-radius: 5px;
}
.card-body {
padding: 1rem;
line-height: 1.5rem;
}
}

View File

@@ -0,0 +1,355 @@
// The dropdown menu
.dropdown{
// split warning dropdown toggle
&.show{
.btn-outline-warning,
.btn-outline-light{
&.dropdown-toggle{
color: $white;
}
}
}
.btn:not(.btn-sm):not(.btn-lg),
.btn:not(.btn-sm):not(.btn-lg).dropdown-toggle {
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
&.btn-round {
@include button-round-variant(2rem);
}
}
.btn.dropdown-toggle.dropdown-toggle-split {
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
border-left-color: rgba($white, 0.2) !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
[class*="btn-outline-"].dropdown-toggle.dropdown-toggle-split {
border-left: 0 !important;
&:active {
color: $white;
}
}
// dropdown menu
.dropdown-menu {
border: 1px solid rgba($pure-black, .05); // border opacity has been reduced to make it look same as vue's dropdown border [component page, list view page]
border-radius: $dropdown-border-radius;
transform: scale(1, 0);
box-shadow: 0 5px 25px rgba($pure-black, 0.1); // this according to vue version
// left: 5px; // it creates issue in navbar - notification dropdown
min-width: 8rem;
&::before {
content: '';
position: absolute;
top: -1px;
left: 1.2rem;
width: .75rem;
height: .75rem;
display: block;
background: $white;
transform: rotate(45deg) translate(-7px);
border-top: 1px solid rgba($pure-black, .1);
border-left: 1px solid rgba($pure-black, .1);
z-index: 10;
box-sizing: border-box;
}
&.dropdown-menu-right {
&::before {
right: .6rem;
left: auto;
}
}
.dropdown-header {
padding: .714rem 1.428rem;
margin-top: .714rem;
}
.dropdown-item {
padding: .5rem 1rem;
color: $body-color;
width: auto;
cursor: pointer;
&:hover{
background-color: $body-bg;
color: $primary;
}
&.active {
color: $white;
}
&:active {
background-color: transparent;
color: $dropdown-color;
}
}
}
i {
margin-right: 0.5rem;
}
// If don't won't dropdown/up arrow
&.no-arrow{
.dropdown-toggle{
&:after{
display: none;
}
i{
margin-right: 0;
}
}
}
}
// same padding for diffrent directions
.dropdown,
.dropup,
.dropright,
.dropleft{
position: relative;
.dropdown-menu{
.dropdown-item{
padding: .714rem 1.428rem;
}
}
}
.show {
>.dropdown-menu {
transform: scale(1, 1);
opacity: 1;
display: block;
}
}
.dropdown-toggle {
// changed icon caret
&::after {
border: none !important;
font-family: 'feather';
content: "\e842" !important;
position: relative;
top: 1px;
right: 0px;
left: .714rem;
padding: 0;
// left: 1.4rem;
margin: 0;
vertical-align: 0;
}
&.dropdown-toggle-split {
border-left: 1px solid rgba($white, 0.2);
&:after {
left: 0;
}
}
// hide default arrow to show custom icon DD
&.nav-hide-arrow {
&::after {
display: none;
}
}
// Prevent the focus on the dropdown toggle when closing dropdowns
&:focus {
outline: 0;
}
}
// Horizontal layout navigation menu dropdown arrow
.navbar-horizontal {
.dropdown-submenu {
.dropdown-toggle::after {
top: -9px !important;
margin-top: 1.25rem;
right: 1px;
}
}
}
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown menu with the parent.
/* .dropdown-menu-right {
left: auto !important; // Input group with dropdown issue for dropdown-menu-right
right: 0;
} */
// Color theme active & hover
.btn-secondary~.dropdown-menu {
.dropdown-item {
&.active,
&:hover {
background-color: darken($white, 20%);
}
}
}
// DropUp
.dropup {
position: relative;
.btn,
.btn.dropdown-toggle {
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
}
.btn.dropdown-toggle.dropdown-toggle-split {
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
border-color: rgba($white, 0.2) !important;
}
.dropdown-toggle {
// changed icon dropup caret
&::after {
content: "\e845" !important;
vertical-align: 0.05rem;
}
}
.dropdown-menu {
&::before {
content: '';
position: absolute;
bottom: -.714rem;
left: 1.214rem;
width: .714rem;
height: .714rem;
display: block;
background: $white;
transform: rotate(45deg) translate(-7px);
border-bottom: 1px solid rgba($pure-black, .1);
border-right: 1px solid rgba($pure-black, .1);
z-index: 10;
box-sizing: border-box;
}
&.dropdown-menu-right{
&::before{
left: auto;
right: .714rem;
}
}
}
.dropdown-submenu {
.dropdown-menu {
bottom: auto;
top: 0;
}
}
}
// DropLeft
.dropleft {
.btn,
.btn.dropdown-toggle {
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
}
.btn.dropdown-toggle.dropdown-toggle-split {
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
}
.dropdown-toggle {
// changed icon dropup caret
&::before {
border: none !important;
font-family: 'feather';
content: "\e843" !important;
}
}
.dropdown-menu {
&::before {
content: '';
position: absolute;
top: 1.285rem;
right: 0;
width: .714rem;
height: .714rem;
display: block;
background: $white;
transform: rotate(130deg) translate(-8px);
border-top: 1px solid rgba($pure-black, .1);
border-left: 1px solid rgba($pure-black, .1);
z-index: 10;
box-sizing: border-box;
}
}
}
// DropRight
.dropright {
.btn,
.btn.dropdown-toggle {
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
}
.btn.dropdown-toggle.dropdown-toggle-split {
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
}
.dropdown-toggle {
// changed icon dropup caret
&::after {
border: none !important;
font-family: 'feather';
content: "\e844" !important;
}
}
.dropdown-menu {
&::before {
content: '';
position: absolute;
top: 1.285rem;
left: -0.9rem;
width: .714rem;
height: .714rem;
display: block;
background: $white;
transform: rotate(140deg) translate(-9px);
border-bottom: 1px solid rgba($pure-black, .1);
border-right: 1px solid rgba($pure-black, .1);
z-index: 10;
box-sizing: border-box;
}
}
}
// Dropdown icon
.dropdown,
.dropup {
&.dropdown-icon-wrapper {
.dropdown-toggle {
&:after {
display: none;
}
}
.dropdown-menu {
min-width: auto;
.dropdown-item {
padding: 0.5rem 1.1rem;
cursor: pointer;
i {
font-size: 1.3rem;
color: $body-color;
}
&:hover{
color: $white;
}
}
}
}
}
// for white button
.btn.btn-white ~ .dropdown-menu {
.dropdown-item:not(.acitve):hover{
color: $body-color !important;
}
.dropdown-item.active{
color: $body-color;
}
}

View File

@@ -0,0 +1,825 @@
// placeholder spacific scss
.form-control{
&::placeholder{
font-size: 0.85rem;
color: rgba($black, 0.4);
transition: all .2s ease;
}
&:-ms-input-placeholder {
color: darken($body-bg, 20%);
}
&:focus{
&::placeholder{
transform: translate(5px);
transition: all .2s ease;
}
~.form-control-position{
i{
color: $primary;
}
}
}
}
/* Form specific Scss */
// Form Label Scscc
label{
color: darken($body-bg, 70%);
font-size: 0.85rem;
margin-bottom: 0;
padding-left: 0.2rem;
}
// Text area fontsize and line height
textarea.form-control{
line-height: 1.6rem;
font-size: 1rem;
}
// Form group Scscc
.form-group{
margin-bottom: 1.5rem;
}
// Form control Scscc
.form-control{
border: 1px solid darken($body-bg, 12%);
color: darken($body-bg, 60%);
}
// Used for Card - Check it and remove if not used
.form-section{
color: $gray-600;
line-height: 3rem;
margin-bottom: 20px;
border-bottom: 1px solid $gray-600;
i{
font-size: 20px;
margin-left: 5px;
margin-right: 10px;
}
}
/* .form-body{
overflow: hidden;
} */
// Used for Card - Check it and remove if not used
.form-actions{
border-top: 1px solid darken($body-bg, 10%);
padding: 20px 0;
margin-top: 20px;
&.filled{
background-color: $body-bg;
}
&.center{
text-align: center;
}
&.right{
text-align: right;
}
&.top{
border-top: 0;
border-bottom: 1px solid darken($body-bg, 10%);
margin-top: 0;
margin-bottom: 20px;
}
@include media-breakpoint-down(sm) {
.buttons-group{
float: left !important;
margin-bottom: 10px;
}
}
}
// Form-horizotnal layout
.form-horizontal{
.form-group{
@include media-breakpoint-up(sm) {
.label-control{
text-align: right;
}
}
}
}
// Form Control Large
.form-control.form-control-lg{
padding: 1rem;
&::placeholder{
font-size: 1.25rem;
}
}
// Form Control Small
.form-control.form-control-sm{
padding: 0.6rem;
&::placeholder{
font-size: 0.7rem;
}
}
// Custom-File-Input
.custom-file-label{
padding: ($custom-file-padding-y - 0.3) $custom-file-padding-x;
&::after{
padding: ($custom-file-padding-y - 0.3) $custom-file-padding-x;
height: auto;
}
}
// Select Inputs Specific SCSS
select.form-control {
&:not([multiple="multiple"]){
background-image:
url("../../app-assets/images/pages/arrow-down.png");
background-position:
calc(100% - 12px) 13px,
calc(100% - 20px) 13px,
100% 0;
background-size:
12px 12px,
10px 10px;
background-repeat: no-repeat;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 1.5rem;
}
}
// For customs-select remove double arrow
.custom-select{
-moz-appearance: none; // For firefox
-webkit-appearance: none; // for chorme
}
// input group addon
.input-group-addon {
background-color: #ECEFF1;
border-color: #BABFC7;
}
// Custom Checkbox
.custom-control-label::before, .custom-control-label::after{
width: 1.143rem;
height: 1.143rem;
top: 0.08rem;
}
// Custom-checkbox when not disabled and active
.custom-control-input:not(:disabled){
&:active ~ .custom-control-label{
&::before {
background-color: $primary;
border-color: $primary;
}
}
}
/* Floating label Group */
.form-label-group{
position: relative;
margin-bottom: 1.5rem;
// Form-Control-Large in Floating Label Group
.form-control-lg{
~ label{
font-size: 1.25rem;
padding: 1rem;
}
}
// Form-Control-Small in Floating Label Group
.form-control-sm{
~ label{
font-size: 0.7rem;
}
}
// Form-label
> label {
position: absolute;
top: 0;
left: 0;
display: block;
transition: all .25s ease-in-out;
padding: .6rem;
color: rgba($black, 0.4);
font-size: .85rem;
opacity: 0;
}
// form-input
> input, textarea{
padding: .6rem;
// from-input on focus change label color
&:focus, &:not(:active){
&:not(:placeholder-shown) ~ label {
color: rgba($primary, 1) !important;
transition: all .25s ease-in-out;
opacity: 1;
}
}
&:not(:focus){
&:not(:placeholder-shown) ~ label {
color: rgba($black, 0.4) !important;
}
}
// form-label after entering text in input box
&:not(:placeholder-shown) ~ label {
padding : .25rem 0;
font-size: .7rem;
top: -20px;
left: 3px;
}
}
// has-icon left with input
&.has-icon-left{
> label{
left: 36px;
}
}
}
/* VueSax Custom Checkbox */
.vs-checkbox-con{
position: relative;
display: flex;
align-items:center;
justify-content: flex-start;
margin: .25rem 0;
input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 200;
cursor: pointer;
top: 0;
&:checked{
~.vs-checkbox{
transform: rotate(0deg);
border-color: $primary;
.vs-checkbox--check{
transform: translate(0);
background-color: $primary;
.vs-icon{
transform: translate(0);
line-height: 1.2;
opacity: 1;
}
}
&.vs-checkbox-sm{
.vs-checkbox--check .vs-icon{
font-size: 0.75rem;
}
}
&.vs-checkbox-lg{
.vs-checkbox--check .vs-icon{
font-size: 1.2rem;
}
}
}
}
&:active:checked+.vs-checkbox{
.vs-checkbox--check{
transform: translate(3px);
background-color: $primary;
.vs-icon{
opacity: 1;
transform: translate(6px);
}
}
}
&:disabled{
cursor: default;
pointer-events: none;
+.vs-checkbox {
cursor: default;
opacity: .5;
}
}
}
.vs-checkbox{
cursor: pointer;
position: relative;
width: $vs-checkbox-box;
height: $vs-checkbox-box;
border-width: $vs-checkbox-radio-border-width;
border-style: solid;
border-color: $vs-checkbox-radio-border-color;
border-radius: 2px;
transform: rotate(-90deg);
transition: all .2s ease;
overflow: hidden;
margin-right: .5rem;
&.vs-checkbox-sm{
width: $vs-checkbox-box-sm;
height: $vs-checkbox-box-sm;
}
&.vs-checkbox-lg{
width: $vs-checkbox-box-lg;
height: $vs-checkbox-box-lg;
}
.vs-checkbox--check{
width: 100%;
height: 100%;
position: absolute;
left: 0;
transform: translate(100%);
transform-origin: right;
transition: all .2s ease;
z-index: 10;
.vs-icon{
display: flex;
justify-content: center;
align-items: center;
color: $white;
}
}
}
}
/* VueSax Custom Radio */
.vs-radio-con{
position: relative;
display: flex;
align-items:center;
justify-content: flex-start;
margin: .25rem 0;
input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
z-index: 200;
cursor: pointer;
&:checked{
~.vs-radio{
transform: rotate(0deg);
outline: 0;
.vs-radio--circle{
background: rgba($primary,1);
box-shadow: 0 3px 12px 0 rgba($primary,.4);
opacity: 1;
transform: scale(1);
}
.vs-radio--border{
opacity: 0;
transform: scale(0.3);
}
}
}
&:disabled{
cursor: default;
pointer-events: none;
+.vs-radio {
cursor: default;
opacity: .5;
}
}
&:active{
~.vs-radio{
transform: scale(1.1);
}
}
}
.vs-radio{
cursor: pointer;
position: relative;
width: $vs-radio-box;
height: $vs-radio-box;
transition: all .2s ease;
margin-right: .5rem;
&.vs-radio-sm{
width: $vs-radio-box-sm;
height: $vs-radio-box-sm;
}
&.vs-radio-lg{
width: $vs-radio-box-lg;
height: $vs-radio-box-lg;
}
.vs-radio--border, .vs-radio--circle {
width: 100%;
height: 100%;
position: absolute;
left: 0;
transition: all .25s ease;
top: 0;
border-radius: 50%;
}
.vs-radio--border{
background: transparent;
border: $vs-checkbox-radio-border-width solid $vs-checkbox-radio-border-color;
}
.vs-radio--circle{
opacity: 0;
transform: scale(0.1);
}
}
}
/* Switches */
.custom-switch{
padding-left: 0;
.custom-control-label{
height: 1.571rem;
width: 3.1rem;
padding: 0;
/* For bg color of switch*/
&::before{
border: none;
background-color: $switch-bg-color;
height: 1.571rem;
left: -.2857rem;
box-shadow: none !important;
transition: all .25s ease;
cursor: pointer;
user-select: none;
top: 0;
left: 0;
}
/*For Switch handle*/
&:after{
position: absolute;
top: 2px;
left: 2px;
box-shadow: none;
background-color: $switch-indicator-color;
transition:all .25s ease;
cursor: pointer;
user-select: none;
}
/*For Switch text*/
.switch-text-left,.switch-text-right,
.switch-icon-left,.switch-icon-right{
position: absolute;
top: 5px;
font-size: .7rem;
cursor: pointer;
user-select: none;
}
.switch-text-left,.switch-icon-left{
left: 7px;
color: $white
}
.switch-text-right,.switch-icon-right{
right: 7px
}
&:focus{
outline: 0;
}
}
/*For Switch label*/
.switch-label{
padding-left: 1rem;
}
// after its checked
.custom-control-input:checked ~ .custom-control-label::before{
box-shadow: none;
}
/*For Switch Handle Animation*/
.custom-control-input:checked ~ .custom-control-label::after{
transform: translateX(1.4rem);
}
.custom-control-input:not(:checked) ~ .custom-control-label{
.switch-text-left{
opacity: 0;
}
.switch-text-right{
opacity: 1;
}
}
.custom-control-input:checked ~ .custom-control-label{
.switch-text-right{
opacity: 0;
}
.switch-text-left{
opacity: 1;
}
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before{
background-color: $switch-bg-color;
}
// For Switch Sizes
// switch md
&.switch-md{
.custom-control-label{
width: $switch-md-size;
height: 1.571rem;
&::before{
width: $switch-md-size;
border: none;
background-color: $switch-bg-color;
height: 1.571rem;
left: -.2857rem;
box-shadow: none !important;
transition: all .25s ease;
cursor: pointer;
user-select: none;
}
&:after{
box-shadow: none;
background-color: $switch-indicator-color;
transition:all .25s ease;
cursor: pointer;
user-select: none;
position: absolute;
top: 2px;
left:-2px;
}
.switch-text-right,.switch-icon-right{
right: 9px;
}
.switch-text-left,.switch-icon-left{
left: 5px;
}
}
.custom-control-input:checked ~ .custom-control-label::after{
transform: translateX(2.3rem);
}
}
// switch lg
&.switch-lg{
.custom-control-label{
width: $switch-lg-size;
height: 1.571rem;
&::before{
width: $switch-lg-size;
border: none;
background-color: $switch-bg-color;
height: 1.571rem;
left: -.2857rem;
box-shadow: none !important;
transition: all .25s ease;
cursor: pointer;
user-select: none;
}
&:after{
position: absolute;
top: 2px;
left: -2px;
box-shadow: none;
background-color: $switch-indicator-color;
transition:all .25s ease;
cursor: pointer;
user-select: none;
}
.switch-text-right,.switch-icon-right{
right: 10px;
}
}
.custom-control-input:checked ~ .custom-control-label::after{
transform: translateX(3.8rem);
}
}
}
/* Textarea with Counter */
.counter-value{
background-color: $primary;
color: $white;
padding: 1px 6px;
font-size: .6rem;
border-radius: 0 0 5px 5px;
margin-right: 1rem;
}
/* Input box with icon divider */
.form-group{
&.input-divider-left{
.form-control-position{
i{
padding: 0.2rem 0.5rem;
border-right: 1px solid darken($body-bg, 12%);
}
}
}
&.input-divider-right{
.form-control-position{
i{
padding: 0.2rem 0.5rem;
border-left: 1px solid darken($body-bg, 12%);
}
}
}
}
/* input-groups-lg and input-groups-sm */
.input-group-lg, .input-group-sm{
.form-control{
padding: 0.7rem;
}
}
/* Bootstrap touchspin */
.bootstrap-touchspin{
&.input-group{
width: 8.4rem;
align-items: center;
.form-control{
padding: 5px;
height: auto;
border: 0;
background-color: $body-bg;
border-radius: 5px !important;
text-align: center;
font-weight: 500;
&:focus{
z-index: 1;
box-shadow: none;
}
}
}
.bootstrap-touchspin-injected{
margin: 0 !important;
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
padding: 0;
min-width: 22px;
min-height: 22px;
border-radius: 5px !important;
position: relative;
i{
font-size: 0.8rem;
position: relative;
top: -1px;
}
}
.bootstrap-touchspin-down{
left: 12px;
}
.bootstrap-touchspin-up{
right: 12px;
}
}
// Disabled Touchspin
&.disabled-touchspin{
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
background-color: rgba(0,0,0,.5) !important;
cursor: default;
opacity: .5;
}
}
// Touchspin Large
&.input-group-lg{
width: 9.375rem;
.touchspin{
&.form-control{
height: auto !important;
}
}
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
i{
font-size: 1rem;
}
}
}
// Touchspin Small
&.input-group-sm{
width: 6.25rem;
.touchspin{
&.form-control{
height: auto !important;
}
}
.bootstrap-touchspin-injected{
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
min-width: 16px;
min-height: 16px;
padding-top: 2.2px;
i{
font-size: 0.6rem;
}
}
}
}
}
.btn.disabled-max-min{
background-color: rgba(0,0,0,.5) !important;
cursor: default;
}
/* Number Type Input Box Scss for - Remove arrow on hover */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
}
/* Number Type Input Box Scss for Touchspin - Remove arrow for firefox */
.bootstrap-touchspin{
&.input-group{
input[type=number] {-moz-appearance: textfield;}
}
}
// IE Specific CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// floating Label Group
.form-label-group{
label {
display: none;
}
}
// Bootstrap Select
select.form-control {
&:not([multiple="multiple"]){
background: none;
}
}
// Custom-File-Input
.custom-file-label{
&::after{
padding: 1.34rem 0.7rem 1.25rem;
}
}
}
// Date & Time Picker - Form Control Bg color
.picker__input{
&.form-control {
background-color: $white;
}
}
// input Groups specific SCSS
.input-group {
.form-control{
height: auto;
}
.input-group-prepend, .input-group-append {
// dropdown arrow position
.dropdown-toggle{
&::after{
left: 0;
}
}
// checkbox and radio margin
.vs-checkbox-con, .vs-checkbox, .vs-radio-con, .vs-radio{
margin: 0;
}
}
&.input-group-lg{
.form-control{
&::placeholder{
font-size: 1.25rem;
}
}
.input-group-prepend, .input-group-append{
.btn{
line-height: 1.3;
font-size: 1.3rem;
}
}
}
&.input-group-sm{
.form-control{
&::placeholder{
font-size: 0.7rem;
}
}
}
}

View File

@@ -0,0 +1,86 @@
// .bs-example{
// [class^="col-"]{
// span{
// padding: .75rem;
// background-color: rgba(86, 61, 124, 0.15);
// border: 1px solid rgba(86, 61, 124, 0.2);
// display: block;
// }
// margin-bottom: 1rem;
// }
// .row + .row {
// margin-top: 1rem;
// }
// }
//
// Grid examples
//
.bd-example-row {
.row + .row {
margin-top: 1rem;
}
.row {
> .col,
> [class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
}
.flex-items-top,
.flex-items-middle,
.flex-items-bottom {
min-height: 6rem;
background-color: rgba(255,0,0,.1);
}
}
.bd-example-row-flex-cols .row {
min-height: 10rem;
background-color: rgba(255,0,0,.1);
}
.bd-highlight {
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .15);
}
// Grid mixins
.example-container {
width: 800px;
@include make-container();
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}

View File

@@ -0,0 +1,88 @@
/* ===============================================================================================
File Name: list-group.scss
Description: Contain list item, list group related extended SCSS.
----------------------------------------------------------------------------------------------
Item Name: Vuesax HTML Admin Template
Version: 1.1
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
================================================================================================*/
// Inline list style with pipeline seperator
ul.list-inline {
li {
display: inline-block;
}
&.list-inline-pipe {
>li+li:before {
content: ' | ';
padding-right: 2px;
}
}
}
// bootstrap list group
.list-group {
.list-group-item {
line-height: 1.5;
&.active {
&:hover {
background-color: $primary;
}
&:focus{
color: $body-color;
outline: 0;
&:hover{
color: $white;
}
}
}
&:hover {
background-color: $body-bg;
}
i {
font-size: 1.2rem;
font-weight: 100;
position: relative;
top: 2px;
}
&:not(.active):focus:active{
color: inherit;
}
}
.list-group-item-action{
&:active{
background-color: $primary;
color: $white;
}
&:focus{
background-color: $body-bg;
outline: 0;
}
}
}
// for drag and drop border radius on selected
.list-group-item.gu-mirror{
border-radius: 0;
}
// Inline users list
.users-list{
li+li {
margin-left: -.785rem;
}
li{
img{
border: 2px solid $white;
box-shadow: 0px 2px 10px 0px rgba($gray-600, 0.3)
}
.badge{
color: $black;
}
}
}

View File

@@ -0,0 +1,25 @@
.media-list{
.media{
padding: 1.25rem;
width: 100%;
margin-top: 0;
.media-left{
padding-right: 1rem
}
.media-right{
padding-left: 1rem;
}
}
a.media{
color: $gray-600 !important;
}
}
.media-bordered{
.media{
border-top: 1px solid $custom-border-color;
&:first-child{
border-top: 0;
}
}
}

View File

@@ -0,0 +1,21 @@
// ===============================================================================================
// File Name: mixins.scss
// Description: Extended mixins file with new mixins features.
// ----------------------------------------------------------------------------------------------
// Item Name: Vuesax HTML Admin Template
// Version: 1.1
// Author: PIXINVENT
// Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================
// // Components
@import "mixins/_buttons";
@import "mixins/_label";
@import "mixins/_label";
@import "mixins/_type"; //(NEW)
// // // Components
@import "mixins/_buttons";
@import "mixins/_navs";
@import "mixins/_forms";

View File

@@ -0,0 +1,142 @@
// Modals
.modal {
// Modal Header
.modal-header {
background-color: $body-bg;
border-radius: .42rem;
padding: .8rem;
border-bottom: none;
// close button
.close {
padding: .2rem .62rem;
box-shadow: 0 5px 20px 0 rgba($pure-black, .1);
border-radius: .357rem;
background: $white;
opacity: 1;
transition: all .23s ease .1s;
position: relative;
transform: translate(8px, -2px);
span{
font-weight: 400;
font-size: 2rem;
color: $primary;
}
// For hover effect of close btn
&:hover,
&:focus,&:active {
opacity: 1;
outline: none;
transform: translate(5px, 3px);
box-shadow: none;
}
}
&[class*="bg-"]{
color: $white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
.modal-title {
color: $white;
}
}
// Themed Modals
&.bg-primary {
.close {
span {
color: $primary;
}
}
}
&.bg-success {
.close {
span {
color: $success;
}
}
}
&.bg-info {
.close {
span {
color: $info;
}
}
}
&.bg-danger {
.close {
span {
color: $danger;
}
}
}
&.bg-warning {
.close {
span {
color: $warning;
}
}
}
&.bg-dark {
.close {
span {
color: $dark;
}
}
}
}
// Modal Content
.modal-content {
border: none;
// overflow: unset; updated to "visible" as close icon is not visible in IE
overflow: visible;
box-shadow: 0 5px 20px 0 rgba($pure-black, .1);
}
// Modal Footer
.modal-footer {
border-color: rgba($pure-black, .05);
}
}
// Modal SM
.modal-sm {
max-width: 400px;
}
// Modal XS
.modal-xs {
max-width: 300px;
}
// Modal XL
.modal-xl {
max-width: 94%;
margin-left: 3%;
margin-right: 3%;
}
// To remove Max-width of XS Modal in Small Screen
@media(max-width:576px) {
.modal {
padding-right: 1rem;
padding-left: 1rem;
.modal-xs,
.modal-sm {
max-width: unset;
}
}
}

View File

@@ -0,0 +1,265 @@
// Component nav and nav/pill tabs
.nav {
border-radius: 0.25rem;
// for component navs
// to wrap border around nav component
&.wrap-border {
border: 1px solid $nav-component-border-color;
li.nav-header {
margin: 0 0.5rem;
}
li.nav-item,
div {
padding: 2px .714rem;
}
}
// Square Border
&.square-border {
border-radius: 0;
.nav-item {
.nav-link.active {
border-radius: 0;
}
}
}
// for main menu toggle lock
.modern-nav-toggle {
padding: 1.571rem 0;
}
// nav pills
&.nav-pills {
margin-bottom: 1rem;
// nav item of nav pill
.nav-item {
.nav-link {
border-radius: .357rem;
padding: .2rem 1rem;
padding-top: .3rem;
font-size: 0.98rem;
margin-right: 0.5rem;
color: $pure-black;
&.active {
color: $white;
}
&.disabled {
color: $secondary;
}
&.dropdown-toggle::after {
top: 1px;
left: 1px;
}
}
&.dropdown {
&.show{
.nav-link {
color: $white;
}
.dropdown-item{
&.active{
&:hover{
color: $primary;
}
}
}
}
}
}
// Justified Pills
&.nav-justified {
@include nav-justified;
@include nav-tabs-justified;
.nav-link {
display: block;
&.active {
border: none;
&:hover,
&:focus {
border: none;
}
}
}
}
// Nav Active Bordered Pill
&.nav-active-bordered-pill {
.nav-item {
a {
&.nav-link {
&.active {
border: 1px solid $primary;
border-radius: 0.25rem;
color: $primary;
background-color: $white;
}
}
}
}
}
}
// Basic Nav Tabs
&.nav-tabs {
box-shadow: -1px 11px 17px -10px rgba($pure-black, .04);
border: none;
margin-bottom: 1rem;
position: relative;
border-radius: 0;
// Basic nav item
.nav-item {
position: relative;
.nav-link {
color: $pure-black;
font-size: 0.95rem;
border: none;
min-width: auto;
font-weight: 450;
padding: .61rem .635rem;
border-radius: 0;
&.active {
border: none;
position: relative;
color: $primary;
transition: all .2s ease;
background-color: $white;
transform: translateY(-2px);
&:after{
content: attr(data-before);
height: 2px;
width: 100%;
left: 0;
position: absolute;
bottom: 0;
top: 100%;
background: linear-gradient(30deg, rgba($primary, 1), rgba($primary, .5)) !important;
box-shadow: 0 0 8px 0 rgba($primary, .5) !important;
transform: translateY(0px);
transition: all .2s linear;
}
}
&.dropdown-toggle {
&::after {
top: 1px;
left: 1px;
}
}
&.disabled {
color: $secondary;
}
}
}
// Justified Tabs
&.nav-justified {
@include nav-justified;
@include nav-tabs-justified;
.nav-item {
a.nav-link {
display: block;
border-radius: 0;
&.active {
border: none;
background-color: $white;
}
&:hover {
border-color: transparent;
}
}
}
}
}
}
// Nav Tabs Vertical
.nav-vertical {
overflow: hidden;
.nav.nav-tabs {
// nav item styles for vertical nav tabs
.nav-item {
.nav-link {
border: none;
margin-bottom: 0;
&.active {
border: none;
border-radius: 0;
&:after {
transform: rotate(90deg);
left: -1rem;
bottom: 100%;
top: 1rem;
width: 2.14rem;
}
}
&:hover {
border-right: none;
}
}
}
// vertical nav left tabs
&.nav-left {
float: left;
display: table;
margin-right: 1rem;
~.tab-content {
.tab-pane {
display: none;
background-color: $white;
overflow-y: auto;
padding-left: 1rem;
&.active {
display: block;
}
}
}
}
// vertical right nav tabs
&.nav-right {
float: right;
display: table;
margin-left: 1rem;
.nav-item {
.nav-link {
&.active {
&:after {
left: 2.4rem;
}
}
}
}
~.tab-content {
.tab-pane {
display: none;
background-color: $white;
overflow-y: auto;
padding-right: 1rem;
&.active {
display: block;
}
}
}
}
}
}

View File

@@ -0,0 +1,972 @@
/* ===============================================================================================
File Name: navbar.scss
Description: Contain header navigation bar, vertical main navigation bar and
horiznotal main navigation bar related SCSS.
----------------------------------------------------------------------------------------------
Item Name: Vuesax HTML Admin Template
Version: 1.1
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
================================================================================================*/
%extend_hamburger_color {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: $white;
}
}
@function set-navbar-text-color($color) {
@if (lightness($color) > 50) {
@return $white; // Lighter backgorund, return dark color
} @else {
@return $black; // Darker background, return light color
}
}
@mixin fullNav {
.navbar-header {
width: 100% !important;
padding: 0.5rem 1rem;
position: relative;
.menu-toggle {
top: 2px;
position: relative;
}
.open-navbar-container i {
font-size: 1.8rem;
}
.navbar-brand {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
}
&.navbar-with-menu {
.navbar-container {
width: 100%;
display: table;
margin: 0;
height: auto;
}
}
}
// Background overlay for scroll
.header-navbar-shadow {
display: none;
}
// Fixed Navbar
.navbar-floating {
.header-navbar-shadow {
display: block;
background: linear-gradient(180deg, hsla(0, 0%, 97.3%, .95) 44%, hsla(0, 0%, 97.3%, .46) 73%, hsla(0, 0%, 100%, 0));
padding-top: 2.2rem;
background-repeat: repeat;
width: 100%;
height: 102px;
position: fixed;
top: 0;
z-index: 11;
}
}
.header-navbar {
padding: 0px;
min-height: $navbar-height - .5;
font-family: $font-family-monospace;
transition: 300ms ease all;
background: linear-gradient(180deg, hsla(0, 0%, 97.3%, .95) 44%, hsla(0, 0%, 97.3%, .46) 73%, hsla(0, 0%, 100%, 0));
z-index: 1000;
&.fixed-top {
left: $menu-expanded-width;
}
&[class*="bg-"]{
.navbar-nav{
.nav-item{
a{
color: set-navbar-text-color($theme-dark-text-color) !important;
i,
span{
color: set-navbar-text-color($theme-dark-text-color) !important;
}
}
}
.search-input{
.input,
.search-list .auto-suggestion span{
color: $body-color !important;
}
}
}
}
&.floating-nav {
margin: 1.3rem #{$content-padding} 0;
border-radius: 0.5rem;
position: fixed;
width: calc(100% - calc(#{$content-padding} * 2) - #{$menu-expanded-width});
z-index: 11;
right: 0;
}
&.navbar-static-top {
background: transparent;
box-shadow: none !important; // remove this if removing "menu-shadow" class
}
.navbar-wrapper {
width: 100%;
}
// add border to navbar
&.navbar-border {
border-bottom: 1px solid $custom-border-color;
}
&.navbar-dark.navbar-border {
border-bottom: 1px solid #8596B5;
}
// add shadow to navbar
&.navbar-shadow {
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
}
// hide top horizontal menu drop-down arrow
.nav-link {
&.dropdown-toggle::after {
display: none;
}
}
.navbar-container ul.nav li.dropdown-language {
padding-right: 0;
.selected-language {
font-size: 0.97rem;
letter-spacing: -0.25px;
font-weight: 500;
}
}
.navbar-container {
padding-left: $spacer;
// height: $navbar-height;
transition: 300ms ease all;
background: inherit;
margin-left: 0;
.bookmark-wrapper{
ul.nav {
li {
>a.nav-link {
padding: 1.4rem 0.5rem 1.35rem;
i{
&:hover{
color: $primary;
}
}
}
}
}
}
// for bookmark z-index
.bookmark-input{
z-index: 1;
}
ul.nav {
li {
&.dropdown .dropdown-menu {
top: 48px;
// top: 90%;
}
.badge {
padding: 0.42em 0.6em 0.25rem;
&.badge-up {
position: absolute;
top: 12px;
right: -2px;
}
}
&.dropdown-language {
>a.nav-link {
padding: 1.75rem 0.5rem;
}
}
>a.nav-link {
color: $body-color;
padding: 1.6rem 0.5rem 1.35rem 1rem;
i.flag-icon {
margin-right: 0.5rem;
}
}
&.dropdown-user {
.dropdown-menu-right {
right: 12px;
left: auto;
padding: 0.5rem;
.dropdown-item {
padding: 10px;
&:hover,
&:active {
background: $primary;
color: $white;
}
}
}
}
a.dropdown-user-link {
padding: 0.7rem 1rem;
display: flex;
align-items: center;
.user-name {
display: inline-block;
margin-bottom: 0.435rem;
margin-left: 0.2rem;
}
.user-status {
font-size: smaller;
}
img{
box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);
}
}
a.menu-toggle {
// padding: 1.1rem 0.8rem 1rem 1rem;
padding: 1.34rem 0.22rem 1.35rem 0;
i {
font-size: 1.75rem;
}
}
a.nav-link-label {
padding: 1.6rem 0rem 1.35rem 0.8rem;
}
a.dropdown-user-link {
.user-nav {
display: flex;
flex-direction: column;
align-items: flex-end;
float: left;
margin-right: $spacer - 0.2;
}
}
a.nav-link-search,
a.nav-link-expand {
// padding: 1.4rem 1rem 1.3rem 1rem;
}
div.input-group {
padding: 0.7rem 1rem;
}
i.ficon {
font-size: 1.5rem;
color: $body-color;
&:hover{
color: $primary;
}
}
.media-list {
max-height: 18.2rem;
}
.scrollable-container {
position: relative;
}
}
}
//Navbar notification css
.dropdown-menu-media {
width: 26rem;
.media-list {
.media {
padding: 1rem;
border: none;
border-bottom: 1px solid $gray-300;
&:hover {
background: $body-bg;
}
.media-meta {
color: $body-color;
}
}
a:last-of-type{
.media{
border-bottom: none;
}
}
}
.dropdown-menu-header {
border-bottom: 1px solid $gray-300;
}
.dropdown-menu-footer {
a {
padding: 0.3rem;
border-top: 1px solid $gray-300;
}
}
}
}
&.navbar-without-menu {
.navbar-container {
margin-left: 0;
}
}
&.navbar-with-menu {
.navbar-container {}
}
.nav-item+.nav-item {
margin-left: 0rem;
}
/* For sm screen*/
@include media-breakpoint-down(sm) {
@include fullNav;
}
}
/* Modern menu For md screen*/
@include media-breakpoint-down(md) {
[data-menu="vertical-menu-modern"] {
.header-navbar {
@include fullNav;
}
.navbar-dark,
.navbar-semi-dark {
.navbar-header .navbar-nav .nav-link {
color: $white;
}
.navbar-container .navbar-nav .nav-link {
color: $gray-600;
}
}
.navbar-light {
.navbar-header .navbar-nav .nav-link {
color: $gray-600;
}
}
}
}
// Navbar colors
.navbar-light {
background: $white;
&.navbar-horizontal {
background: $white;
}
.navbar-nav {
li {
line-height: 1;
}
.active {
&.nav-link {
background-color: rgba(0, 0, 0, 0.03);
}
}
.disabled {
&.nav-link {
color: $nav-link-disabled-color;
}
}
}
}
.navbar-dark {
background: $gray-600;
.navbar-brand {
color: $white !important;
}
&.navbar-horizontal {
background: $gray-600;
}
@extend %extend_hamburger_color;
.nav-search {
.form-control,
.btn-secondary {
color: $white;
background: $gray-600;
}
}
.navbar-nav {
li {
line-height: 1;
}
.active {
&.nav-link {
background-color: rgba(255, 255, 255, 0.05);
}
}
.disabled {
&.nav-link {
color: $gray-300;
}
}
}
}
.navbar-semi-dark {
.navbar-header {
background: $gray-600;
.brand-text {
color: $white;
}
}
background:$white;
.navbar-nav {
li {
line-height: 1;
}
.nav-link {
color: $gray-600;
}
.active {
&.nav-link {
background-color: rgba(0, 0, 0, 0.03);
}
}
.disabled {
&.nav-link {
color: $nav-link-disabled-color;
}
}
}
}
.navbar-semi-light {
.navbar-header {
background: $white;
.brand-text {
color: $gray-600;
}
}
background: $gray-600;
.navbar-nav {
li {
line-height: 1;
}
.nav-link {
color: $white;
}
.active {
&.nav-link {
background-color: rgba(0, 0, 0, 0.03);
}
}
.disabled {
&.nav-link {
color: $nav-link-disabled-color;
}
}
}
}
@-moz-document url-prefix() {
ul {
li {
a {
.children-in {
position: relative;
right: 3px;
top: -14px;
}
}
}
}
}
.navbar-menu-icon {
span {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: $gray-600;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
}
.navbar-menu-icon span:nth-child(1) {
top: 0px;
}
.navbar-menu-icon span:nth-child(2) {
top: 10px;
}
.navbar-menu-icon span:nth-child(3) {
top: 20px;
}
.navbar-menu-icon.show span:nth-child(1) {
top: 10px;
transform: rotate(135deg);
}
.navbar-menu-icon.show span:nth-child(2) {
opacity: 0;
left: -60px;
}
.navbar-menu-icon.show span:nth-child(3) {
top: 10px;
transform: rotate(-135deg);
}
// Media queries for device support
// =========================================
@include media-breakpoint-down(sm) {
.header-navbar {
// generic navbar dropdown specific
.navbar-nav {
.show {
position: static;
}
.open-navbar-container {
padding-top: 0.625rem;
}
}
.navbar-container {
.show {
.dropdown-menu {
right: 0;
left: 0 !important;
float: none;
width: auto;
margin-top: 0;
max-height: 400px;
overflow-x: hidden;
}
}
ul.nav {
li {
&.nav-item i {
margin-right: 0.2rem;
}
a.dropdown-user-link {
padding: 0.8rem 0.6rem;
}
.dropdown-toggle::after {
margin-right: 0;
margin-left: -2px;
}
}
}
}
}
// dark navbar
.navbar-dark,
.navbar-semi-dark {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: $white;
}
.navbar-header {
.navbar-nav {
.nav-link {
color: $white;
}
}
}
.navbar-container {
.navbar-nav {
.nav-link {
color: $gray-600;
}
}
}
}
// light navbar
.navbar-light,
.navbar-semi-light {
.navbar-header {
.navbar-nav {
.nav-link {
color: $gray-600;
}
}
}
.navbar-container {
.navbar-nav {
.nav-link {
color: $gray-600;
}
}
}
}
}
.headroom {
will-change: transform;
transition: transform 200ms linear;
}
.headroom--pinned-top {
transform: translateY(0%);
}
.headroom--unpinned-top {
transform: translateY(-100%);
}
.headroom--pinned-bottom {
transform: translateY(0%);
}
.headroom--unpinned-bottom {
transform: translateY(100%);
}
@include media-breakpoint-down(xs) {
.header-navbar {
.navbar-container ul.nav li .selected-language {
display: none;
}
}
}
// header navbar when floating nav
body{
&[data-col="1-column"]{
.header-navbar {
&.floating-nav {
width: calc(100% - calc(#{$content-padding} * 2));
}
}
}
}
// header navbar when floating nav
@media (min-width: 1200px) and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
body{
&:not([data-col="1-columns"]){
.header-navbar {
&.floating-nav {
width: calc(100% - 60px - #{$menu-expanded-width});
}
}
}
}
}
// For Medium and down: iPad support for navbr
@include media-breakpoint-down(lg) {
.header-navbar {
.navbar-container {
ul.nav {
li {
&.dropdown-language {
>a.nav-link {
padding: 1.75rem 0.5rem;
}
}
a.dropdown-user-link {
padding: 0.7rem 1.23rem;
}
a.nav-link-search {
padding: 1.6rem 0 1.35rem 1rem;
}
.dropdown-toggle::after {
margin-right: 0;
margin-left: -2px;
}
}
}
}
}
}
@mixin extend_mobile_specific($menu_height) {
.header-navbar {
.navbar-container {
.show {
.dropdown-menu {
max-height: $menu_height;
}
}
}
}
}
@mixin responsive_sub_nav {
//For responsive sub nav
#navbar-mobile.navbar-collapse {
.navbar-nav {
margin: 0;
flex-flow: row wrap;
.dropdown-menu {
position: absolute;
}
.nav-item {
float: left;
}
}
}
}
@media (max-width: 767px) {
@include responsive_sub_nav;
}
@include media-breakpoint-down(md) {
@include responsive_sub_nav;
}
/* ----------- iPhone 5, 5S iPhone 6----------- */
/* Landscape */
@media only screen and (min-device-width: 26.78em) and (max-device-width: 47.64em) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
@include extend_mobile_specific(180px);
}
/* ----------- iPhone 6+ ----------- */
/* Landscape */
@media only screen and (min-device-width: 29.57em) and (max-device-width: 52.57em) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
@include extend_mobile_specific(280px);
}
/*----------------------------- For Navbar Component -------------------------*/
#navbar-component {
.navbar {
&.floating-nav{
border-radius: .5rem;
}
z-index: auto;
// navbar dark color
.navbar-nav{
.nav-item{
a{
color: inherit !important;
}
}
}
&.header-navbar.navbar-dark{
.navbar-nav{
.nav-link{
color: $white;
i{
color: $white;
}
}
}
}
.navbar-nav{
.dropdown-language,
.dropdown-notification,
.dropdown-user {
&.show{
position: relative;
}
.dropdown-menu{
&.show{
position: absolute;
right: 0;
left: auto !important;
}
}
}
}
// for font size of navbar toggler
&.navbar-dark,
&.navbar-light {
.navbar-toggler {
font-size: 1.2rem;
&:focus {
outline: 0;
}
}
}
}
// to remove border radius for collapsed navbar
#navbar-collapsed{
.navbar{
border-radius: 0;
}
}
}
// for alignment of language dropdown and name
@media(min-width: 992px){
#navbar-component{
.navbar{
.navbar-container{
background: inherit;
}
}
.nav{
.dropdown-language{
float: right;
}
}
}
}
// background color
@media(max-width: 992px){
#navbar-component{
.navbar{
.navbar-container{
background: inherit;
.navbar-nav{
flex-direction: row;
}
}
}
}
}
// for width of navbar in fixed-top
@media(max-width: 1200px){
.header-navbar {
&.fixed-top {
left: 0;
}
}
}
// for notification dropdown of navbar component page
@media (max-width: 768px){
#navbar-component{
.navbar{
.navbar-nav{
.dropdown-notification{
&.show{
position: static;
}
}
}
}
}
}
@include media-breakpoint-down(xs) {
.header-navbar.floating-nav {
width: calc(100% - 2.4rem) !important;
margin-left: 1.2rem;
margin-right: 1.2rem;
}
.content.app-content .content-area-wrapper{
margin-left: 1.2rem !important;
margin-right: 1.2rem !important;
}
}
// 1-column Layout - Back Link in Center
@media(max-width: 992px){
.navbar-container{
#navbar-mobile{
.nav-back{
margin-top: 5px;
}
}
}
}

View File

@@ -0,0 +1,176 @@
// Pagination
.pagination {
// default look for page item, firsy and last item
.page-item {
border-radius: 5rem;
&.prev-item,
&.next-item,
&.first,
&.last,
&.prev,
&.next {
.page-link {
color: $primary;
}
&.disabled {
.page-link {
color: $secondary;
}
}
}
// prev and last item styles
&.prev-item {
margin-right: .3571rem;
.page-link {
background-color: $pagination-bg-color;
padding: $pagination-action-padding-y $pagination-action-padding-x;
border-radius: 50%;
i {
font-size: 1.2rem;
position: relative;
top: 1px;
}
&:hover {
background: $primary;
color: $white;
}
}
&~.page-item:nth-child(2){
&.active{
border-top-left-radius: 1.428rem;
border-bottom-left-radius: 1.428rem;
.page-link {
border-top-left-radius: 5rem !important;
border-bottom-left-radius: 5rem !important;
}
}
}
&~.page-item:nth-last-child(-n+2){
&.active{
border-top-right-radius: 1.428rem;
border-bottom-right-radius: 1.428rem;
.page-link {
border-top-right-radius: 5rem !important;
border-bottom-right-radius: 5rem !important;
}
}
}
}
&.next-item {
margin-left: .3571rem;
.page-link {
background-color: $pagination-bg-color;
padding: $pagination-action-padding-y $pagination-action-padding-x;
border-radius: 50%;
i {
font-size: 1.2rem;
position: relative;
top: 1px;
}
&:hover {
background: $primary;
color: $white;
}
}
}
// page link customization
.page-link {
border: none;
margin: 0;
color: rgba($pure-black, .6);
background-color: $pagination-bg-color;
margin-left: 0;
font-size: 1rem;
font-weight: 700;
i {
position: relative;
top: 1px;
}
&:focus {
box-shadow: none;
}
&:hover {
color: $primary;
}
}
// for active page item
&.active {
background-color: $pagination-bg-color;
border-radius: 0;
.page-link {
z-index: 3;
border-radius: 5rem;
background-color: $primary;
color: $white;
transform: scale(1.05);
}
}
// if you dont want seprated look
&:first-child:not(.prev-item){
&.active{
border-top-left-radius: 1.428rem;
border-bottom-left-radius: 1.428rem;
.page-link{
border-radius: 5rem;
}
}
.page-link {
border-top-left-radius: 1.428rem;
border-bottom-left-radius: 1.428rem;
}
}
&:last-child:not(.next-item) {
&.active{
border-top-right-radius: 1.428rem;
border-bottom-right-radius: 1.428rem;
.page-link{
border-radius: 5rem;
}
}
.page-link {
border-top-right-radius: 1.428rem;
border-bottom-right-radius: 1.428rem;
}
}
}
// For Pagination lg
&.pagination-lg {
.page-item {
.page-link {
font-size: $pagination-font-size-lg;
transform: scale(1);
}
}
}
}

View File

@@ -0,0 +1,17 @@
// Popovers
// popover header color and border-radius
.popover {
z-index: 10;
.popover-header {
color: $white;
border: none;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
&.bs-popover-bottom{
.arrow:after{
border-bottom-color: $primary;
}
}
}

View File

@@ -0,0 +1,53 @@
/*=========================================================================================
File Name: progress.scss
Description: Extended bootstrap progress bar scss.
----------------------------------------------------------------------------------------
Item Name: Vuesax HTML Admin Template
Version: 1.1
Author: PIXINVENT
Author URL: http://www.themeforest.net/user/pixinvent
----------------------------------------------------------------------------------------
Modifiers: `progress-lg`
`progress-md`
`progress-sm`
`progress-xs`
==========================================================================================*/
// Size Modifier
// ========================================================================
.progress {
margin-bottom: 3rem;
// margin for last progress bar
&:last-child {
margin-bottom: 1rem;
}
// progress bar sizes
&.progress-xl {
height: $progress-size-xl;
}
&.progress-lg {
height: $progress-size-lg;
}
&.progress-md {
height: $progress-size-md;
}
&.progress-sm {
height: $progress-size-sm;
}
// progress bar radius
.progress-bar {
border-radius: $progress-border-radius;
}
}

View File

@@ -0,0 +1,5 @@
a {
&:focus {
outline: none
}
}

View File

@@ -0,0 +1,73 @@
// ================================================================================================
// File Name: tables.scss
// Description: Tables pages custom scss
// ----------------------------------------------------------------------------------------------
// Item Name: Vuesax HTML Admin Template
// Version: 1.1
// Author: PIXINVENT
// Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================
// table-white-space
.table-white-space {
th, td {
white-space: nowrap;
}
}
// table th, td padding
.table {
thead th{
vertical-align: top;
}
th, td {
padding: 1rem;
vertical-align: middle;
}
//table heading font-size
th{
font-size: $table-th-font-size;
}
}
// Table - inverse
.table-inverse {
color: $white;
background-color: $info;
}
// Table - hover animation
.table-hover-animation{
background-color: $body-bg;
thead{
th{
border-top: 2px solid $table-border-color;
border-bottom: 0;
background-color: $white;
}
}
th, td {
border: 0;
}
tbody{
tr{
transition: all 0.25s ease;
background-color: $white;
&:hover{
transform: translateY(-4px);
}
}
}
}
// IE Specific CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.table-hover-animation{
tr{
&:hover{
border-bottom-color: $table-border-color;
}
}
}
}

View File

@@ -0,0 +1,87 @@
// Toasts
// toast container customization
.toast-bs-container{
z-index: 1040;
position: fixed;
top: 0;
left: 0;
width: 100%;
.toast-position{
position: relative;
top: 0;
right: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
.toast.show{
// display: block;
opacity: 1;
z-index: 1030;
}
}
}
// placement of toast on body
.toast-placement{
position: static;
top: 0;
.toast{
position: fixed;
top: 0;
z-index: 1030;
}
}
// default toast customization
.toast {
display: none;
background-color: rgba($white,1);
margin-top: .75rem;
.toast-header{
.close{
&:focus,&:active{
outline: none;
}
}
}
}
// toast on show
.toast.show.toast-wrapper{
position: static;
}
// translucent toast opacity and display
.toast.toast-translucent {
opacity: 1;
display: block;
}
// toast header img size
.toast-header{
img{
width: 35px;
height: 24px;
}
}
// IE Specific CSS
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
.toast-bs-container {
position: fixed !important;
left: 74% !important;
}
}
_:-ms-lang(x),
.toast-bs-container {
position: fixed !important;
left: 74% !important;
}

View File

@@ -0,0 +1,89 @@
// ================================================================================================
// File Name: type.scss
// Description: Type pages custom scss
// ----------------------------------------------------------------------------------------------
// Item Name: Vuesax HTML Admin Template
// Version: 1.1
// Author: PIXINVENT
// Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================
//small
.font-small-1{
font-size: 0.7rem !important;
}
.font-small-2{
font-size: 0.8rem !important;
}
.font-small-3{
font-size: 0.9rem !important;
}
//medium
.font-medium-1{
font-size: 1.1rem !important;
}
.font-medium-2{
font-size: 1.2rem !important;
}
.font-medium-3{
font-size: 1.3rem !important;
}
.font-medium-4{
font-size: 1.4rem !important;
}
.font-medium-5{
font-size: 1.5rem !important;
}
//large
.font-large-1{
font-size: 2rem !important;
}
.font-large-2{
font-size: 3rem !important;
}
.font-large-3{
font-size: 4rem !important;
}
.font-large-4{
font-size: 5rem !important;
}
.font-large-5{
font-size: 6rem !important;
}
// Text styling
// -------------------------
// Font weights
.text-bold-300 {
@include font-weight(light);
}
.text-bold-400 {
@include font-weight(book);
}
.text-bold-500 {
@include font-weight(medium);
}
.text-bold-600 {
@include font-weight(semi-bold);
}
.text-bold-700 {
@include font-weight(bold);
}
// Font style
.text-italic {
font-style: italic;
}
.text-highlight {
padding: 4px 6px;
}
// //list Item
// ol, ul, dl{
// li{
// line-height: 12;
// }
// }

View File

@@ -0,0 +1,91 @@
.icon-bg-circle{
color: $white;
padding: 0.5rem;
border-radius: 50%;
}
.icon-left{
margin-right:0.5rem;
}
.icon-right{
margin-right:0.5rem;
}
.icon-spin {
display: inline-block;
animation: spin 1s infinite linear;
}
.blockOverlay{
z-index: 1050 !important;
}
.blockElement, .blockPage{
z-index: 1051 !important;
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.hidden{
display: none;
visibility: hidden;
}
//Disabled
a{
&.disabled{
// color: $dropdown-link-disabled-color !important;
}
&:hover {
cursor: pointer;
}
}
.round{@include border-radius(1.5rem);}
.square{@include border-radius($btn-border-radius-square);}
.icon-line-height{
line-height : 1.5rem !important;
}
//Tables
//--------------------------
.table-middle{
td{
vertical-align: middle;
}
}
// Spinner classes
.spinner {
display: inline-block;
-webkit-animation: spin 1s linear infinite;
-o-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

View File

@@ -0,0 +1,14 @@
@mixin button-square-variant($border) {
@include border-radius($border);
}
@mixin button-round-variant($border) {
@include border-radius($border);
}
// Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
// line-height: $line-height-base;
@include border-radius($border-radius);
}

View File

@@ -0,0 +1,7 @@
@mixin input-field-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
height: $input-height;
padding: $padding-vertical $padding-horizontal;
font-size: $font-size;
line-height: $line-height-base;
border-radius: $border-radius;
}

View File

@@ -0,0 +1,13 @@
// tags
@mixin badge-variant($color) {
background-color: $color;
&.badge-glow{
box-shadow: 0px 0px 10px $color;
}
&[href] {
@include hover-focus {
background-color: darken($color, 10%);
}
}
}

View File

@@ -0,0 +1,50 @@
// Justified nav links
// -------------------------
@mixin nav-justified {
width: 100%;
.nav-item {
float: none;
}
.nav-link {
text-align: center;
margin-bottom: 5px;
}
> .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@include media-breakpoint-up(sm) {
.nav-item {
display: block;
width: 1%;
}
.nav-link {
margin-bottom: 0;
}
}
}
// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
.nav-link {
// Override margin from .nav-tabs
margin-right: 0;
border-radius: $border-radius;
}
@include media-breakpoint-up(sm) {
.nav-link.active,
.nav-link.active:hover,
.nav-link.active:focus {
border-bottom-color: transparent;//$nav-tabs-justified-active-link-border-color;
}
}
}

View File

@@ -0,0 +1,31 @@
// Font weight mixins
// ------------------
@mixin font-weight($weight) {
$weights: (
thin: 100,
extra-light: 200,
ultra-light: 200,
light: 300,
normal: 400,
book: 400,
regular: 400,
medium: 500,
semi-bold: 600,
demi-bold: 600,
bold: 700,
extra-bold: 800,
ultra-bold: 900,
heavy: 900,
black: 900,
ultra: 900,
ultra-black: 900,
extra-ultra: 900
);
$output: $weight;
@if map-has-key($weights, $weight) {
$output: map-get($weights, $weight);
}
font-weight: $output;
}