TRF Certest first commit
This commit is contained in:
@@ -0,0 +1,47 @@
|
||||
|
||||
// Body
|
||||
$body-bg: #f5f8fa;
|
||||
$primary: #179970;
|
||||
$bg-lighter: #f8fbfc;
|
||||
|
||||
// Typography
|
||||
//$font-family-base: "Roboto", sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
//$headings-font-family: "Poppins";
|
||||
|
||||
// Buttons
|
||||
$btn-padding-y: .75rem !default;
|
||||
$btn-padding-x: 1.25rem !default;
|
||||
$btn-line-height: 1.125;
|
||||
|
||||
// Forms
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$label-margin-bottom: .25rem !default;
|
||||
|
||||
// Breadcrumbs
|
||||
$breadcrumb-bg: none;
|
||||
$breadcrumb-padding-y: 0;
|
||||
$breadcrumb-padding-x: 3px;
|
||||
|
||||
// Tables
|
||||
$table-accent-bg: #f5f8fa;
|
||||
|
||||
// Cards
|
||||
$card-spacer-x: 1.75rem !default;
|
||||
$card-spacer-y: 1.2rem !default;
|
||||
$card-cap-bg: #ffffff;
|
||||
$card-border-color: #e9ecef !default;
|
||||
|
||||
// Tabs
|
||||
$nav-tabs-link-active-color: $primary;
|
||||
$nav-tabs-link-active-bg: unset;
|
||||
//$nav-tabs-link-active-border-color: none;
|
||||
//$nav-tabs-link-hover-border-color: unset;
|
||||
|
||||
// List Groups
|
||||
$list-group-border-color: $body-bg;
|
||||
$list-group-hover-bg: $body-bg;
|
||||
|
||||
// Nav
|
||||
$nav-link-padding-x: 0.5rem;
|
||||
@@ -0,0 +1,51 @@
|
||||
|
||||
// Fonts
|
||||
// Here you can import any font you want and update the _variables.scss file
|
||||
// to make use of those fonts across the application.
|
||||
//@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
|
||||
//@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700");
|
||||
|
||||
// Variables
|
||||
@import "variables";
|
||||
|
||||
// Bootstrap
|
||||
@import '../../node_modules/bootstrap/scss/bootstrap';
|
||||
|
||||
// Custom Vanguard styles
|
||||
@import "components/general";
|
||||
@import "components/card";
|
||||
@import "components/button";
|
||||
@import "components/avatar";
|
||||
@import "components/input";
|
||||
@import "components/list-group";
|
||||
@import "components/nav-tabs";
|
||||
@import "components/navbar";
|
||||
@import "components/sidebar";
|
||||
@import "components/switch";
|
||||
@import "components/sweet-alert";
|
||||
@import "components/table";
|
||||
@import "components/util";
|
||||
@import "components/datepicker";
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.sidebar:not(.expanded) {
|
||||
margin-left: -250px;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1600px) {
|
||||
|
||||
.widget {
|
||||
height: 128px;
|
||||
|
||||
.row .text-muted {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
word-wrap: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
.avatar-source {
|
||||
text-align: center;
|
||||
}
|
||||
.avatar-source img {
|
||||
width: 120px;
|
||||
}
|
||||
.avatar-source img:hover,
|
||||
.avatar-source div:hover {
|
||||
background-color: #fff;
|
||||
border: 2px solid $primary;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#avatar.croppie-container {
|
||||
padding: 35px 30px 30px;
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
.btn-rounded {
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
.btn-avatar {
|
||||
padding: 10px 0;
|
||||
border: 1px solid #dfdfdf;
|
||||
margin-top: 10px;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.btn-avatar:hover {
|
||||
background-color: #000;
|
||||
border-color: #000;
|
||||
opacity: 0.8;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
padding: 6px 0;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 1.428571429;
|
||||
font-size: 65px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 3px 5px;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.btn-upload {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-upload input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
font-size: 100px;
|
||||
text-align: right;
|
||||
filter: alpha(opacity=0);
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
background: white;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Social Buttons
|
||||
.btn-facebook {
|
||||
color: #4267b2;
|
||||
|
||||
&:hover {
|
||||
color: darken(#4267b2, 10%)
|
||||
}
|
||||
}
|
||||
.btn-twitter {
|
||||
color: #1ba1f3;
|
||||
|
||||
&:hover {
|
||||
color: darken(#1ba1f3, 10%)
|
||||
}
|
||||
}
|
||||
.btn-google {
|
||||
color: #de564a;
|
||||
|
||||
&:hover {
|
||||
color: darken(#de564a, 10%)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.card {
|
||||
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #ffffff;
|
||||
border: none;
|
||||
|
||||
h5.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 1.025rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h5.card-title.card-title-bold {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,160 @@
|
||||
.datepicker {
|
||||
width: 265px;
|
||||
padding: 10px;
|
||||
|
||||
&.datepicker-orient-top {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td, th {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
@include border-radius(3px);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
&.prev,
|
||||
&.datepicker-switch,
|
||||
&.next {
|
||||
font-weight: 500;
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dow {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr > td {
|
||||
&.day {
|
||||
|
||||
&.today {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border: solid transparent;
|
||||
border-width: 0 0 7px 7px;
|
||||
border-bottom-color: #ffffff;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
tr > th {
|
||||
&.today,
|
||||
&.clear {
|
||||
@include border-radius(3px);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-daterange {
|
||||
.input-group-addon {
|
||||
min-width: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin datepicker-skin($color) {
|
||||
.datepicker {
|
||||
thead {
|
||||
th {
|
||||
&.prev,
|
||||
&.datepicker-switch,
|
||||
&.next {
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr > td {
|
||||
&.day {
|
||||
&:hover {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover,
|
||||
&.active,
|
||||
&.active:hover {
|
||||
background-color: $color !important;
|
||||
background-image: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.today {
|
||||
background-color: lighten($color, 10%);
|
||||
color: #ffffff;
|
||||
|
||||
&:before {
|
||||
border-bottom-color: #ffffff;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.range {
|
||||
background: lighten($color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
span.month, span.year {
|
||||
&.focused,
|
||||
&:hover {
|
||||
background-color: lighten($color, 5%) !important;
|
||||
background-image: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.active:hover,
|
||||
&.active {
|
||||
background-color: $color !important;
|
||||
background-image: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tfoot {
|
||||
tr > th {
|
||||
&.today,
|
||||
&.clear {
|
||||
|
||||
&:hover {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.datepicker-inline {
|
||||
border: 1px solid lighten($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include datepicker-skin($primary);
|
||||
@@ -0,0 +1,17 @@
|
||||
[role="main"] {
|
||||
padding-top: 95px;
|
||||
}
|
||||
|
||||
.content-page {
|
||||
margin-left: 250px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-collapsed .content-page {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.input-group-prepend .btn, .input-group-append .btn {
|
||||
padding: 0.35rem 1rem;
|
||||
border: 1px solid $gray-400;
|
||||
}
|
||||
|
||||
|
||||
.form-control.input-solid:not([disabled]) {
|
||||
background-color: $light;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
|
||||
.list-group.list-group-borderless {
|
||||
.list-group-item {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group.list-group-striped {
|
||||
.list-group-item:nth-of-type(odd) {
|
||||
background-color: $table-accent-bg;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-flush .list-group-item:first-of-type {
|
||||
border-top: none;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
|
||||
&.active {
|
||||
border-bottom: 2px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
.navbar-brand-wrapper {
|
||||
background: #ffffff;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 70px;
|
||||
position: relative;
|
||||
width: 250px;
|
||||
z-index: 1;
|
||||
|
||||
.logo-lg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.logo-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed .navbar-brand-wrapper {
|
||||
width: 80px;
|
||||
|
||||
.logo-lg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-top: 2px solid $primary;
|
||||
background: #ffffff;
|
||||
|
||||
.navbar-toggler {
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: .75rem 1rem;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
|
||||
|
||||
&.collapse.show,
|
||||
&.collapsing {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
box-shadow: none;
|
||||
border-top: 1px solid $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
border-right: 1px solid #e2e5ec;
|
||||
font-weight: 400;
|
||||
padding-right: 20px;
|
||||
margin-right: 15px;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
$sidebar-bg-color: #30353e;
|
||||
|
||||
.sidebar {
|
||||
top: 70px;
|
||||
width: 250px;
|
||||
min-width: 250px;
|
||||
z-index: 10;
|
||||
background: $sidebar-bg-color;
|
||||
bottom: 0;
|
||||
margin-top: 0;
|
||||
padding-bottom: 30px;
|
||||
position: fixed;
|
||||
box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02);
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
|
||||
transition: all 0.3s;
|
||||
|
||||
.user-box {
|
||||
ul li a {
|
||||
color: $gray-500;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
h5 a {
|
||||
color: $gray-500;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: 400;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link:hover {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background-color: lighten($sidebar-bg-color, 5%);
|
||||
}
|
||||
|
||||
.sub-menu li {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
ul li a i {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
line-height: 17px;
|
||||
margin-right: 13px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* closed state */
|
||||
.nav-item .nav-link[aria-expanded="false"]::after {
|
||||
content: "\f0d7";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
display: inline;
|
||||
text-align: right;
|
||||
padding-left: 5px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
/* open state */
|
||||
.nav-item .nav-link[aria-expanded="true"] {
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
.nav-item .nav-link[aria-expanded="true"]::after {
|
||||
content: "\f0d8";
|
||||
font-family: "Font Awesome 5 Free";
|
||||
display: inline;
|
||||
text-align: right;
|
||||
padding-left: 5px;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-collapsed .sidebar {
|
||||
width: 80px;
|
||||
min-width: 80px;
|
||||
|
||||
.sub-menu li {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
padding-top: 1rem;
|
||||
overflow: inherit !important;
|
||||
}
|
||||
|
||||
.nav > li.nav-item {
|
||||
width: 50px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul li a i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-bg-color;
|
||||
|
||||
.nav-link span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& > a {
|
||||
position: relative;
|
||||
width: 260px;
|
||||
background-color: $sidebar-bg-color;
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
span {
|
||||
padding-left: 30px;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
left: 60px;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: auto !important;
|
||||
overflow: hidden;
|
||||
background-color: $sidebar-bg-color;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
|
||||
li a {
|
||||
padding-left: 20px;
|
||||
|
||||
span {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item .nav-link[aria-expanded="true"]::after,
|
||||
.nav-item .nav-link[aria-expanded="false"]::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||||
.sidebar-sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.swal-button--confirm {
|
||||
background-color: $danger;
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
$custom-control-description-disabled-color: #868e96;
|
||||
|
||||
//
|
||||
// These variables can be used to customize the switch component.
|
||||
//
|
||||
$switch-height: calc(#{$input-height} * .8) !default;
|
||||
$switch-height-sm: calc(#{$input-height-sm} * .8) !default;
|
||||
$switch-height-lg: calc(#{$input-height-lg} * .8) !default;
|
||||
$switch-border-radius: $switch-height !default;
|
||||
$switch-bg: $gray-300 !default;
|
||||
$switch-checked-bg: map-get($theme-colors, 'primary') !default;
|
||||
$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
|
||||
$switch-disabled-color: $custom-control-description-disabled-color !default;
|
||||
$switch-thumb-bg: $white !default;
|
||||
$switch-thumb-border-radius: 50% !default;
|
||||
$switch-thumb-padding: 2px !default;
|
||||
$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
|
||||
$switch-transition: .2s all !default;
|
||||
|
||||
.switch {
|
||||
font-size: $font-size-base;
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
background: none;
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
clip-path: inset(50%);
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
+ label {
|
||||
position: relative;
|
||||
min-width: calc(#{$switch-height} * 2);
|
||||
border-radius: $switch-border-radius;
|
||||
height: $switch-height;
|
||||
line-height: $switch-height;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
text-indent: calc(calc(#{$switch-height} * 2) + .5rem);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ label::before,
|
||||
+ label::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(#{$switch-height} * 2);
|
||||
bottom: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
+ label::before {
|
||||
right: 0;
|
||||
background-color: $switch-bg;
|
||||
border-radius: $switch-border-radius;
|
||||
transition: $switch-transition;
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
top: $switch-thumb-padding;
|
||||
left: $switch-thumb-padding;
|
||||
width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
|
||||
height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
|
||||
border-radius: $switch-thumb-border-radius;
|
||||
background-color: $switch-thumb-bg;
|
||||
transition: $switch-transition;
|
||||
}
|
||||
|
||||
&:checked + label::before {
|
||||
background-color: $switch-checked-bg;
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
margin-left: $switch-height;
|
||||
}
|
||||
|
||||
&:focus + label::before {
|
||||
outline: none;
|
||||
box-shadow: $switch-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:disabled + label {
|
||||
color: $switch-disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:disabled + label::before {
|
||||
background-color: $switch-disabled-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Small variation
|
||||
&.switch-sm {
|
||||
font-size: $font-size-sm;
|
||||
|
||||
input {
|
||||
+ label {
|
||||
min-width: calc(#{$switch-height-sm} * 2);
|
||||
height: $switch-height-sm;
|
||||
line-height: $switch-height-sm;
|
||||
text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem);
|
||||
}
|
||||
|
||||
+ label::before {
|
||||
width: calc(#{$switch-height-sm} * 2);
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
|
||||
height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
margin-left: $switch-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Large variation
|
||||
&.switch-lg {
|
||||
font-size: $font-size-lg;
|
||||
|
||||
input {
|
||||
+ label {
|
||||
min-width: calc(#{$switch-height-lg} * 2);
|
||||
height: $switch-height-lg;
|
||||
line-height: $switch-height-lg;
|
||||
text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem);
|
||||
}
|
||||
|
||||
+ label::before {
|
||||
width: calc(#{$switch-height-lg} * 2);
|
||||
}
|
||||
|
||||
+ label::after {
|
||||
width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
|
||||
height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
|
||||
}
|
||||
|
||||
&:checked + label::after {
|
||||
margin-left: $switch-height-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .switch {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
.table thead th {
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.table-striped tr {
|
||||
td:first-of-type { border-radius: 5px 0 0 5px; }
|
||||
td:last-of-type { border-radius: 0 5px 5px 0; }
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.bg-lighter {
|
||||
background-color: $bg-lighter;
|
||||
}
|
||||
|
||||
.border-bottom-light {
|
||||
border-bottom: 1px solid $body-bg;
|
||||
}
|
||||
|
||||
.no-decoration {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.my-10p {
|
||||
margin-top: 10%;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.min-width-200 {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.min-width-150 {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.min-width-100 {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.min-width-80 {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.line-height-1 {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05) !important;
|
||||
}
|
||||
Reference in New Issue
Block a user