This commit is contained in:
@ -0,0 +1,71 @@
|
||||
.activity-feed {
|
||||
padding: 15px;
|
||||
list-style: none;
|
||||
.feed-item {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
border-left: 2px solid #e4e8eb;
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -7px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #177dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin feed-item-state($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
.feed-item-default::after {
|
||||
@include feed-item-state($dark-color);
|
||||
}
|
||||
|
||||
.feed-item-primary::after {
|
||||
@include feed-item-state($primary-color);
|
||||
}
|
||||
|
||||
.feed-item-secondary::after {
|
||||
@include feed-item-state($secondary-color);
|
||||
}
|
||||
|
||||
.feed-item-success::after {
|
||||
@include feed-item-state($success-color);
|
||||
}
|
||||
|
||||
.feed-item-danger::after {
|
||||
@include feed-item-state($danger-color);
|
||||
}
|
||||
|
||||
.feed-item-info::after {
|
||||
@include feed-item-state($info-color);
|
||||
}
|
||||
|
||||
.feed-item-warning::after {
|
||||
@include feed-item-state($warning-color);
|
||||
}
|
||||
|
||||
.activity-feed .feed-item {
|
||||
.date {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
color: #8c96a3;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
}
|
||||
.text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
/* Alert */
|
||||
|
||||
.alert {
|
||||
border: 0px;
|
||||
position: relative;
|
||||
padding: .95rem 1.25rem;
|
||||
border-radius: 1px;
|
||||
color: inherit;
|
||||
background-color: $white-color;
|
||||
-webkit-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
-moz-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
[data-notify="icon"] {
|
||||
display: block;
|
||||
&::before {
|
||||
line-height: 35px;
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
[data-notify="title"] {
|
||||
display: block;
|
||||
color: #2b2b2b;
|
||||
font-weight: $font-weight-extrabold;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
[data-notify="message"] {
|
||||
font-size: 13px;
|
||||
color: #908e8e;
|
||||
}
|
||||
.close {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
top: 12px !important;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert States */
|
||||
|
||||
@mixin alert-state($color){
|
||||
border-left: 4px solid $color;
|
||||
[data-notify="icon"]:before {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-default {
|
||||
@include alert-state($dark-color);
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
@include alert-state($primary-color);
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
@include alert-state($secondary-color);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
@include alert-state($info-color);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
@include alert-state($success-color);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@include alert-state($warning-color);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
@include alert-state($danger-color);
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
/* Avatar */
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $secondary-color;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-online::before, .avatar-offline::before, .avatar-away::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.avatar-online::before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
|
||||
.avatar-offline::before {
|
||||
background-color: #97a2b1;
|
||||
}
|
||||
|
||||
|
||||
.avatar-away::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xs {
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
.border {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: 3.75rem;
|
||||
height: 3.75rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
.border {
|
||||
border-width: 4px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xxl {
|
||||
width: 5.125rem;
|
||||
height: 5.125rem;
|
||||
.border {
|
||||
border-width: 6px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.avatar-xxl {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
.border {
|
||||
border-width: 4px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 42px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
.avatar + .avatar {
|
||||
margin-left: -.75rem;
|
||||
}
|
||||
.avatar-xs + .avatar-xs {
|
||||
margin-left: -.40625rem;
|
||||
}
|
||||
.avatar-sm + .avatar-sm {
|
||||
margin-left: -.625rem;
|
||||
}
|
||||
.avatar-lg + .avatar-lg {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.avatar-xl + .avatar-xl {
|
||||
margin-left: -1.28125rem;
|
||||
}
|
||||
.avatar:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: #202940 !important;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/* Badge */
|
||||
|
||||
.badge {
|
||||
border-radius: 50px;
|
||||
margin-left: auto;
|
||||
line-height: 1;
|
||||
padding: 6px 10px;
|
||||
vertical-align: middle;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: 11px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
[class*="badge-"]:not(.badge-count) {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.badge-default {
|
||||
background: $dark-color;
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: $secondary-color;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: $success-color;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: $warning-color;
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
/* Breadcrumb */
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
width: auto;
|
||||
border-left: 1px solid #efefef;
|
||||
margin-left: 25px;
|
||||
padding-left: 25px;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
height: 100%;
|
||||
li {
|
||||
display: inline-block;
|
||||
a {
|
||||
color: $body-text-color;
|
||||
font-size: 13px;
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.separator {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,307 @@
|
||||
/* Button */
|
||||
|
||||
.btn {
|
||||
padding: .65rem 1.4rem;
|
||||
font-size: 14px;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
&:hover, &:focus {
|
||||
opacity: 0.9;
|
||||
|
||||
}
|
||||
.btn-label{
|
||||
display: inline-block;
|
||||
i {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
margin-left: -2px;
|
||||
line-height: 0;
|
||||
margin-top: -2.5px;
|
||||
}
|
||||
&.just-icon i{
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-lg {
|
||||
font-size: 15px;
|
||||
border-radius: 3px;
|
||||
padding: 12.5px 27.5px;
|
||||
font-weight: $font-weight-normal;
|
||||
.btn-label{
|
||||
i {
|
||||
font-size: 27px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
margin-left: -7px;
|
||||
line-height: 0;
|
||||
margin-top: -2.5px;
|
||||
}
|
||||
&.just-icon i{
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 11px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: 10px;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.disabled:hover, &:hover:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Icon */
|
||||
.btn-icon{
|
||||
font-size: .9375rem;
|
||||
height: 2.5125rem;
|
||||
line-height: normal;
|
||||
min-width: 2.5125rem;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 2.5125rem;
|
||||
&.btn-lg {
|
||||
height: 2.75rem;
|
||||
min-width: 2.75rem;
|
||||
width: 2.75rem;
|
||||
}
|
||||
&.btn-sm {
|
||||
height: 2rem;
|
||||
min-width: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
&.btn-xs {
|
||||
height: 1.6875rem;
|
||||
min-width: 1.6875rem;
|
||||
width: 1.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button States */
|
||||
.btn-white {
|
||||
background: $white-color !important;
|
||||
color: $dark-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $white-color !important;
|
||||
color: $dark-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: $dark-color !important;
|
||||
color: $white-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $dark-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: $secondary-color !important;
|
||||
border-color: $secondary-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $secondary-color !important;
|
||||
border-color: $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: $info-color !important;
|
||||
border-color: $info-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $info-color !important;
|
||||
border-color: $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $success-color !important;
|
||||
border-color: $success-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $success-color !important;
|
||||
border-color: $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: $warning-color !important;
|
||||
border-color: $warning-color !important;
|
||||
color: $white-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $warning-color !important;
|
||||
border-color: $warning-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: $danger-color !important;
|
||||
border-color: $danger-color !important;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: $danger-color !important;
|
||||
border-color: $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light{
|
||||
background: $white-color !important;
|
||||
border-color: transparent;
|
||||
&:hover, &:focus, &:disabled {
|
||||
background: #ebecec !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropdown-card-header {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 15px;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Border */
|
||||
@mixin btn-border($color) {
|
||||
color: $color !important;
|
||||
border: 1px solid $color !important;
|
||||
}
|
||||
|
||||
.btn-border {
|
||||
background: $transparent-bg !important;
|
||||
&:hover, &:focus {
|
||||
background: $transparent-bg !important;
|
||||
}
|
||||
&.btn-white {
|
||||
@include btn-border($white-color);
|
||||
}
|
||||
&.btn-default {
|
||||
@include btn-border($dark-color);
|
||||
}
|
||||
&.btn-primary {
|
||||
@include btn-border($primary-color);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include btn-border($secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include btn-border($info-color);
|
||||
}
|
||||
&.btn-success {
|
||||
@include btn-border($success-color);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include btn-border($warning-color);
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
@include btn-border($danger-color);
|
||||
}
|
||||
&.btn-light {
|
||||
border: 1px solid #efefef;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Rounded */
|
||||
.btn-round {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
|
||||
/* Button Link */
|
||||
@mixin btn-link($color) {
|
||||
color: $color !important;
|
||||
&:hover {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
border: 0 !important;
|
||||
background: $transparent-bg !important;
|
||||
&:hover, &:focus {
|
||||
text-decoration: underline !important;
|
||||
background: $transparent-bg !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&.btn-default {
|
||||
@include btn-link($dark-color);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
@include btn-link($primary-color);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
@include btn-link($secondary-color);
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
@include btn-link($info-color);
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
@include btn-link($success-color);
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
@include btn-link($warning-color);
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
@include btn-link($danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toggle-on.btn {
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.toggle-handle {
|
||||
background: $white-color !important;
|
||||
&:hover {
|
||||
background: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-round .toggle-handle {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 60px !important;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-no-radius {
|
||||
border-radius: 0px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,50 @@
|
||||
/* Chart Circle */
|
||||
.chart-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.circles-text {
|
||||
font-size: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chart JS Container */
|
||||
.chart-container {
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* HTML legend */
|
||||
.html-legend {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.html-legend li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 6px;
|
||||
color: #8d9498;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.html-legend li.hidden {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.html-legend li span {
|
||||
border-radius: 15px;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
width: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.jqstooltip{
|
||||
box-sizing: content-box;
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
.colorinput {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colorinput-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.colorinput-color {
|
||||
display: inline-block;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
&:before {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
transition: .3s opacity;
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center (center / 50%) 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.colorinput-input {
|
||||
&:checked ~ .colorinput-color:before {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus ~ .colorinput-color {
|
||||
border-color: #467fcf;
|
||||
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,334 @@
|
||||
/* Dropdown */
|
||||
.dropdown-menu {
|
||||
border: 0px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.15) !important;
|
||||
padding-bottom: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Notification dropdown */
|
||||
|
||||
.dropdown-title {
|
||||
border-bottom: 1px solid $grey-color;
|
||||
color: #444444;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 12px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notif-box, .messages-notif-box {
|
||||
width: 280px;
|
||||
padding: 0 !important;
|
||||
.notif-center a {
|
||||
display: flex;
|
||||
color: #4d585f;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: #fafafa;
|
||||
transition: all .2s;
|
||||
}
|
||||
.notif-icon {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.notif-img {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.notif-icon {
|
||||
&.notif-default, &.notif-primary, &.notif-secondary, &.notif-info, &.notif-success, &.notif-warning, &.notif-danger {
|
||||
color: $white-color !important;
|
||||
}
|
||||
&.notif-default {
|
||||
background: $dark-color !important;
|
||||
}
|
||||
&.notif-primary {
|
||||
background: $primary-color !important;
|
||||
}
|
||||
&.notif-secondary {
|
||||
background: $secondary-color !important;
|
||||
}
|
||||
&.notif-info {
|
||||
background: $info-color !important;
|
||||
}
|
||||
&.notif-success {
|
||||
background: $success-color !important;
|
||||
}
|
||||
&.notif-warning {
|
||||
background: $warning-color !important;
|
||||
}
|
||||
&.notif-danger {
|
||||
background: $danger-color !important;
|
||||
}
|
||||
i {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.notif-content {
|
||||
padding: 10px 15px 10px 0;
|
||||
}
|
||||
.message-content {
|
||||
padding: 7px 15px 10px 0;
|
||||
}
|
||||
.notif-content {
|
||||
.subject {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.block {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
.time {
|
||||
color: #7d8c95;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.see-all {
|
||||
border-top: 1px solid $grey-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notif-box {
|
||||
.notif-scroll {
|
||||
max-height: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-notif-box {
|
||||
.message-notif-scroll {
|
||||
max-height: 250px;
|
||||
}
|
||||
.notif-center a {
|
||||
border-bottom: 1px solid $grey-color;
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.notif-content {
|
||||
padding: 7px 15px 7px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* User Dropdown */
|
||||
|
||||
.dropdown-user {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
padding: .25rem 1rem;
|
||||
.u-text {
|
||||
padding: 0 10px;
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1;
|
||||
}
|
||||
.text-muted {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: .255em;
|
||||
vertical-align: .255em;
|
||||
content: "";
|
||||
border-top: .3em solid;
|
||||
border-right: .3em solid $transparent-bg;
|
||||
border-bottom: 0;
|
||||
border-left: .3em solid $transparent-bg;
|
||||
}
|
||||
|
||||
/* Quick Actions Dropdown */
|
||||
.quick-actions {
|
||||
width: 350px;
|
||||
padding: 0px;
|
||||
&:after {
|
||||
border-bottom-color: $primary-color !important;
|
||||
}
|
||||
.quick-actions-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.quick-actions-items {
|
||||
padding: 15px 7.5px;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.quick-actions-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 7.5px 7.5px;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
color: #1572E8;
|
||||
border: 1px solid $grey-color;
|
||||
border-bottom: 1px solid $grey-color;
|
||||
border-radius: 3px;
|
||||
transition: all .2s;
|
||||
&:hover {
|
||||
background: #fdfdff;
|
||||
color: $primary-color;
|
||||
box-shadow: 3px 3px 10px #f7f1f1
|
||||
}
|
||||
i {
|
||||
color: #7d8c95;
|
||||
font-size: 27px;
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
@mixin quick-actions-state($color) {
|
||||
&:after {
|
||||
border-bottom-color: $color !important;
|
||||
}
|
||||
.quick-actions-header {
|
||||
background: $color;
|
||||
}
|
||||
.quick-actions-item {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&.quick-actions-default {
|
||||
@include quick-actions-state($dark-color);
|
||||
}
|
||||
&.quick-actions-primary {
|
||||
@include quick-actions-state($primary-color);
|
||||
}
|
||||
&.quick-actions-secondary {
|
||||
@include quick-actions-state($secondary-color);
|
||||
}
|
||||
&.quick-actions-info {
|
||||
@include quick-actions-state($info-color);
|
||||
}
|
||||
&.quick-actions-warning {
|
||||
@include quick-actions-state($warning-color);
|
||||
}
|
||||
&.quick-actions-success {
|
||||
@include quick-actions-state($success-color);
|
||||
}
|
||||
&.quick-actions-danger {
|
||||
@include quick-actions-state($danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
|
||||
%max-height-notif {
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
.notif-box {
|
||||
.notif-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-notif-box {
|
||||
.message-notif-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-user {
|
||||
.dropdown-user-scroll {
|
||||
max-height: calc(100vh - 132px);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
.quick-actions-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 991px){
|
||||
.navbar-header {
|
||||
.dropdown-menu {
|
||||
margin-top: 13px;
|
||||
&:after {
|
||||
border-bottom: 8px solid #fff;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
content: "";
|
||||
right: 10px;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
.gutters-0 {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-xs {
|
||||
margin-right: -0.25rem;
|
||||
margin-left: -0.25rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-sm {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-lg {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-xl {
|
||||
margin-right: -1.5rem;
|
||||
margin-left: -1.5rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,95 @@
|
||||
.imagecheck {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.imagecheck-figure {
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
border-radius: 3px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
|
||||
}
|
||||
&:checked ~ .imagecheck-figure {
|
||||
border-color: rgba(0, 40, 100, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-figure:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background: $primary-color url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center (center / 50%) 50%;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: .3s opacity;
|
||||
}
|
||||
|
||||
.imagecheck-input:checked ~ .imagecheck-figure:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imagecheck-image {
|
||||
max-width: 100%;
|
||||
opacity: .64;
|
||||
transition: .3s opacity;
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck:hover .imagecheck-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure .imagecheck-image, &:checked ~ .imagecheck-figure .imagecheck-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-caption {
|
||||
text-align: center;
|
||||
padding: .25rem .25rem;
|
||||
color: #9aa0ac;
|
||||
font-size: 0.875rem;
|
||||
transition: .3s color;
|
||||
}
|
||||
|
||||
.imagecheck:hover .imagecheck-caption {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure .imagecheck-caption, &:checked ~ .imagecheck-figure .imagecheck-caption {
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,727 @@
|
||||
/* Form */
|
||||
|
||||
.form-control {
|
||||
font-size: 14px;
|
||||
border-color: #ebedf2;
|
||||
padding: .6rem 1rem;
|
||||
height: inherit !important;
|
||||
&:focus {
|
||||
border-color: #3e93ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Control Sizes */
|
||||
%form-control-lg-style {
|
||||
padding: .5rem 1rem !important;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
|
||||
.input-group-lg > {
|
||||
.form-control {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
.input-group-append > {
|
||||
.btn, .input-group-text {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
}
|
||||
.input-group-prepend > {
|
||||
.btn, .input-group-text {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%form-control-sm-style {
|
||||
padding: .25rem .5rem !important;
|
||||
font-size: .875rem !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
|
||||
.input-group-sm > {
|
||||
.form-control {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
.input-group-append > {
|
||||
.btn, .input-group-text {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
}
|
||||
.input-group-prepend > {
|
||||
.btn, .input-group-text {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder { color:inherit;opacity:.7 }
|
||||
.form-control:-moz-placeholder { color:inherit;opacity:.7 }
|
||||
.form-control::-moz-placeholder { color:inherit;opacity:.7 }
|
||||
.form-control:-ms-input-placeholder { color:inherit;opacity:.7 }
|
||||
.form-control::-ms-input-placeholder { color:inherit;opacity:.7 }
|
||||
|
||||
.input-group-text {
|
||||
border-color : #ebedf2 !important;
|
||||
}
|
||||
|
||||
.form-button-action {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.form-check-label, .form-radio-label {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* CheckBox Input */
|
||||
|
||||
.select-all-checkbox + .form-check-sign:before {
|
||||
background: #ccc !important;
|
||||
border-color: #ccc !important;
|
||||
}
|
||||
|
||||
.form-check{
|
||||
[type="checkbox"] {
|
||||
&:not(:checked), &:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
&:not(:checked) + .form-check-sign, &:checked + .form-check-sign, + .form-check-sign {
|
||||
position: relative;
|
||||
padding-left: 2em;
|
||||
color: $body-text-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:not(:checked) + .form-check-sign:before, &:checked + .form-check-sign:before, + .form-check-sign:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #ccc;
|
||||
background: $transparent-bg;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&:not(:checked) + .form-check-sign:after, &:checked + .form-check-sign:after, + .form-check-sign:after {
|
||||
content: "\f00c";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
line-height: 0.8;
|
||||
color: $primary-color;
|
||||
transition: all .2s;
|
||||
font-family: 'Font Awesome 5 Solid';
|
||||
}
|
||||
&:not(:checked) + .form-check-sign:after {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
&:checked + .form-check-sign {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&:disabled {
|
||||
&:not(:checked) + .form-check-sign:before {
|
||||
box-shadow: none;
|
||||
border-color: #bbb;
|
||||
background-color: #ddd;
|
||||
}
|
||||
&:checked + .form-check-sign {
|
||||
&:before {
|
||||
box-shadow: none;
|
||||
border-color: #bbb;
|
||||
background-color: #ddd;
|
||||
}
|
||||
&:after {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
+ .form-check-sign {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
&:checked:focus + .form-check-sign:before, &:not(:checked):focus + .form-check-sign:before {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-sign:hover:before {
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
/* Radio Input */
|
||||
.form-radio {
|
||||
[type="radio"] {
|
||||
&:not(:checked), &:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign, &:checked + .form-radio-sign {
|
||||
color: $body-text-color;
|
||||
position: relative;
|
||||
padding-left: 2em;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:before {
|
||||
content: "\f18a";
|
||||
font-size: 22px;
|
||||
font-family: LineAwesome;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: auto;
|
||||
background: $transparent-bg;
|
||||
line-height: 1;
|
||||
color: #bbb;
|
||||
}
|
||||
&:checked + .form-radio-sign:before {
|
||||
content: "\f18a";
|
||||
font-size: 22px;
|
||||
font-family: LineAwesome;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: auto;
|
||||
background: $transparent-bg;
|
||||
line-height: 1;
|
||||
display: none;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:after, &:checked + .form-radio-sign:after {
|
||||
content: "\f1bc";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: auto;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #4D7CFE;
|
||||
transition: all .2s;
|
||||
line-height: 1;
|
||||
font-family: LineAwesome;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:after {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
&:checked + .form-radio-sign {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&:disabled {
|
||||
&:not(:checked) + .form-radio-sign:before {
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
&:checked + .form-radio-sign {
|
||||
&:before {
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
+ .form-radio-sign {
|
||||
color: #aaa;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
&:checked:focus + .form-radio-sign:before, &:not(:checked):focus + .form-radio-sign:before {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.form-radio-input {
|
||||
position: relative;
|
||||
margin-top: .3rem;
|
||||
}
|
||||
|
||||
/* Custom Checkbox */
|
||||
.custom-checkbox {
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
&.checkbox-default{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $dark-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-primary{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-secondary{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-info{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $info-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-success{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-warning{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-danger{
|
||||
.custom-control-input:checked~.custom-control-label::before{
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.col-form-label {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.required-label{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.label-align-left{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.label-align-right{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.label-align-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.form-group, .form-check {
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.form-group label, .form-check label {
|
||||
margin-bottom: .5rem;
|
||||
color: #495057;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-group-default {
|
||||
background-color: $white-color;
|
||||
border: 1px solid rgba(0,0,0,.07);
|
||||
border-radius: 4px;
|
||||
padding-top: 7px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
-webkit-transition: background-color .2s ease;
|
||||
transition: background-color .2s ease;
|
||||
margin-bottom: 15px;
|
||||
label {
|
||||
opacity: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
margin: 0;
|
||||
display: block;
|
||||
-webkit-transition: opacity .2s ease;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
label:not(.error){
|
||||
font-size: 10.5px !important;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
.form-control{
|
||||
border: 0;
|
||||
min-height: 25px;
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
background: 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
select.form-control:not([size]):not([multiple]){
|
||||
height: unset !important;
|
||||
}
|
||||
&.active {
|
||||
border-color: rgba(0,0,0,.1)!important;
|
||||
background-color: #f0f0f0;
|
||||
label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-floating-label{
|
||||
position: relative;
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
padding: .375rem .75rem;
|
||||
transition: all .2s;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: $font-weight-normal;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.form-control:focus + .placeholder, .form-control:valid + .placeholder, .form-control.filled + .placeholder {
|
||||
font-size: 85% !important;
|
||||
transform: translate3d(0, -10px, 0);
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
padding: .375rem 0 .75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.form-control.filled + .placeholder{
|
||||
color: $primary-color !important;
|
||||
}
|
||||
.form-control ::-webkit-input-placeholder { color: $transparent-bg; }
|
||||
.form-control :-moz-placeholder { color: $transparent-bg; }
|
||||
.form-control ::-moz-placeholder { color: $transparent-bg; }
|
||||
.form-control :-ms-input-placeholder { color: $transparent-bg; }
|
||||
|
||||
.input-border-bottom + .placeholder{
|
||||
padding: .375rem 0 .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline label {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.input-fixed {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.form-control.input-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.has-success {
|
||||
label {
|
||||
color: $success-color !important;
|
||||
}
|
||||
.form-control {
|
||||
border-color: $success-color !important;
|
||||
color: $success-color !important;
|
||||
}
|
||||
.input-group-text{
|
||||
border-color: $success-color !important;
|
||||
background: $success-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error{
|
||||
label {
|
||||
color: $danger-color !important;
|
||||
}
|
||||
.form-control {
|
||||
border-color: $danger-color !important;
|
||||
color: $danger-color !important;
|
||||
}
|
||||
.input-group-text{
|
||||
border-color: $danger-color !important;
|
||||
background: $danger-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group{
|
||||
label{
|
||||
&.error, &.success{
|
||||
width: 100%;
|
||||
order: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control{
|
||||
position: relative;
|
||||
&.custom-radio, &.custom-checkbox{
|
||||
margin-bottom: 0;
|
||||
padding-left: 2em;
|
||||
cursor: pointer;
|
||||
line-height: 24px;
|
||||
margin-right: 25px;
|
||||
display: inline-block;
|
||||
label{
|
||||
&.error, &.success{
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.has-success .form-control-feedback {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.has-error .form-control-feedback {
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
&.has-icon {
|
||||
border-radius: .25rem;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
&.has-success, &.has-icon.has-success {
|
||||
border: 1px solid $success-color !important;
|
||||
color: $success-color;
|
||||
}
|
||||
&.has-error {
|
||||
border: 1px solid $danger-color !important;
|
||||
color: $danger-color;
|
||||
}
|
||||
&.has-icon {
|
||||
&.has-error {
|
||||
border: 1px solid $danger-color !important;
|
||||
color: $danger-color;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: .25rem;
|
||||
border: 0px;
|
||||
position: relative;
|
||||
}
|
||||
.input-group-icon {
|
||||
background: $transparent-bg;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-square {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.input-pill {
|
||||
border-radius: 1.3rem !important;
|
||||
}
|
||||
|
||||
.input-solid {
|
||||
background: #e8e8e8 !important;
|
||||
border-color: #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.input-border-bottom{
|
||||
border-width: 0 0 1px 0;
|
||||
border-radius: 0px;
|
||||
padding: .75rem 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Input File */
|
||||
.input-file {
|
||||
input[type="file"], .form-control, .form-control-file{
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
label{
|
||||
&.error, &.success{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input[type="file"] + label:not(.error), .form-control + label:not(.error), .form-control-file + label:not(.error), .label-input-file {
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: 0.02em;
|
||||
color: white !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.input-file-image{
|
||||
img.img-upload-preview{
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
|
||||
&.img-circle{
|
||||
border-radius: 2000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:disabled, &[readonly] {
|
||||
background: #e8e8e8 !important;
|
||||
border-color: #e8e8e8 !important;
|
||||
}
|
||||
&:disabled, &[readonly] {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Group */
|
||||
.input-group-text{
|
||||
font-size: 14px;
|
||||
i.la{
|
||||
font-size: 21px;
|
||||
}
|
||||
i[class*="flaticon"]{
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Icon */
|
||||
.input-icon {
|
||||
position: relative;
|
||||
.form-control {
|
||||
&:not(:first-child) {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
.input-icon-addon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:last-child {
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Label States */
|
||||
label {
|
||||
&.error {
|
||||
color: $danger-color !important;
|
||||
font-size: 80% !important;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Label states for select2 */
|
||||
.select2-input {
|
||||
position: relative;
|
||||
label{
|
||||
&.error, &.success {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
}
|
||||
}
|
||||
.select2{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Dropzone */
|
||||
.dropzone{
|
||||
padding: 70px 60px 80px !important;
|
||||
border: 2px dashed rgba(0, 0, 0, 0.13) !important;
|
||||
background: $transparent-bg !important;
|
||||
&:hover {
|
||||
background: #fafafa !important;
|
||||
transition: all .5s !important;
|
||||
}
|
||||
.dz-message {
|
||||
.icon{
|
||||
margin-bottom: 15px;
|
||||
font-size: 39px;
|
||||
}
|
||||
.message{
|
||||
font-size: 34px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.note{
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Summernote */
|
||||
.note-editor.note-frame {
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
.note-toolbar {
|
||||
padding: 0 !important;
|
||||
border-bottom: 0px !important;
|
||||
}
|
||||
.note-btn{
|
||||
border: 1px solid #eee !important;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
.note-placeholder{
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
.note-codable{
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
.note-editing-area{
|
||||
.note-editable{
|
||||
margin-top: 15px !important;
|
||||
border: 1px solid #eee !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,60 @@
|
||||
.list-group {
|
||||
.list-group-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-width: 1px 0;
|
||||
border-color: #ebecec;
|
||||
}
|
||||
.list-group-item-figure {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #a9acb0;
|
||||
}
|
||||
.list-group-item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.25rem;
|
||||
color: #686f76;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-file-item {
|
||||
.list-group-item {
|
||||
padding: 0px;
|
||||
}
|
||||
.list-group-item-figure {
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
.list-group-item-body {
|
||||
padding: .75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-bordered {
|
||||
.list-group-item {
|
||||
border: 1px solid #e3ebf6;
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-lg {
|
||||
.list-group-item {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,146 @@
|
||||
.loader, .is-loading:after {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: transparent;
|
||||
border: 3px solid $secondary-color;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
.loader-lg, .is-loading-lg:after {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.loader-sm, .is-loading-sm:after {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
position: relative;
|
||||
color: transparent !important;
|
||||
> * {
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5rem/2);
|
||||
left: calc(50% - 1.5rem/2);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.is-loading-lg:after {
|
||||
top: calc(50% - 2rem/2);
|
||||
left: calc(50% - 2rem/2);
|
||||
}
|
||||
|
||||
.is-loading-sm:after {
|
||||
top: calc(50% - 1rem/2);
|
||||
left: calc(50% - 1rem/2);
|
||||
}
|
||||
|
||||
%loader-borderbottom-color {
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
@mixin loader-state($color) {
|
||||
border-color: $color;
|
||||
@extend %loader-borderbottom-color;
|
||||
}
|
||||
|
||||
%loader-btn-and-card-bgnotwhite {
|
||||
border-color: #fff;
|
||||
@extend %loader-borderbottom-color;
|
||||
}
|
||||
|
||||
.loader-default,
|
||||
.is-loading-default:after {
|
||||
@include loader-state($dark-color);
|
||||
}
|
||||
|
||||
.loader-primary,
|
||||
.is-loading-primary:after {
|
||||
@include loader-state($primary-color);
|
||||
}
|
||||
|
||||
.loader-secondary,
|
||||
.is-loading-secondary:after {
|
||||
@include loader-state($secondary-color);
|
||||
}
|
||||
|
||||
.loader-info,
|
||||
.is-loading-info:after {
|
||||
@include loader-state($info-color);
|
||||
}
|
||||
|
||||
.loader-success,
|
||||
.is-loading-success:after {
|
||||
@include loader-state($success-color);
|
||||
}
|
||||
|
||||
.loader-warning,
|
||||
.is-loading-warning:after {
|
||||
@include loader-state($warning-color);
|
||||
}
|
||||
|
||||
.loader-danger,
|
||||
.is-loading-danger:after {
|
||||
@include loader-state($danger-color);
|
||||
}
|
||||
|
||||
.btn-default, .card-default {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary, .card-primary {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary, .card-secondary {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info, .card-info {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success, .card-success {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning, .card-warning {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger, .card-danger {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
/* Google Maps */
|
||||
.full-screen-maps {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
/* jQVMap */
|
||||
.vmap {
|
||||
width: 100%;
|
||||
min-height: 265px;
|
||||
> svg {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
> g {
|
||||
transition: all ease-in-out .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jqvmap-label, .jqvmap-pin {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jqvmap-label {
|
||||
position: absolute;
|
||||
display: none;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #292929;
|
||||
color: $white-color;
|
||||
font-size: smaller;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomin, .jqvmap-zoomout {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
border-radius: 13px;
|
||||
background: #35cd3a;
|
||||
padding: 6px 7px;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomin {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomout {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.jqvmap-region {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jqvmap-ajax_response {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/* Modal */
|
||||
.modal {
|
||||
.bg-default .modal-title, .bg-primary .modal-title, .bg-secondary .modal-title, .bg-info .modal-title, .bg-success .modal-title, .bg-warning .modal-title, .bg-danger .modal-title {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: .4rem !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
@ -0,0 +1,208 @@
|
||||
/* Navbar */
|
||||
|
||||
.navbar .navbar-nav .nav-item {
|
||||
margin-right: 7px;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #666;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 10px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: center;
|
||||
&:hover, &:focus {
|
||||
background: #eee !important;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: #eee !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .notification {
|
||||
position: absolute;
|
||||
background-color: $success-color;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
font-size: 10px;
|
||||
color: $white-color;
|
||||
font-weight: $font-weight-light;
|
||||
line-height: 17px;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0px 15px;
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header .dropdown-toggle::after {
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.hidden-caret .dropdown-toggle::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
span {
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-light;
|
||||
padding: 0 10px;
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
&[class*="bg-"] {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
.navbar-brand {
|
||||
color: $white-color;
|
||||
}
|
||||
.navbar-toggler-icon{
|
||||
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
.navbar-nav {
|
||||
> .nav-item {
|
||||
> .nav-link {
|
||||
color: $white-color;
|
||||
&.disabled {
|
||||
color: #d8d8d8 !important;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.22) !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> .nav-link {
|
||||
background: rgba(255,255,255,0.22) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-toggle {
|
||||
background: rgba(19, 19, 19, 0.25) !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
.nav-search{
|
||||
.input-group {
|
||||
border: 0;
|
||||
background: rgba(19, 19, 19, 0.25) !important;
|
||||
.form-control {
|
||||
color: $white-color !important
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-nav-line {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.nav{
|
||||
&.nav-line {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $grey-color;
|
||||
.nav-link {
|
||||
padding: 15px 20px;
|
||||
color: $body-text-color;
|
||||
border-width: 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
&:hover, &:focus{
|
||||
color: $primary-color;
|
||||
border-width: 0px;
|
||||
}
|
||||
&.active {
|
||||
border-width: 0;
|
||||
background-color: $transparent-bg;
|
||||
color: $primary-color;
|
||||
border-bottom: 2px solid $primary-color;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-line-color-style($color){
|
||||
.nav-link{
|
||||
&:hover, &:focus{
|
||||
color: $color;
|
||||
}
|
||||
&.active{
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-color-default {
|
||||
@include nav-line-color-style($dark-color);
|
||||
}
|
||||
&.nav-color-primary {
|
||||
@include nav-line-color-style($primary-color);
|
||||
}
|
||||
&.nav-color-secondary {
|
||||
@include nav-line-color-style($secondary-color);
|
||||
}
|
||||
&.nav-color-info {
|
||||
@include nav-line-color-style($info-color);
|
||||
}
|
||||
&.nav-color-success {
|
||||
@include nav-line-color-style($success-color);
|
||||
}
|
||||
&.nav-color-danger {
|
||||
@include nav-line-color-style($danger-color);
|
||||
}
|
||||
&.nav-color-warning {
|
||||
@include nav-line-color-style($warning-color);
|
||||
}
|
||||
&.nav-color-light {
|
||||
@include nav-line-color-style($white-color);
|
||||
.nav-link {
|
||||
color: $grey-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
/* Nav Search */
|
||||
|
||||
.nav-search {
|
||||
.input-group {
|
||||
border: 1px solid #eee;
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
&:hover, &:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border: 0;
|
||||
background: $transparent-bg !important;
|
||||
font-size: 14px;
|
||||
padding: 0.75em 1em;
|
||||
min-width: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.input-group-text {
|
||||
border: 0;
|
||||
background: $transparent-bg;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
color: #8d9498;
|
||||
}
|
||||
.btn-search {
|
||||
background: $transparent-bg;
|
||||
padding: .375rem 1rem;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
/* Nav Pill */
|
||||
|
||||
.nav-pills > li {
|
||||
&:first-child > .nav-link {
|
||||
border-radius: 4px 0 0 4px !important;
|
||||
}
|
||||
&:last-child > .nav-link {
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
> li > .nav-link {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 !important;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
}
|
||||
border: 1px solid $primary-color;
|
||||
color: #585c5d;
|
||||
&:hover {
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
}
|
||||
}
|
||||
&.nav-pills-no-bd{
|
||||
li {
|
||||
margin-left: 15px !important;
|
||||
.nav-link{
|
||||
border: 0px !important;
|
||||
border-radius: 50px !important;
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
&.active{
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.flex-column {
|
||||
.nav-link {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid $primary-color;
|
||||
color: #585c5d;
|
||||
margin-top: -1px;
|
||||
text-align: center;
|
||||
word-wrap: normal;
|
||||
padding: 10px 0;
|
||||
&:hover {
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
}
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px !important;
|
||||
}
|
||||
}
|
||||
&.nav-pills-no-bd{
|
||||
.nav-link{
|
||||
border: 0px !important;
|
||||
border-radius: 50px !important;
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&.active{
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
i {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
&.nav-default, &.nav-primary, &.nav-secondary, &.nav-info, &.nav-warning, &.nav-success, &.nav-danger{
|
||||
.nav-link {
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
.nav-link.active {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-pills-states-active($color) {
|
||||
background: $color;
|
||||
border: 1px solid $color;
|
||||
}
|
||||
|
||||
&.nav-default .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($dark-color);
|
||||
}
|
||||
}
|
||||
&.nav-primary .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($primary-color);
|
||||
}
|
||||
}
|
||||
&.nav-secondary .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($secondary-color);
|
||||
}
|
||||
}
|
||||
&.nav-info .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($info-color);
|
||||
}
|
||||
}
|
||||
&.nav-success .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($success-color);
|
||||
}
|
||||
}
|
||||
&.nav-warning .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($warning-color);
|
||||
}
|
||||
}
|
||||
&.nav-danger .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($danger-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Size Nav */
|
||||
.nav-sm{
|
||||
.nav-link{
|
||||
font-size: 11px !important;
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
/* Pagination */
|
||||
|
||||
.pagination {
|
||||
> li {
|
||||
> a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span {
|
||||
border-radius: 100px !important;
|
||||
margin: 0 2px;
|
||||
color: #777777;
|
||||
border-color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pagination-active-state($color) {
|
||||
> a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.pg-default > li.active {
|
||||
@include pagination-active-state($dark-color);
|
||||
}
|
||||
&.pg-primary > li.active {
|
||||
@include pagination-active-state($primary-color);
|
||||
}
|
||||
&.pg-secondary > li.active {
|
||||
@include pagination-active-state($secondary-color);
|
||||
}
|
||||
&.pg-info > li.active {
|
||||
@include pagination-active-state($info-color);
|
||||
}
|
||||
&.pg-success > li.active {
|
||||
@include pagination-active-state($success-color);
|
||||
}
|
||||
&.pg-warning > li.active {
|
||||
@include pagination-active-state($warning-color);
|
||||
}
|
||||
&.pg-danger > li.active {
|
||||
@include pagination-active-state($danger-color);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
/* Popover */
|
||||
.popover {
|
||||
max-width: 240px;
|
||||
line-height: 1.7;
|
||||
border: 0;
|
||||
box-shadow: 0px 0px 20px 1px rgba(69, 65, 78, 0.2);
|
||||
.popover-header{
|
||||
background: $transparent-bg;
|
||||
font-size: 14px;
|
||||
border-bottom: 0px;
|
||||
text-transform: capitalize;
|
||||
margin-top: 5px;
|
||||
color: #aaaaaa;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
.popover-body {
|
||||
margin-bottom: 5px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.bs-popover-top, &.bs-popover-bottom, &.bs-popover-left, &.bs-popover-right{
|
||||
.arrow{
|
||||
&:before {
|
||||
border: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=right], .popover.bs-popover-right{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=left], .popover.bs-popover-left{
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=top], .popover.bs-popover-top{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=bottom], .popover.bs-popover-bottom{
|
||||
margin-top:10px;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/* Progress */
|
||||
.progress {
|
||||
border-radius: 100px;
|
||||
height: 14px;
|
||||
.progress-bar{
|
||||
border-radius: 100px;
|
||||
}
|
||||
&.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
&.progress-lg {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,120 @@
|
||||
.selectgroup {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.selectgroup-item {
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
font-weight: $font-weight-normal !important;
|
||||
+ .selectgroup-item {
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:not(:first-child) .selectgroup-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:not(:last-child) .selectgroup-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.selectgroup-button {
|
||||
display: block;
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
text-align: center;
|
||||
padding: 0.375rem 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #9aa0ac;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
min-width: 2.375rem;
|
||||
}
|
||||
|
||||
.selectgroup-button-icon {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.selectgroup-input {
|
||||
&:checked + .selectgroup-button {
|
||||
border-color: $primary-color;
|
||||
z-index: 1;
|
||||
color: $primary-color;
|
||||
background: rgba($primary-color, .15);
|
||||
}
|
||||
&:focus + .selectgroup-button {
|
||||
border-color: $primary-color;
|
||||
z-index: 2;
|
||||
color: $primary-color;
|
||||
box-shadow: 0 0 0 2px rgba($primary-color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-pills {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
.selectgroup-item {
|
||||
margin-right: .5rem;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.selectgroup-button {
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin select-group-state-style($color) {
|
||||
.selectgroup-input {
|
||||
&:checked + .selectgroup-button {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
background: rgba($color, .15);
|
||||
}
|
||||
&:focus + .selectgroup-button {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup {
|
||||
&.selectgroup-primary {
|
||||
@include select-group-state-style($primary-color);
|
||||
}
|
||||
&.selectgroup-secondary {
|
||||
@include select-group-state-style($secondary-color);
|
||||
}
|
||||
&.selectgroup-info {
|
||||
@include select-group-state-style($info-color);
|
||||
}
|
||||
&.selectgroup-success {
|
||||
@include select-group-state-style($success-color);
|
||||
}
|
||||
&.selectgroup-warning {
|
||||
@include select-group-state-style($warning-color);
|
||||
}
|
||||
&.selectgroup-danger {
|
||||
@include select-group-state-style($danger-color);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,29 @@
|
||||
/* Slider */
|
||||
|
||||
.slider-default .ui-slider-range {
|
||||
background: $dark-color;
|
||||
}
|
||||
|
||||
.slider-primary .ui-slider-range {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.slider-secondary .ui-slider-range {
|
||||
background: $secondary-color;
|
||||
}
|
||||
|
||||
.slider-info .ui-slider-range {
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
.slider-success .ui-slider-range {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
.slider-warning .ui-slider-range {
|
||||
background: $warning-color;
|
||||
}
|
||||
|
||||
.slider-danger .ui-slider-range {
|
||||
background: $danger-color;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
.stamp {
|
||||
color: #fff;
|
||||
background: $secondary-color;
|
||||
display: inline-block;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 .25rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stamp-md {
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
@ -0,0 +1,177 @@
|
||||
/* Table */
|
||||
|
||||
.table {
|
||||
> {
|
||||
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
tbody > tr > {
|
||||
td, th {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
tfoot > tr > {
|
||||
td, th {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
border-bottom-width: 2px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
td, th {
|
||||
font-size: 14px;
|
||||
border-top-width: 0px;
|
||||
border-bottom: 1px solid;
|
||||
border-color: #ebedf2 !important;
|
||||
padding: 0 25px !important;
|
||||
height: 60px;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* table full-width */
|
||||
|
||||
.table-full-width {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
/* table bordered states */
|
||||
|
||||
.table-bordered-bd-default {
|
||||
td, th {
|
||||
border: 1px solid $dark-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-primary {
|
||||
td, th {
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-secondary {
|
||||
td, th {
|
||||
border: 1px solid $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-info {
|
||||
td, th {
|
||||
border: 1px solid $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-success {
|
||||
td, th {
|
||||
border: 1px solid $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-warning {
|
||||
td, th {
|
||||
border: 1px solid $warning-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-danger {
|
||||
td, th {
|
||||
border: 1px solid $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
td, th {
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* table head background states*/
|
||||
|
||||
.table-head-bg-default {
|
||||
thead {
|
||||
border: 1px solid $dark-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-primary {
|
||||
thead {
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-secondary {
|
||||
thead {
|
||||
border: 1px solid $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-info {
|
||||
thead {
|
||||
border: 1px solid $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-success {
|
||||
thead {
|
||||
border: 1px solid $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-warning {
|
||||
thead {
|
||||
border: 1px solid $warning-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-danger {
|
||||
thead {
|
||||
border: 1px solid $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin table-bg-state($color){
|
||||
background: $color !important;
|
||||
color: $white-color !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.table-head-bg-default thead th, .table-striped-bg-default tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($dark-color);
|
||||
}
|
||||
|
||||
.table-head-bg-primary thead th, .table-striped-bg-primary tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($primary-color);
|
||||
}
|
||||
|
||||
.table-head-bg-secondary thead th, .table-striped-bg-secondary tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($secondary-color);
|
||||
}
|
||||
|
||||
.table-head-bg-info thead th, .table-striped-bg-info tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($info-color);
|
||||
}
|
||||
|
||||
.table-head-bg-success thead th, .table-striped-bg-success tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($success-color);
|
||||
}
|
||||
|
||||
.table-head-bg-warning thead th, .table-striped-bg-warning tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($warning-color);
|
||||
}
|
||||
|
||||
.table-head-bg-danger thead th, .table-striped-bg-danger tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($danger-color);
|
||||
}
|
||||
|
||||
/* table-responsive */
|
||||
|
||||
.table-responsive {
|
||||
width: 100% !important;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
@ -0,0 +1,170 @@
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: #eeeeee;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
> li {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
> .timeline-panel {
|
||||
width: 50%;
|
||||
float: left;
|
||||
border: 1px solid #eeeeee;
|
||||
background: $white-color;
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
-moz-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
}
|
||||
&.timeline-inverted + li:not(.timeline-inverted) {
|
||||
margin-top: -60px;
|
||||
}
|
||||
&:not(.timeline-inverted) {
|
||||
+ li.timeline-inverted {
|
||||
margin-top: -60px;
|
||||
}
|
||||
padding-right: 90px;
|
||||
}
|
||||
&.timeline-inverted {
|
||||
padding-left: 90px;
|
||||
> .timeline-panel {
|
||||
float: right;
|
||||
&:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
&:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
left: -14px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
> {
|
||||
.timeline-panel {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
right: -15px;
|
||||
display: inline-block;
|
||||
border-top: 15px solid $transparent-bg;
|
||||
border-left: 15px solid #eeeeee;
|
||||
border-right: 0 solid #eeeeee;
|
||||
border-bottom: 15px solid $transparent-bg;
|
||||
content: " ";
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: -14px;
|
||||
display: inline-block;
|
||||
border-top: 14px solid $transparent-bg;
|
||||
border-left: 14px solid $white-color;
|
||||
border-right: 0 solid $white-color;
|
||||
border-bottom: 14px solid $transparent-bg;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
color: $white-color;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
background-color: #999999;
|
||||
z-index: 100;
|
||||
border-top-right-radius: 50%;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
&.default {
|
||||
background-color: $dark-color !important;
|
||||
}
|
||||
&.primary {
|
||||
background-color: $primary-color !important;
|
||||
}
|
||||
&.secondary {
|
||||
background-color: $secondary-color !important;
|
||||
}
|
||||
&.success {
|
||||
background-color: $success-color !important;
|
||||
}
|
||||
&.warning {
|
||||
background-color: $warning-color !important;
|
||||
}
|
||||
&.danger {
|
||||
background-color: $danger-color !important;
|
||||
}
|
||||
&.info {
|
||||
background-color: $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 17px;
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
i {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body > {
|
||||
p, ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user