rianraka/mamberamo
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
rifqiryandi
2022-04-13 13:51:55 +07:00
commit 47e209c023
3107 changed files with 238911 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/style/scss/components/ui/_interfaces.scss Normal file
View File

@ -0,0 +1,26 @@
@import "./ui-accordion";
@import "./ui-alert";
@import "./ui-badge";
@import "./ui-breadcrumb";
@import "./ui-button";
@import "./ui-card";
@import "./ui-carousel";
@import "./ui-dropdown";
@import "./ui-grid";
@import "./ui-label";
@import "./ui-list-group";
@import "./ui-media";
@import "./ui-menu";
@import "./ui-modal";
@import "./ui-pagination";
@import "./ui-popover";
@import "./ui-preloader";
@import "./ui-progressbar";
@import "./ui-ribbon";
@import "./ui-scrollbar";
@import "./ui-step";
@import "./ui-tab";
@import "./ui-tooltip";
@import "./ui-timeline";

454
public/style/scss/components/ui/_ui-accordion.scss Normal file
View File

@ -0,0 +1,454 @@
.accordion {
// accordion primary
&-primary{
.accordion__header {
&.collapsed{
background: $primary-light;
border-color: $primary-light;
color: #211c37;
box-shadow:none;
@at-root [data-theme-version="dark"] & {
background: $primary-opacity;
border-color: $primary-opacity;
color:$body-color;
}
}
background:$primary;
border-color:$primary;
color: $white;
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
}
}
&-primary-solid{
.accordion__header {
&.collapsed{
background: $primary-light;
border-color: $primary-light;
color: #211c37;
box-shadow:none;
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
@at-root [data-theme-version="dark"] & {
background: $primary-opacity;
border-color: $primary-opacity;
color:$body-color;
}
}
background:$primary;
border-color:$primary;
color: $white;
box-shadow:0 -10px 20px 0 rgba($primary, 0.15);
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.accordion__body {
border: 2px solid $primary;
border-top: none;
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
}
}
&-danger{
.accordion__header {
&.collapsed{
background: $danger-light;
border-color: $danger-light;
color: #211c37;
box-shadow:none;
}
background:$danger;
border-color:$danger;
color: $white;
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
}
}
&-danger-solid{
.accordion__header {
&.collapsed{
background: $danger-light;
border-color: $danger-light;
color: #211c37;
box-shadow:none;
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
@at-root [data-theme-version="dark"] & {
background: $danger-opacity;
border-color: $danger-opacity;
color:$body-color;
}
}
background:$danger;
border-color:$danger;
color: $white;
box-shadow:0 -10px 20px 0 rgba($danger, 0.15);
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
.accordion__body {
border: 2px solid $danger;
border-top: none;
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
}
}
//a single accrodion
&__item {
margin-bottom: 1.25rem;
}
//accrodion header styles
&__header {
padding:1rem 1.75rem;
border: 1px solid $border;
cursor: pointer;
position: relative;
color: $heading;
font-weight: 400;
border-radius:$radius;
@include transitionMedium;
@at-root [data-theme-version="dark"] & {
color: $white;
border-color: $d-border;
}
//set the indicator font family
&--indicator {
font-family: 'themify';
position: absolute;
right: 1.5625rem;
top: 50%;
transform: translateY(-50%);
@at-root [direction="rtl"] & {
right:auto;
left: 1.5625rem;
}
&.indicator_bordered {
display: inline-block;
width: 25px;
text-align: center;
height: 25px;
border: 1px solid $border;
border-radius: 50%;
line-height: 25px;
}
}
&:not(.collapsed) {
.accordion__header--indicator {
&::before {
content: "\e622";
}
//icon style
&.style_two {
&::before {
content: "\e648";
}
}
}
}
&.collapsed {
.accordion__header--indicator {
&::before {
content: "\e61a";
}
//icon style
&.style_two {
&::before {
content: "\e64b";
}
}
}
}
}
//accordion body styles
&__body {
&--text {
padding: 0.875rem 1.25rem;
}
}
//accrodion with border
&-bordered {
.accordion__body {
border: 1px solid $border;
border-top: none;
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
}
}
.accordion__header.collapsed{
border-radius:$radius;
}
.accordion__header{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
}
}
//accrodion without space
&-no-gutter {
.accordion__item {
margin-bottom: 0;
.accordion__header {
&.collapsed {
border-bottom: none;
}
}
&:last-child {
.accordion__header {
border-bottom: 1px solid $border;
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
}
}
}
}
}
//not gutter and bordered
&-no-gutter.accordion__bordered {
.accordion__item {
&:not(:last-child) {
.accordion__body {
border-bottom: none;
}
}
}
}
//indicator in left positon
&-left-indicator {
.accordion__header {
&--text {
padding-left: 2.5rem;
}
&--indicator {
right: auto;
left: 1.5625rem;
}
}
}
//with icon
&-with-icon {
.accordion__header {
&--text {
padding-left: 2.5rem;
@at-root [direction="rtl"] & {
padding-left: 0;
padding-right: 2.5rem;
}
}
&--icon {
position: absolute;
right: auto;
left: 1.5625rem;
font-family: 'themify';
@at-root [direction="rtl"] & {
left: auto;
right: 1.5625rem;
}
&::before {
content: "\e645";
}
}
}
}
//with header background
&-header-bg {
.accordion__header {
background-color: $light;
@at-root [data-theme-version="dark"] & {
background-color: $d-bg;
color: $white;
}
&--primary {
background-color: $primary;
color: $white;
border-color:$primary;
@at-root [data-theme-version="dark"] & {
background-color: $primary;
}
}
&--info {
background-color: $info;
color: $white;
border-color:$info;
@at-root [data-theme-version="dark"] & {
background-color: $info;
}
}
&--success {
background-color: $success;
color: $white;
border-color:$success;
@at-root [data-theme-version="dark"] & {
background-color: $success;
}
}
}
}
//with header background and no space
&-header-bg.accordion-no-gutter {
.accordion__header {
border-color: transparent;
border-radius: 0;
}
.accordion__item{
&:first-child{
.accordion__header{
border-top-left-radius:$radius;
border-top-right-radius:$radius;
}
}
&:last-child{
.accordion__header{
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
}
}
}
}
&.accordion-no-gutter {
.accordion__header {
border-radius: 0;
}
.accordion__header.collapsed {
border-radius: 0;
}
.accordion__body{
border-radius: 0;
}
.accordion__item{
&:first-child{
.accordion__header{
border-top-left-radius:$radius;
border-top-right-radius:$radius;
}
}
&:last-child{
.accordion__header.collapsed{
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
}
.accordion__body{
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
}
}
}
}
//with solid background
&-solid-bg {
.accordion__header {
border-color: transparent;
background-color: $primary-light;
border-bottom-left-radius:0;
border-bottom-right-radius:0;
@at-root [data-theme-version="dark"] & {
background-color: $d-bg;
}
&.collapsed{
border-radius:$radius;
}
}
.accordion__body {
border-color: transparent;
background-color: $primary-light;
border-bottom-left-radius:$radius;
border-bottom-right-radius:$radius;
@at-root [data-theme-version="dark"] & {
background-color: $d-bg;
}
}
}
//active header styles
&-active-header {
.accordion__header {
&:not(.collapsed) {
background-color: $info;
border-color: $info;
color: $white;
}
}
}
//shadow in header
&-header-shadow {
.accordion__header {
border: none;
box-shadow: 0 0 0.9375rem -3px rgba($color: $black, $alpha: .3);
}
}
//stylishly rounded borders
&-rounded-stylish {
.accordion__header {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.accordion__body {
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
}
//smothly rounded accrodion header
&-rounded {
.accordion__header {
border-radius: 0.3125rem;
}
}
//accordion gradient
&-gradient {
.accordion__header {
color: $white;
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
border-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&.collapsed{
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
}
.accordion__body {
color: $white;
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
border-color: transparent;
}
}
}

371
public/style/scss/components/ui/_ui-alert.scss Normal file
View File

@ -0,0 +1,371 @@
.alert{
border-radius: $radius;
padding:1rem 3rem 1rem 1.5rem;
p{
line-height:1.5;
}
}
.alert-square{
}
.alert-rounded{
border-radius: 30px;
}
// Basic Alert
.alert-primary{
background: $primary-light;
border-color: $primary-light;
color: $primary;
@at-root [data-theme-version="dark"] & {
background: $primary-opacity;
border-color: $primary-opacity;
}
}
.alert-secondary{
background: $secondary-light;
border-color: $secondary-light;
color: $secondary;
@at-root [data-theme-version="dark"] & {
background: $secondary-opacity;
border-color: $secondary-opacity;
color:$body-color;
}
}
.alert-success{
background: $success-light;
border-color: $success-light;
color: $success;
@at-root [data-theme-version="dark"] & {
background: $success-opacity;
border-color: $success-opacity;
}
}
.alert-warning{
background: $warning-light;
border-color: $warning-light;
color: $warning;
@at-root [data-theme-version="dark"] & {
background: $warning-opacity;
border-color: $warning-opacity;
}
}
.alert-danger{
background: $danger-light;
border-color: $danger-light;
color: $danger;
@at-root [data-theme-version="dark"] & {
background: $danger-opacity;
border-color: $danger-opacity;
}
}
.alert-info{
background: $info-light;
border-color: $info-light;
color: $info;
@at-root [data-theme-version="dark"] & {
background: $info-opacity;
border-color: $info-opacity;
}
}
.alert-dark{
background: $dark-light;
border-color: $dark-light;
color: $dark;
@at-root [data-theme-version="dark"] & {
background: $dark-opacity;
border-color: $dark-opacity;
color:$body-color;
}
}
.alert-light{
background: $light;
border-color: $light;
color: $dark;
}
// Alert alt
.alert-alt.alert-primary{
border-left: 4px solid $primary;
}
.alert-alt.alert-secondary{
border-left: 4px solid $secondary;
}
.alert-alt.alert-success{
border-left: 4px solid $success
}
.alert-alt.alert-warning{
border-left: 4px solid $warning;
}
.alert-alt.alert-danger{
border-left: 4px solid $danger;
}
.alert-alt.alert-info{
border-left: 4px solid $info;
}
.alert-alt.alert-dark{
border-left: 4px solid $dark;
}
.alert-alt.alert-light{
border-left: 4px solid darken($light,15%);
}
// Alert alt with solid color
.alert-alt.alert-primary.solid{
border-left: 4px solid darken($primary,25%)!important;
}
.alert-alt.alert-secondary.solid{
border-left: 4px solid darken($secondary,25%)!important;
}
.alert-alt.alert-success.solid{
border-left: 4px solid darken($success, 25%)!important;
}
.alert-alt.alert-warning.solid{
border-left: 4px solid darken($warning,25%)!important;
}
.alert-alt.alert-danger.solid{
border-left: 4px solid darken($danger,25%)!important;
}
.alert-alt.alert-info.solid{
border-left: 4px solid darken($info,25%)!important;
}
.alert-alt.alert-dark.solid{
border-left: 4px solid darken($dark,25%)!important;
}
.alert-alt.alert-light.solid{
border-left: 4px solid darken($light,25%)!important;
}
//Alert dismissable with solid color
.alert-dismissible.solid{
.close{
&:hover{
color: $white;
opacity: 1;
}
}
}
// Alert Solid
.alert.alert-primary.solid{
background: $primary;
color: $white;
border-color: $primary;
}
.alert.alert-secondary.solid{
background: $secondary;
color: $white;
border-color: $secondary;
}
.alert.alert-success.solid{
background: $success;
color: $white;
border-color: $success;
}
.alert.alert-warning.solid{
background: $warning;
color: $white;
border-color: $warning;
}
.alert.alert-danger.solid{
background: $danger;
color: $white;
border-color: $danger;
}
.alert.alert-info.solid{
background: $info;
color: $white;
border-color: $info;
}
.alert.alert-dark.solid{
background: $dark;
color: $white;
border-color: $dark;
}
.alert.alert-light.solid{
background: $light;
color: $dark;
border-color: $light;
}
// Alert right icon
.alert-right-icon{
&>span i{
font-size: 18px;
margin-right: 5px;;
}
.close{
i{
font-size: 16px;
}
}
}
// Alert Outline
.alert.alert-outline-primary{
background: transparent;
color: $primary;
border-color: $primary;
}
.alert.alert-outline-secondary{
background: transparent;
color: $body-color;
border-color: $secondary;
}
.alert.alert-outline-success{
background: transparent;
color: $success;
border-color: $success;
}
.alert.alert-outline-info{
background: transparent;
color: $info;
border-color: $info;
}
.alert.alert-outline-warning{
background: transparent;
color: $warning;
border-color: $warning;
}
.alert.alert-outline-danger{
background: transparent;
color: $danger;
border-color: $danger;
}
.alert.alert-outline-dark{
background: transparent;
color: $body-color;
border-color: $dark;
}
.alert.alert-outline-light{
background: transparent;
color: $dark;
border-color: $light;
}
// Alert Social
.alert-social{
color: $white;
.alert-social-icon{
align-self: center;
margin-right: 0.9375rem;
i{
font-size: 42px;
}
}
&.facebook{
background-color: $facebook;
}
&.twitter{
background-color: $twitter;
}
&.linkedin{
background-color: $linkedin;
}
&.google-plus{
background-color: $google-plus;
}
.close{
&:hover{
opacity: 1!important;
color: $white!important;
}
}
}
// Alert left icon
.left-icon-big{
.alert-left-icon-big{
align-self: center;
margin-right: 0.9375rem;
i{
font-size: 35px;
line-height: 1;
}
// &.primary{
// background: $primary;
// color: $white;
// }
}
.media-body{
// margin-left: 100px;
}
}
[direction="rtl"]{
.left-icon-big .alert-left-icon-big,
.alert-social .alert-social-icon{
margin-left: 0;
margin-right: 0.9375rem;
}
}

218
public/style/scss/components/ui/_ui-badge.scss Normal file
View File

@ -0,0 +1,218 @@
.badge{
line-height: 1.5;
border-radius: $radius;
font-size: 14px;
font-weight: 600;
padding: 4px 10px;
border:1px solid transparent;
}
.badge-rounded{
border-radius: 20px;
padding:3px 13px ;
}
.badge-circle{
border-radius: 100px;
padding: 3px 7px;
}
.badge-outline-primary{
border: 1px solid $primary;
color: $primary;
}
.badge-outline-secondary{
border: 1px solid $secondary;
color: $secondary;
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.badge-outline-success{
border: 1px solid $success;
color: $success;
}
.badge-outline-info{
border: 1px solid $info;
color: $info;
}
.badge-outline-warning{
border: 1px solid $warning;
color: $warning;
}
.badge-outline-danger{
border: 1px solid $danger;
color: $danger;
}
.badge-outline-light{
border: 1px solid $border;
color: $dark;
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.badge-outline-dark{
border: 1px solid $dark;
color: $dark;
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.badge-xs {
font-size: 10px;
padding: 0px 5px;
line-height: 18px;
}
.badge-sm {
font-size: 11px;
padding: 5px 8px;
line-height: 11px;
}
//.badge-md {
// font-size: 13px;
// padding: 0px 9px;
// line-height: 25px;
//}
.badge-lg {
font-size: 14px;
padding: 0px 10px;
line-height: 30px;
}
.badge-xl {
font-size: 15px;
padding: 0px 15px;
line-height: 35px;
}
.badge-default{
background: #ADB6C7;
}
.badge-success {
background-color: $success;
}
.badge-info {
background-color: $info;
}
.badge-primary {
background-color: $primary;
}
.badge-warning {
background-color: $warning;
}
.badge-danger {
background-color: $danger;
}
.badge-dark {
background-color: $dark;
}
.badge-light {
background-color: $light;
}
.light.badge-default{
background: #ADB6C7;
}
.light.badge-success {
background-color: $success-light;
color:$success;
@at-root [data-theme-version="dark"] & {
background-color: $success-opacity;
}
}
.light.badge-info {
background-color: $info-light;
color:$info;
@at-root [data-theme-version="dark"] & {
background-color: $info-opacity;
}
}
.light.badge-primary {
background-color: $primary-light;
color:$primary;
@at-root [data-theme-version="dark"] & {
background-color: $primary-opacity;
}
}
.light.badge-secondary {
background-color: $secondary-light;
color:$secondary;
@at-root [data-theme-version="dark"] & {
background-color: $secondary-opacity;
color:$body-color;
}
}
.light.badge-warning {
background-color: $warning-light;
color:$warning;
@at-root [data-theme-version="dark"] & {
background-color: $warning-opacity;
}
}
.light.badge-danger {
background-color: $danger-light;
color:$danger;
@at-root [data-theme-version="dark"] & {
background-color: $danger-opacity;
}
}
.light.badge-dark {
background-color: $dark-light;
color:$dark;
@at-root [data-theme-version="dark"] & {
background-color: $dark-opacity;
color:$body-color;
}
}
//
.bootstrap-label{
.label{
display: inline-block;
margin-right: 1rem;
&:last-child{
margin-right: 0;
}
}
}
.badge-demo{
.badge{
margin-right: 5px;
margin-bottom: 5px;
&:last-child{
margin-right: 0;
}
}
}
.bootstrap-badge-buttons{
button{
margin-right: .2rem;
margin-bottom: 1rem;
&:last-child{
margin-right: 0;
}
}
}

114
public/style/scss/components/ui/_ui-breadcrumb.scss Normal file
View File

@ -0,0 +1,114 @@
.welcome-text{
span,
p{
display:none;
}
}
.page-titles {
margin-bottom: 25px;
display: block;
margin-left: -40px;
margin-right: -40px;
padding: 20px 40px;
margin-top: -15px;
background: $body-bg;
display: block;
[class*="col-"]{
display: block !important;
max-width: 100%;
width: 100%;
margin: 0;
}
@include custommq($max: 1600px) {
margin-left: -30px;
margin-top: 0px;
margin-right: -30px;
margin-bottom: 30px;
padding: 15px 30px;
}
@include respond('phone-land') {
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
margin-bottom: 0px;
padding: 15px;
}
.justify-content-sm-end{
align-items: center;
}
h4 {
margin-bottom: 10px;
margin-top: 0;
color: #000;
font-size: 1.75rem;
font-weight: 600;
span {
font-size: 1.25rem;
}
}
.breadcrumb {
margin-bottom: 0;
padding: 0;
background: transparent;
// font-size: 0.875rem;
li {
margin-top: 0;
margin-bottom: 0;
font-size: 18px;
@include respond('phone-land') {
font-size: 15px;
}
a{
color: #656773;
}
&.active a{
color: $primary;
font-weight:600;
}
}
/* .breadcrumb-item + .breadcrumb-item {
&:before {
content: "\e606";
font-family: 'simple-line-icons';
// font-weight: 4;
font-size: 10px;
}
} */
&-datepicker{
font-size: 0.75rem;
color: $muted;
&__icon{
font-size: 0.875rem;
}
}
}
.breadcrumb-widget{
.border-dark{
border-color: $gray-300!important;
}
h4{
color: $strong;
font-weight: 600;
}
@include respond('phone') {
text-align: left!important;
margin-bottom: 0.9375rem;
}
}
}

989
public/style/scss/components/ui/_ui-button.scss Normal file
View File

@ -0,0 +1,989 @@
// .qx_btn{
// min-height: 50px;
// min-width: 100px;
// // font-weight: 700;
// font-size: 16px;
// }
button{
cursor: pointer;
&:focus{
outline: 0;
box-shadow: none;
}
}
.btn-primary{
color:$white;
}
.btn {
padding:0.938rem 1.5rem;
border-radius: $radius;
font-weight:500;
font-size:1rem;
// border-radius: 0px;
// box-shadow: 0 4px 6px rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
&:hover, &:focus, &:active, &.active{
outline: 0!important;
// box-shadow: 0 4px 05x rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
}
@include respond('laptop') {
padding: 0.625rem 1rem;
font-size: 0.813rem;
}
&-transparent {
background-color: transparent;
}
}
.sharp {
min-width: 40px;
padding: 7px;
height: 40px;
min-height: 40px;
}
.sharp.btn-xs{
padding: 3px;
width: 26px;
height: 26px;
min-width: 26px;
min-height: 26px;
}
.light{
&.tp-btn{
background-color:transparent;
}
&.btn-default{
background: #ADB6C7;
}
&.btn-success {
background-color: $success-light;
border-color: $success-light;
color:$success;
g [fill]{
fill:$success;
}
@at-root [data-theme-version="dark"] & {
background-color: $success-opacity;
border-color: transparent;
}
&:hover{
background-color: $success;
border-color: $success;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-info {
background-color: $info-light;
border-color: $info-light;
color:$info;
g [fill]{
fill:$info;
}
@at-root [data-theme-version="dark"] & {
background-color: $info-opacity;
border-color:transparent;
}
&:hover{
background-color: $info;
border-color: $info;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-primary {
background-color: $primary-light;
border-color: $primary-light;
color:$primary;
g [fill]{
fill:$primary;
}
@at-root [data-theme-version="dark"] & {
background-color: $primary-opacity;
border-color:transparent;
}
&:hover{
background-color: $primary;
border-color: $primary;
color: #fff;
g [fill]{
fill:$white;
}
svg{
path{
fill:$white;
}
}
}
}
&.btn-secondary {
background-color: $secondary-light;
border-color: $secondary-light;
color:$secondary;
g [fill]{
fill:$secondary;
}
@at-root [data-theme-version="dark"] & {
background-color: $secondary-opacity;
border-color:transparent;
color:$white;
}
&:hover{
background-color: $secondary;
border-color: $secondary;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-warning {
background-color: $warning-light;
border-color: $warning-light;
color:$warning;
g [fill]{
fill:$warning;
}
@at-root [data-theme-version="dark"] & {
background-color: $warning-opacity;
border-color:transparent;
}
&:hover{
background-color: $warning;
border-color: $warning;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-danger {
background-color: $danger-light;
border-color: $danger-light;
color:$danger;
g [fill]{
fill:$danger;
}
@at-root [data-theme-version="dark"] & {
background-color: $danger-opacity;
border-color:transparent;
}
&:hover{
background-color: $danger;
border-color: $danger;
color: #fff;
g [fill]{
fill:$white;
}
svg path{
fill:$white;
}
}
}
&.btn-dark {
background-color: $dark-light;
border-color: $dark-light;
color:$dark;
g [fill]{
fill:$dark;
}
@at-root [data-theme-version="dark"] & {
background-color: $dark-opacity;
border-color:transparent;
color:$white;
}
&:hover{
background-color: $dark;
border-color: $dark;
color: #fff;
g [fill]{
fill:$white;
}
}
}
}
.btn.tp-btn{
background-color:transparent;
border-color: transparent;
&.btn-default{
background: #ADB6C7;
}
&.btn-success {
color:$success;
g [fill]{
fill:$success;
}
&:hover{
background-color: $success;
border-color: $success;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-info {
color:$info;
g [fill]{
fill:$info;
}
&:hover{
background-color: $info;
border-color: $info;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-primary {
color:$primary;
g [fill]{
fill:$primary;
}
&:hover{
background-color: $primary;
border-color: $primary;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-secondary {
color:$secondary;
g [fill]{
fill:$secondary;
}
&:hover{
background-color: $secondary;
border-color: $secondary;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-warning {
color:$warning;
g [fill]{
fill:$warning;
}
&:hover{
background-color: $warning;
border-color: $warning;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-danger {
color:$danger;
g [fill]{
fill:$danger;
}
&:hover{
background-color: $danger;
border-color: $danger;
color: #fff;
g [fill]{
fill:$white;
}
}
}
&.btn-light {
color:$dark;
g [fill]{
fill:$dark;
}
&:hover{
background-color: $light;
border-color: $light;
color: $dark;
g [fill]{
fill:$white;
}
}
}
&.btn-dark {
color:$dark;
g [fill]{
fill:$dark;
}
&:hover{
background-color: $dark;
border-color: $dark;
color: #fff;
g [fill]{
fill:$white;
}
}
}
}
.btn.tp-btn-light{
background-color:transparent;
border-color: transparent;
&.btn-success {
color:$success;
g [fill]{
fill:$success;
}
&:hover{
background-color: $success-light;
border-color: $success-light;
color:$success;
g [fill]{
fill:$success;
}
}
}
&.btn-info {
color:$info;
g [fill]{
fill:$info;
}
&:hover{
background-color: $info-light;
border-color: $info-light;
color:$info;
g [fill]{
fill:$info;
}
}
}
&.btn-primary {
color:$primary;
g [fill]{
fill:$primary;
}
&:hover{
background-color: $primary-light;
border-color: $primary-light;
color:$primary;
g [fill]{
fill:$primary;
}
}
}
&.btn-secondary {
color:$secondary;
g [fill]{
fill:$secondary;
}
&:hover{
background-color: $secondary-light;
border-color: $secondary-light;
color:$secondary;
g [fill]{
fill:$secondary;
}
}
}
&.btn-warning {
color:$warning;
g [fill]{
fill:$warning;
}
&:hover{
background-color: $warning-light;
border-color: $warning-light;
color:$warning;
g [fill]{
fill:$warning;
}
}
}
&.btn-danger {
color:$danger;
g [fill]{
fill:$danger;
}
&:hover{
background-color: $danger-light;
border-color: $danger-light;
color:$danger;
g [fill]{
fill:$white;
}
}
}
&.btn-dark {
color:$dark;
g [fill]{
fill:$dark;
}
&:hover{
background-color: $dark-light;
border-color: $dark-light;
color: $dark;
[fill]{
fill:$white;
}
}
}
}
.shadow.btn-primary {
-webkit-box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
}
.shadow.btn-secondary {
-webkit-box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
}
.shadow.btn-warning {
-webkit-box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
}
.shadow.btn-danger {
-webkit-box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
}
.shadow.btn-info {
-webkit-box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
}
.shadow.btn-success {
-webkit-box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
}
.btn-xxs {
padding: 6px 15px;
font-size: 11px;
line-height: 1.3;
}
.btn-xs {
font-size: 0.75rem;
padding: 0.438rem 1rem;
// padding : 0.5 2.5rem !important;
font-weight: 600;
@include respond('laptop') {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
font-weight: 500;
}
}
.btn-sm {
font-size: 0.813rem !important;
padding:0.625rem 1rem;
@include respond('laptop') {
padding: 0.375rem 1rem;
font-size: 0.75rem;
}
}
.btn-md {
font-size: 0.813rem !important;
padding: 0.875rem 1.25rem;
@include respond('laptop') {
padding: 0.5rem 1rem;
font-size: 0.813rem;
}
}
.btn-lg{
padding: 1rem 2rem;
font-size: 1.125rem !important;
@include respond('laptop') {
padding: 0.75rem 1.5rem;
font-size: 1rem !important;
}
}
.btn-xl{
padding: 0.6rem 1rem;
&.btn-default{
font-weight: 600;
}
}
.btn-square {
border-radius: 0;
}
.btn-rounded {
border-radius: 30px !important;
}
.btn-icon-right {
border-left: 1px solid white;
display: inline-block;
margin: -.8rem 0 -.8rem 1rem;
padding: 0.4375rem 0 0.4375rem 1rem;
margin: -1rem -0.25rem -1rem 1rem;
padding: 1rem 0 1rem 1.25rem;
@include respond ('laptop'){
padding: 1rem 0 1rem 0.6rem;
}
}
.btn-icon-left {
background: #fff;
border-radius: 10rem;
display: inline-block;
margin: -0.5rem 0.75rem -0.5rem -1.188rem;
padding: 0.5rem 0.80rem 0.5rem;
float: left;
@include respond('tab-land') {
margin: -0.5rem 0.75rem -0.5rem -0.800rem;
}
}
[direction="rtl"]{
.btn-icon-left {
margin: -.5rem -1.5rem -.5rem 1rem;
}
.btn-icon-right {
border-left: 0px solid white;
display: inline-block;
margin: -.8rem 1rem -.8rem 0;
padding: 0.4375rem 1rem 0.4375rem 0;
border-right: 1px solid white;
}
}
.toggle-dropdown::after {
margin-left: 0.755em;
}
.social-btn-icon {
.btn {
min-width : 7.5rem;
margin-bottom: 1.5rem;
}
}
.social-icon {
.btn {
padding: .7rem 1.4rem;
}
}
.btn-circle {
height : 5rem;
width : 5rem;
border-radius: 50% !important;
&-sm {
width: 4.5rem;
height: 4.5rem;
font-size: 1.8rem;
}
&-md {
width: 6rem;
height: 6rem;
font-size: 2.5rem;
i{
font-size: 2.4rem;
}
}
&-lg {
width: 8rem;
height: 8rem;
font-size: 3.2rem;
i{
font-size: 3.1rem;
}
}
}
.btn-page{
.btn{
min-width: 110px;
margin-right: 4px;
margin-bottom: 8px;
}
}
// btn sizes
.size-1{
min-width: 160px !important;
font-size: 24px;
padding: 0.68rem 0.75rem;
}
.size-2{
font-size: 20px;
min-width: 130px !important;
padding: 0.57rem 0.75rem;
}
.size-3{
font-size: 14px;
min-width: 110px !important;
padding: 0.536rem 0.75rem;
}
.size-4{
font-size: 14px;
min-width: 100px !important;
}
.size-5{
font-size: 14px;
min-width: 90px !important;
padding: .22rem 0.75rem;
}
.size-6{
font-size: 13px;
min-width: 80px !important;
padding: 0.097rem 0.75rem;
}
.size-7{
font-size: 12px;
min-width: 60px !important;
padding: 0.001rem 0.75rem;
}
.btn-light {
background : $light;
border-color: $light;
&:active,
&:focus,
&:hover {
background : lighten($light, 25%);
border-color: lighten($light, 25%);
}
}
.btn-outline-primary{
&:hover{
color:$white;
}
}
.btn-outline-light{
color: $dark;
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.btn-outline-secondary{
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.btn-outline-dark{
@at-root [data-theme-version="dark"] & {
color:$body-color;
}
}
.btn-dark {
background : $dark;
border-color: $dark;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($dark, 10%);
color : $white;
border-color: darken($dark, 10%);
}
}
.btn-group{
&.btn-rounded{
.btn:first-child{
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
}
.btn:last-child{
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
}
}
}
///////////////////
// Social Buttons
///////////////////
.btn-facebook {
background : $facebook;
border-color: $facebook;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($facebook, 10%);
color : $white;
border-color: darken($facebook, 10%);
}
}
.btn-twitter {
background : $twitter;
border-color: $twitter;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($twitter, 10%);
color : $white;
border-color: darken($twitter, 10%);
}
}
.btn-youtube {
background : $youtube;
border-color: $youtube;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($youtube, 10%);
color : $white;
border-color: darken($youtube, 10%);
}
}
.btn-instagram {
background : $instagram;
border-color: $instagram;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($instagram, 10%);
color : $white;
border-color: darken($instagram, 10%);
}
}
.btn-pinterest {
background : $pinterest;
border-color: $pinterest;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($pinterest, 10%);
color : $white;
border-color: darken($pinterest, 10%);
}
}
.btn-linkedin {
background : $linkedin;
border-color: $linkedin;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($linkedin, 10%);
color : $white;
border-color: darken($linkedin, 10%);
}
}
.btn-google-plus {
background : $google-plus;
border-color: $google-plus;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($google-plus, 10%);
color : $white;
border-color: darken($google-plus, 10%);
}
}
.btn-google {
background : $google;
border-color: $google;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($google, 10%);
color : $white;
border-color: darken($google, 10%);
}
}
.btn-snapchat {
background : $snapchat;
border-color: $snapchat;
color : $black;
&:active,
&:focus,
&:hover {
background : darken($snapchat, 10%);
color : $black;
border-color: darken($snapchat, 10%);
}
}
.btn-whatsapp {
background : $whatsapp;
border-color: $whatsapp;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($whatsapp, 10%);
color : $white;
border-color: darken($whatsapp, 10%);
}
}
.btn-tumblr {
background : $tumblr;
border-color: $tumblr;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($tumblr, 10%);
color : $white;
border-color: darken($tumblr, 10%);
}
}
.btn-reddit {
background : $reddit;
border-color: $reddit;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($reddit, 10%);
color : $white;
border-color: darken($reddit, 10%);
}
}
.btn-spotify {
background : $spotify;
border-color: $spotify;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($spotify, 10%);
color : $white;
border-color: darken($spotify, 10%);
}
}
.btn-yahoo {
background : $yahoo;
border-color: $yahoo;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($yahoo, 10%);
color : $white;
border-color: darken($yahoo, 10%);
}
}
.btn-dribbble {
background : $dribbble;
border-color: $dribbble;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($dribbble, 10%);
color : $white;
border-color: darken($dribbble, 10%);
}
}
.btn-skype {
background : $skype;
border-color: $skype;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($skype, 10%);
color : $white;
border-color: darken($skype, 10%);
}
}
.btn-quora {
background : $quora;
border-color: $quora;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($quora, 10%);
color : $white;
border-color: darken($quora, 10%);
}
}
.btn-vimeo {
background : $vimeo;
border-color: $vimeo;
color : $white;
&:active,
&:focus,
&:hover {
background : darken($vimeo, 10%);
color : $white;
border-color: darken($vimeo, 10%);
}
}

246
public/style/scss/components/ui/_ui-card.scss Normal file
View File

@ -0,0 +1,246 @@
.card {
margin-bottom: 1.875rem;
background-color: $white;
transition: all .5s ease-in-out;
position: relative;
border: 0px solid transparent;
border-radius:$radius;
box-shadow: 0px 12px 23px 0px rgba($secondary,0.04);
height: calc(100% - 30px);
// z-index: 0;
@include custommq($max: 575px) {
margin-bottom:0.938rem;
height: calc(100% - 0.938rem);
}
&-body {
padding: 1.875rem;
@include respond('phone') {
padding: 1rem;
}
}
&-title {
font-size: 20px;
font-weight: 500;
// line-height: 2.2rem;
color: #000;
text-transform: capitalize;
// margin-bottom: 1.5rem;
&--large{
font-size: 1.5rem;
}
&--medium{
font-size: 1rem;
}
&--small{
font-size: 0.875rem;
}
}
&-header {
border-color: $border;
position: relative;
background: transparent;
padding:1.5rem 1.875rem 1.25rem;
display: flex;
justify-content: space-between;
align-items: center;
// min-height: 65px;
@include respond('phone') {
padding: 1.25rem 1rem 1.25rem;
}
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
}
.card-title{
margin-bottom: 0px;
}
.subtitle{
padding-top: 5px;
font-size: 14px;
line-height: 1.5;
}
}
&-footer {
border-color: $border;
background: transparent;
padding: 1.25rem 1.875rem 1.25rem;
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
}
@include respond('phone') {
padding: 1rem;
}
}
}
.transparent-card{
&.card{
background: transparent;
border: 1px solid transparent;
box-shadow: none;
}
}
///////////////////
// Card action
///////////////////
.card-action {
> a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
border-color: transparent;
text-align: center;
background: darken($primary,57%);
color: $white;
margin-right: 8px;
@at-root [data-theme-version="dark"] & {
background: $d-bg;
}
&:last-child{
margin-right: 0;
}
&:hover,&:focus{
background: darken($primary,57%);
@at-root [data-theme-version="dark"] & {
background: $d-bg;
}
}
i,span{
font-size: 1rem;
// color: #333333;
}
// padding: 0 .5rem;
}
.dropdown{
width: 30px;
height: 30px;
border-radius: 5px;
border-color: transparent;
text-align: center;
margin-right: 8px;
top: -2px;
position: relative;
display: inline-block;
background: darken($primary,57%);
color: $primary;
@at-root [data-theme-version="dark"] & {
background: $d-bg;
}
&:hover,&:focus{
background: darken($primary,57%);
@at-root [data-theme-version="dark"] & {
background: $d-bg;
}
}
.btn{
padding: 0;
line-height: 27px;
color: $white;
&:focus{
box-shadow: none;
}
}
}
}
.card-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999999;
overflow: auto;
}
.card-loader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.75);
z-index: 999
}
.card-loader i {
margin: 0 auto;
background: darken($primary,7%);
padding: 10px;
border-radius: 50%;
color: $white;
font-size: 1rem
}
.rotate-refresh {
-webkit-animation: mymove 0.8s infinite linear;
animation: mymove 0.8s infinite linear;
display: inline-block
}
.card-header {
.date_picker {
display: inline-block;
padding: 8px;
border: 1px solid $border;
cursor: pointer;
border-radius: .375rem;
}
.border-0{
padding-bottom:0;
}
}
@-webkit-keyframes mymove {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes mymove {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}

50
public/style/scss/components/ui/_ui-carousel.scss Normal file
View File

@ -0,0 +1,50 @@
.carousel-custom{
&-prev, &-next{
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
display: inline-block;
border-radius: 50%;
background: $white;
text-align: center;
i{
font-size: 1rem;
}
&:hover{
background: linear-gradient(to right, rgba(245, 60, 121, 0.99) 0%, rgba(246, 104, 47, 0.99) 100%);
color: $white;
}
}
&-next{
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
}
&-prev{
position: absolute;
top: 50%;
left: 30px;
transform: translateY(-50%);
}
}
.carousel-caption{
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.78);
z-index:0;
h5{
color: $white;
font-size: 1.8rem;
}
p{
margin-bottom: 0;
}
}

142
public/style/scss/components/ui/_ui-dropdown.scss Normal file
View File

@ -0,0 +1,142 @@
.dropdown-toggle:focus {
box-shadow: none!important;
}
.dropdown-outline{
border: .1rem solid $primary;
}
.dropdown-menu{
font-size: inherit;
border: 0;
box-shadow: 0 10px 40px 0 rgba(32,28,69,0.1);
margin-top:0;
border-radius: $radius;
overflow: hidden;
.dropdown-item{
font-size: 16px;
color:$body-color;
padding: 0.5rem 1.75rem;
@include respond('laptop') {
padding: 0.375rem 1rem;
font-size: 14px;
}
&:hover,
&:focus,
&:active,
&.active{
color: $primary;
background:#F4F5F9;
}
&.active,
&:active{
color: $primary !important;
}
}
@at-root [direction="rtl"] #{&} {
right: auto !important;
}
}
////////////////////
// Custom Dropdown
///////////////////
.dropdown-toggle-split {
padding: 0 10px;
opacity: 0.85;
&:after{
margin-left:0 !important;
}
&:active,
&:focus,
&:hover{
opacity:1;
}
}
.dropleft .dropdown-toggle:before,
.dropright .dropdown-toggle:before,
.dropup .dropdown-toggle:after,
.dropdown-toggle:after {
content:"\f107";
font-family:FontAwesome;
border: 0;
vertical-align: middle;
margin-left: 0.25em;
line-height: 1;
}
.dropup .dropdown-toggle:after{
content:"\f106";
}
.dropleft .dropdown-toggle::before {
content:"\f104";
}
.dropright .dropdown-toggle::before {
content:"\f105";
}
.dropright .dropdown-toggle::after {
content:none;
}
.custom-dropdown{
display: inline-block;
margin-bottom: 1rem;
.dropdown-menu{
border: 0px;
min-width: 160px;
// padding: 1rem;
}
}
.card-action{
.custom-dropdown{
// padding: 15px;
margin: 0px;
background: lighten($primary, 30%);
&.show,&:focus,&:hover{
background: $primary;
color: $white;
}
i{
display: inline-block;
padding-top: 9px;
}
}
}
.dropdown{
.dropdown-dots{
position: relative;
height: 5px;
width: 5px;
background: rgba($dark, 0.4);
border-radius: 5px;
display: block;
&:after,
&:before{
content: "";
height: 5px;
width: 5px;
background: rgba($dark, 0.4);
position: absolute;
border-radius: 5px;
}
&:after{
right: -8px;
}
&:before{
left: -8px;
}
&.text-white{
background: rgba($white, 0.7);
&:after,
&:before{
background: rgba($white, 0.7);
}
}
}
}

20
public/style/scss/components/ui/_ui-grid.scss Normal file
View File

@ -0,0 +1,20 @@
.grid-col {
padding: 0.5rem !important;
background:$l-bg;
// box-shadow: 2px 3px 10px 0px rgba(119, 119, 119, 0.1);
}
.row.grid {
margin-bottom: 1.5rem;
text-align: center;
}
.row.grid .grid-col:first-child{
text-align: left;
}

154
public/style/scss/components/ui/_ui-label.scss Normal file
View File

@ -0,0 +1,154 @@
.label {
display: inline-block;
text-align: center;
font-size: 0.75rem;
padding: .2rem .8rem;
&-fixed {
width: 7.5rem;
padding: .6rem 0;
&-lg {
width: 9.5rem;
padding: .6rem 0;
}
}
&-big {
width: 16.8rem;
font-size: 1.4rem;
padding: 1.1rem 0;
}
&-xl {
width: 10.5rem;
padding: 1.1rem 0;
font-size: 1.5rem;
}
&-lg {
width: 9.5rem;
padding: 1.1rem 0;
}
&-md {
width: 8.5rem;
padding: 1.1rem 0;
}
&-sm {
width: 7.5rem;
padding: 1.1rem 0;
}
}
.label-default{
background: #ADB6C7;
}
.label-primary{
background: $primary;
color: $white;
}
.label-secondary{
background: $secondary;
color: $white;
}
.label-info{
background: $info;
color: $white;
}
.label-success{
background: $success;
color: $white;
}
.label-warning{
background: $warning;
color: $white;
}
.label-danger{
background: $danger;
color: $white;
}
.label-light{
background: $light;
color: $black;
}
.label-dark{
background: $dark;
color: $white;
}
code{
word-break: break-word;
padding: 2px 5px;
border-radius: 3px;
background: lighten($danger, 33%);
color: $danger;
@at-root [data-theme-version="dark"] & {
background: rgba($danger, 0.1);
}
}
.heading-labels{
color: #333333;
& > *{
margin-bottom: .8rem;
}
h1{
.label{
font-size: 18px;
font-weight: normal;
padding: .4rem .9rem;
}
}
h2{
.label{
font-size: 16px;
font-weight: normal;
padding: 0.3rem .9rem;
}
}
h3{
.label{
font-size: 14px;
font-weight: normal;
}
}
h4{
.label{
font-size: 12px;
font-weight: normal;
}
}
h5{
.label{
font-size: 12px;
font-weight: normal;
}
}
h6{
.label{
font-size: 12px;
font-weight: normal;
}
}
}

36
public/style/scss/components/ui/_ui-list-group.scss Normal file
View File

@ -0,0 +1,36 @@
.list-group-item {
background-color: rgba(255,255,255,0);
border: 1px solid $border;
padding: 1rem 1.5rem;
border-radius: 0;
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
}
&:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.list-group-item.disabled, .list-group-item:disabled {
color: #fff;
background-color: $secondary;
border-color: $secondary;
}
[class*="bg-"]{
.list-group-item{
border-color:rgba($white, 0.05);
}
}
.bg-warning{
.list-group-item{
border-color:rgba($black, 0.05);
}
}
// .list-group-item-action {
// color: #fff;
// }

5
public/style/scss/components/ui/_ui-media.scss Normal file
View File

@ -0,0 +1,5 @@
.media{
img{
border-radius: 3px;
}
}

146
public/style/scss/components/ui/_ui-menu.scss Normal file
View File

@ -0,0 +1,146 @@
.vertical-card__menu {
// box-shadow: none;
&:hover {
box-shadow: none;
}
&--image {
text-align: center;
img {
width: 100%;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
}
&--status {
&.closed {
background: $danger;
&:after {
border-top: 10px solid $danger;
}
.ribbon-curve {
border-top: 11px solid $danger;
border-bottom: 10px solid $danger;
}
}
}
&--desc {
// padding: 0.9375rem 1.25rem;
// border-left: 1px solid #e5e5e5;
// border-right: 1px solid #e5e5e5;
p {
margin-bottom: 0.625rem;
}
}
&--price {
font-size: 1.25rem;
margin: 0;
font-weight: 700;
}
&--rating {
font-size: 0.75rem;
}
&--title {
// margin-bottom: 0.625rem;
font-weight: 700;
}
&--button {
button {
font-size: 0.75rem;
}
}
&--location {
// font-size: 0.75rem;
}
.card-footer {
padding: 15px 20px;
background-color: $border;
// border: 1px solid #e5e5e5;
border-top: none;
@include custommq($min: 1200px, $max: 1440px) {
padding: 15px;
}
span{
color: $dark;
margin-right: 0.3125rem;
}
}
}
.horizontal-card__menu {
box-shadow: 0 0 7px rgba(173, 173, 173, 0.32);
display: flex;
flex-direction: row;
@include media-breakpoint-down(xs) {
display: block;
}
.card-body {
padding: 0;
padding: 20px 30px;
}
&--image {
flex-basis: 30%;
max-width: 30%;
img {
height: 100%;
width: 100%;
}
@include media-breakpoint-down(xs) {
max-width: unset;
flex-basis: 100%;
}
}
&--title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.3125rem;
}
&--fav {
margin-right: 0.5rem;
}
&--price {
margin: 0;
font-size: 1rem;
font-weight: 700;
}
&--rating {
font-size: 0.625rem;
}
&--footer {
margin-top: 10px;
}
}
.prev_price {
text-decoration: line-through;
// color: $muted;
font-size: 80%;
opacity: 0.5;
}

108
public/style/scss/components/ui/_ui-modal.scss Normal file
View File

@ -0,0 +1,108 @@
// .modal{
// border: 0;
// z-index: 9999999999;
// &-content{
// border: 0;
// box-shadow: 0px 2px 21px 6px rgba(70, 66, 66, 0.26);
// }
// }
// // primary modal rule
// #primaryModal{
// .modal-header{
// background: $primary;
// .modal-title,button{
// color: #fff;
// opacity: 1;
// }
// }
// }
// //danger modal rule
// #dangerModal{
// .modal-header{
// background: $danger;
// .modal-title,button{
// color: #fff;
// opacity: 1;
// }
// }
// }
// //warning modal rule
// #warningModal{
// .modal-header{
// background: $warning;
// .modal-title,button{
// color: #a39e06 ;
// opacity: 1;
// }
// }
// }
// //success modal rule
// #successModal{
// .modal-header{
// background: $success;
// .modal-title,button{
// color: #fff;
// opacity: 1;
// }
// }
// }
// .bootstrap-modal-wrapper{
// button:not(:last-child){
// margin-right: 7px;
// }
// button{
// margin-bottom: .5rem;
// &:focus{
// box-shadow: none;
// }
// }
// }
.modal-header{
padding: 1rem 1.875rem;
.close{
padding: 0.875rem 1.815rem;
margin: 0;
position: absolute;
right: 0;
float: none;
top: 0;
font-size: 30px;
font-weight: 100;
}
}
.modal-body{
padding: 1.875rem;
}
.modal-footer{
padding: 1rem 1.875rem;
}
.modal-content{
border-radius:$radius;
}
.modal-backdrop{
z-index: 10!important;
}

320
public/style/scss/components/ui/_ui-pagination.scss Normal file
View File

@ -0,0 +1,320 @@
.pagination .page-item{
.page-link{
&:hover{
background: $primary;
border-color: $primary;
color:$white;
}
}
&.active .page-link{
background: $primary;
border-color: $primary;
color:$white;
}
}
.pagination {
margin-bottom: 20px;
.page-item {
&.page-indicator .page-link {
padding: .65rem .8rem;
font-size: 14px;
}
&.page-indicator:hover{
.page-link{
color: $dark;
}
}
.page-link {
// height: 3.125rem;
text-align: center;
z-index:2;
padding: 0.55rem 1rem;
font-size: 1rem;
background: rgba(255, 255, 255, 0.15);
color: $dark;
// line-height: 2.375rem;
border: 1px solid $border;
@at-root [data-theme-version="dark"] & {
border-color: $d-border;
color: $d-ctl;
background: rgba(255, 255, 255, 0);
}
&:hover i,span{
color: $white;
}
&:focus{
outline: 0;
box-shadow: none;
}
&:hover{
background: $primary;
color: $white;
border-color: $primary;
}
}
&.active .page-link {
background-color: $primary;
border-color: $primary;
color: $white;
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
@at-root [data-theme-version="dark"] & {
color:$white;
}
}
.page-link {
// width: 4.0625rem;
color: $dark;
@include transitionMedium;
}
&:last-child .page-link{
margin-right: 0;
}
&:first-child .page-link{
@at-root [direction="rtl"] #{&} {
margin-right: 0;
}
}
}
&.no-bg{
li:not(.page-indicator):not(.active) .page-link{
background:transparent;
border-color:transparent;
}
&.pagination-primary{
li:not(.page-indicator):not(.active):hover .page-link{
background:$primary;
border-color:$primary;
@at-root [data-theme-version="dark"] & {
background:$primary;
border-color:$primary;
}
}
}
&.pagination-danger{
li:not(.page-indicator):not(.active):hover .page-link{
background:$danger;
border-color:$danger;
@at-root [data-theme-version="dark"] & {
background:$danger;
border-color:$danger;
}
}
}
&.pagination-info{
li:not(.page-indicator):not(.active):hover .page-link{
background:$info;
border-color:$info;
@at-root [data-theme-version="dark"] & {
background:$info;
border-color:$info;
}
}
}
&.pagination-warning{
li:not(.page-indicator):not(.active):hover .page-link{
background:$warning;
border-color:$warning;
@at-root [data-theme-version="dark"] & {
background:$warning;
border-color:$warning;
}
}
}
}
&-primary{
.page-item{
.page-link{
background:$primary-light;
border-color:$primary-light;
color:$primary;
@at-root [data-theme-version="dark"] & {
background:$primary-opacity;
border-color:transparent;
color:$primary;
}
}
&:hover,
&.active{
.page-link{
background:$primary;
border-color:$primary;
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
@at-root [data-theme-version="dark"] & {
color:$white;
}
}
}
}
}
&-danger{
.page-item{
.page-link{
background:$danger-light;
border-color:$danger-light;
color:$danger;
@at-root [data-theme-version="dark"] & {
background:$danger-opacity;
border-color:transparent;
color:$danger;
}
}
&:hover,
&.active{
.page-link{
background:$danger;
border-color:$danger;
box-shadow:0 10px 20px 0px rgba($danger, 0.2);
@at-root [data-theme-version="dark"] & {
color:$white;
}
}
}
}
}
&-info{
.page-item{
.page-link{
background:$info-light;
border-color:$info-light;
color:$info;
@at-root [data-theme-version="dark"] & {
background:$info-opacity;
border-color:transparent;
color:$info;
}
}
&:hover,
&.active{
.page-link{
background:$info;
border-color:$info;
box-shadow:0 10px 20px 0px rgba($info, 0.2);
}
}
}
}
&-warning{
.page-item{
.page-link{
background:$warning-light;
border-color:$warning-light;
color:$warning;
@at-root [data-theme-version="dark"] & {
background:$warning-opacity;
border-color:transparent;
color:$warning;
}
}
&:hover,
&.active{
.page-link{
background:$warning;
border-color:$warning;
box-shadow:0 10px 20px 0px rgba($warning, 0.2);
}
}
}
}
&-gutter{
.page-item{
margin-right: 7px;
.page-link{
border-radius: $radius !important;
}
}
}
&-circle{
.page-item{
margin-right: 7px;
.page-link, &.page-indicator .page-link{
width: 40px;
height: 40px;
padding: 0;
line-height: 40px;
border-radius: 50% !important;
padding: 0;
}
}
}
&.pagination-md{
.page-item{
.page-link{
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
}
}
&.pagination-sm{
.page-item{
&.page-indicator .page-link {
font-size: 12px;
}
.page-link{
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
}
}
&.pagination-xs{
.page-item{
&.page-indicator .page-link {
font-size: 10px;
}
.page-link{
padding: 0;
width: 25px;
height: 25px;
line-height: 25px;
font-size: 12px;
}
}
}
}

73
public/style/scss/components/ui/_ui-popover.scss Normal file
View File

@ -0,0 +1,73 @@
.popover{
border: 2px solid $secondary;
min-width: 210px;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);
border-radius:0;
@at-root [data-theme-version="dark"] & {
background-color: $d-bg;
}
&-header{
background: $secondary;
color: $white;
font-weight: 300;
border-radius:0;
&::before{
border-bottom: 0 !important;
}
}
&-body{
font-size: 0.75rem;
}
.popover-header{
@at-root [data-theme-version="dark"] & {
border-color: $dark-card;
}
}
}
.bootstrap-popover-wrapper{
.bootstrap-popover:not(:last-child){
margin-right: 8px;
}
.bootstrap-popover{
margin-bottom: .5rem;
button:hover,button:focus{
background: $primary;
color: $white;
box-shadow: none;
}
}
}
// .tooltip {
// font-size: 15px;
// }
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
bottom: 0px;
border-top-color: $secondary;
}
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
right: 0px;
border-left-color: $secondary;
}
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
left: 0px;
border-right-color: $secondary;
}
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
top: 0px;
border-bottom-color: $secondary;
}
.note-popover{
display: none;
}

0
public/style/scss/components/ui/_ui-preloader.scss Normal file
View File

183
public/style/scss/components/ui/_ui-pricing.scss Normal file
View File

@ -0,0 +1,183 @@
.pricing-wrapper {
margin-top: 7rem;
.pricing-heading-text {
text-align: center;
margin-bottom: 6rem;
h2 {
font-size: 4.5rem;
line-height: 1.2;
color: $pale-sky;
span {
display: block;
}
}
p {
margin-bottom: 0;
}
a{
color: $pale-sky;
text-decoration: underline;
}
.plan-swither {
display: flex;
justify-content: center;
align-items: flex-end;
margin-top: 3rem;
&>* {
margin-left: 1rem;
margin-right: 1rem;
}
.switch label {
margin-bottom: 0;
}
.badge {
height: 5.5rem;
width: 5.5rem;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.4rem;
}
}
}
.single-pricing-table {
position: relative;
text-align: center;
min-height: 89rem;
.upper-border {
height: 1.5rem;
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
&.style-1 {
@extend %gradient-1;
}
&.style-2 {
@extend %gradient-2;
}
&.style-3 {
@extend %gradient-3;
}
}
.plan-name {
margin-top: 2rem;
color: #6a707e;
}
.plan-price {
padding: 2.8rem 0;
margin: 3rem 0;
display: flex;
color: $white;
justify-content: center;
&.style-1 {
@extend %gradient-1;
}
&.style-2 {
@extend %gradient-2;
}
&.style-3 {
@extend %gradient-3;
}
h2 {
font-size: 6rem;
color: $white;
margin: 0;
line-height: 1;
font-weight: normal;
}
.currency-timeplan {
align-self: flex-end;
}
}
.plan-icon {
margin-top: 3rem;
}
.plan-specification {
ul {
margin: 0;
li {
margin: 2.5rem 0;
del{
color: $athensGray;
}
}
}
}
.btn {
width: 80%;
margin: 0 auto;
border: .1rem solid $border;
margin-top: 4.5rem;
margin-bottom: 1.5rem;
color: #2290ff;
transition: all .2s;
padding: 0.9rem 1.8rem;
font-size: 1.7rem;
font-weight: 600;
&:hover {
color: $white;
&.style-1 {
@extend %gradient-1;
}
&.style-2 {
@extend %gradient-2;
}
&.style-3 {
@extend %gradient-3;
}
}
}
}
.pricing-footer-text {
margin-bottom: 7rem;
p {
margin-bottom: 4rem;
b{
border-bottom: 1px solid $sky;
}
}
.btn{
font-size: 1.6rem;
font-weight: 600;
padding: .95rem 2.5rem;
i{
padding-right: .5rem;
}
}
}
}

86
public/style/scss/components/ui/_ui-progressbar.scss Normal file
View File

@ -0,0 +1,86 @@
// Variable.scss
.progress-bar {
background-color: $primary;
}
.progress-bar-primary {
background-color: $primary;
}
.progress-bar-success {
background-color: $success;
}
.progress-bar-info {
background-color: $info;
}
.progress-bar-danger {
background-color: $danger;
}
.progress-bar-warning {
background-color: $warning;
}
.progress-bar-pink {
background-color: $pink;
}
.progress {
height: 6px;
overflow: hidden;
// box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
border-radius: $radius;
@at-root [data-theme-version="dark"] & {
background-color: $d-bg;
}
&-bar{
// outline: 1px solid #fff;
border-radius: 4px;
}
}
.progress-vertical {
display: inline-block;
margin-bottom: 0;
margin-right: 2rem;
min-height: 17rem;
position: relative;
@include media-breakpoint-down(md) {
margin-right: 1rem;
}
}
.progress-vertical-bottom {
display: inline-block;
margin-bottom: 0;
margin-right: 2rem;
min-height: 17rem;
position: relative;
transform: rotate(180deg);
@include media-breakpoint-down(md) {
margin-right: 1rem;
}
}
.progress-animated {
animation-duration: 5s;
animation-name: myanimation;
transition: all 5s ease 0s;
}
@keyframes myanimation {
0% {
width: 0;
}
}
@keyframes myanimation {
0% {
width: 0;
}
}

161
public/style/scss/components/ui/_ui-ribbon.scss Normal file
View File

@ -0,0 +1,161 @@
.ribbon {
position: absolute;
z-index: 1;
text-transform: uppercase;
&__one {
top: 15px;
left: -11px;
min-height: 20px;
min-width: 52px;
text-align: center;
padding: 3px 10px;
background: #3AB54B;
color: #fff;
font-size: 0.625rem;
&::after {
position: absolute;
width: 0;
height: 0;
border-top: 10px solid #239132;
border-left: 11px solid transparent;
left: 0;
content: "";
bottom: -10px;
}
}
&__two {
width: 50px;
height: 50px;
display: inline-block;
background: $warning;
line-height: 50px;
text-align: center;
font-size: 16px;
color: $white;
right: 15px;
top: 15px;
border-radius: 3px;
// &::after {
// position: absolute;
// content: "";
// -webkit-clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
// clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
// height: 22px;
// width: 40px;
// left: 50%;
// top: 75%;
// background: $primary;
// transform: translateX(-50%);
// }
}
&__three {
left: -1.875rem;
top: 0.875rem;
width: 6.875rem;
height: 1.5625rem;
background-color: $danger;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
transform: rotate(-45deg);
color: $white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
&__four {
left: 8px;
top: -8px;
width: 110px;
height: 50px;
background-color: $primary;
z-index: auto;
color: $white;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
&:after {
right: -5px;
}
&:before {
left: -5px;
}
// &:after, &:before {
// }
&:after, &:before {
z-index: -1;
background-color: lighten($color: $primary, $amount: 20%);
top: 3px;
transform: rotate(45deg);
content: "";
height: 10px;
width: 10px;
position: absolute;
}
}
&__five {
left: -1.875rem;
top: 0.625rem;
width: 6.875rem;
height: 1.875rem;
background-color: $primary;
transform: rotate(-45deg);
font-size: 0.75rem;
color: $white;
padding-bottom: 0.3125rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
&::before {
position: absolute;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 50px 50px;
border-color: transparent transparent $primary transparent;
left: 0.25rem;
top: -2.8125rem;
}
}
&__six {
left: 0;
top: 1.125rem;
width: 6.875rem;
height: 2.375rem;
background-color: $primary;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
display: flex;
font-size: 1.25rem;
align-items: center;
justify-content: center;
color: $white;
}
&-curve {
position: absolute;
top: 0;
right: -6px;
width: 10px;
height: 11px;
border-top: 11px solid #3AB54B;
border-bottom: 10px solid #3AB54B;
border-right: 5px solid transparent;
}
}

21
public/style/scss/components/ui/_ui-scrollbar.scss Normal file
View File

@ -0,0 +1,21 @@
.jsgrid-grid-body,
.dataTables_scrollBody,
.table-responsive {
&::-webkit-scrollbar {
background-color: #F5F5F5;
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
&::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: $body-color;
}
}

103
public/style/scss/components/ui/_ui-step.scss Normal file
View File

@ -0,0 +1,103 @@
%remain-steps {
&:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 400;
}
&:after {
background-color: $border;
}
}
.multi-steps {
display: table;
table-layout: fixed;
width: 100%;
>li {
counter-increment: stepNum;
text-align: center;
display: table-cell;
position: relative;
color: $primary;
@include media-breakpoint-down(xs) {
font-size: 0.75rem;
}
&:before {
content: '\2713';
display: block;
margin: 0 auto 4px;
background-color: $white;
width: 25px;
height: 25px;
line-height: 22px;
text-align: center;
font-weight: bold;
position: relative;
z-index: 1;
@include media-breakpoint-down(xs) {
width: 25px;
height: 25px;
line-height: 21px;
}
border: {
width: 2px;
style: solid;
color: $primary;
radius: 5px;
}
}
&:after {
content: '';
height: 2px;
width: 100%;
background-color: $primary;
position: absolute;
top: 12px;
left: 50%;
@at-root [direction="rtl"] #{&} {
left: auto;
right: 50%;
}
@include media-breakpoint-down(xs) {
top: 12px;
}
}
&:last-child {
&:after {
display: none;
}
}
&.is-active {
@extend %remain-steps;
&:before {
background-color: $white;
border-color: $primary;
}
~li {
color: $body-color;
@extend %remain-steps;
&:before {
background-color: $border;
border-color: $border;
}
}
}
}
}

85
public/style/scss/components/ui/_ui-tab.scss Normal file
View File

@ -0,0 +1,85 @@
.nav-pills {
.nav-link {
border-radius: $radius;
padding: 0.75rem 1.25rem;
}
}
.default-tab{
.nav-link{
background: transparent;
border-radius: 0px;
font-weight: 500;
i{
display:inline-block;
transform:scale(1.5);
color:$primary;
}
&:focus,
&:hover,
&.active{
color: #495057;
background-color: #fff;
border-color: #dee2e6 #dee2e6 #fff #ebeef6;
border-radius: $radius $radius 0 0;
color:$primary;
@at-root [data-theme-version="dark"] & {
background-color: $primary-opacity;
border-color: transparent transparent $d-border transparent;
}
}
}
}
.custom-tab-1{
.nav-link{
background: transparent;
border-radius: 0px;
font-weight: 500;
border-bottom:3px solid transparent;
border-width: 0 0px 3px 0;
i{
display:inline-block;
transform:scale(1.5);
color:$primary;
}
&:focus,
&:hover,
&.active{
color: #495057;
background-color: #fff;
border-color:$primary ;
border-radius:0;
color: $primary;
border-width: 0 0px 3px 0;
@at-root [data-theme-version="dark"] & {
background-color: $primary-opacity;
}
}
}
}
.nav-pills{
&.light{
.nav-link.active,
.show > .nav-link{
background:$primary-light;
color:$primary;
box-shadow:none;
@at-root [data-theme-version="dark"] & {
background:$primary-opacity;
}
}
}
.nav-link.active,
.show > .nav-link{
box-shadow:0 0 20px 0 rgba($primary, 0.2);
}
}

297
public/style/scss/components/ui/_ui-timeline.scss Normal file
View File

@ -0,0 +1,297 @@
.widget-timeline{
.timeline {
list-style: none;
position: relative;
&:before {
top: 20px;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
left: 9px;
margin-right: -1.5px;
background: $light;
@at-root [data-theme-version="dark"] & {
background: $d-border;
}
@at-root [direction="rtl"] #{&} {
left: auto;
right: 9px;
margin-right: auto;
margin-left: -1.5px;
}
}
> li {
margin-bottom: 15px;
position: relative;
&:before {
content: " ";
display: table;
}
&:after {
content: " ";
display: table;
clear: both;
}
> {
.timeline-panel {
border-radius: $radius;
padding: 15px 20px;
position: relative;
display:block;
margin-left: 40px;
border-width:1px;
border-style:solid;
span{
font-size: 12px;
display: block;
margin-bottom: 5px;
opacity: 0.8;
letter-spacing: 1px;
}
p{
font-size:14px;
}
&:after{
content: "";
width: 10px;
height: 10px;
background: inherit;
border-color: inherit;
border-style: solid;
border-width: 0px 0px 1px 1px;
display: block;
position: absolute;
left: -5px;
transform: rotate(45deg);
top: 15px;
}
}
.timeline-badge {
border-radius: 50%;
height: 22px;
left: 0;
position: absolute;
top: 10px;
width: 22px;
border-width: 2px;
border-style: solid;
background:$white;
padding:4px;
@at-root [data-theme-version="dark"] & {
background-color: $dark-card;
}
&:after{
content:"";
width:10px;
height:10px;
border-radius:100%;
display:block;
}
@at-root [direction="rtl"] #{&} {
left: auto;
right: 19px;
}
}
}
}
}
.timeline-body > p {
font-size: 12px;
}
.timeline-badge {
&.primary{
border-color:$primary-light;
@at-root [data-theme-version="dark"] & {
border-color: $primary-opacity;
}
&:after{
background-color: $primary !important;
box-shadow:0 5px 10px 0 rgba($primary, 0.2);
}
& + .timeline-panel{
background:$primary-light;
border-color:$primary-light;
@at-root [data-theme-version="dark"] & {
border-color: transparent;
background-color: $primary-opacity;
}
}
}
&.success{
border-color:$success-light;
@at-root [data-theme-version="dark"] & {
border-color: $success-opacity;
}
&:after{
background-color: $success !important;
box-shadow:0 5px 10px 0 rgba($success, 0.2);
}
& + .timeline-panel{
background:$success-light;
border-color:$success-light;
@at-root [data-theme-version="dark"] & {
background-color: $success-opacity;
border-color: transparent;
}
}
}
&.warning{
border-color:$warning-light;
@at-root [data-theme-version="dark"] & {
border-color: $warning-opacity;
}
&:after{
background-color: $warning !important;
box-shadow:0 5px 10px 0 rgba($warning, 0.2);
}
& + .timeline-panel{
background:$warning-light;
border-color:$warning-light;
@at-root [data-theme-version="dark"] & {
background-color: $warning-opacity;
border-color: transparent;
}
}
}
&.danger{
border-color:$danger-light;
@at-root [data-theme-version="dark"] & {
border-color: $danger-opacity;
}
&:after{
background-color: $danger !important;
box-shadow:0 5px 10px 0 rgba($danger, 0.2);
}
& + .timeline-panel{
background:$danger-light;
border-color:$danger-light;
@at-root [data-theme-version="dark"] & {
background-color: $danger-opacity;
border-color: transparent;
}
}
}
&.info{
border-color:$info-light;
@at-root [data-theme-version="dark"] & {
border-color: $info-opacity;
}
&:after{
background-color: $info !important;
box-shadow:0 5px 10px 0 rgba($info, 0.2);
}
& + .timeline-panel{
background:$info-light;
border-color:$info-light;
@at-root [data-theme-version="dark"] & {
background-color: $info-opacity;
border-color: transparent;
}
}
}
&.dark{
border-color:$dark-light;
@at-root [data-theme-version="dark"] & {
border-color: $dark-opacity;
}
&:after{
background-color: $dark !important;
box-shadow:0 5px 10px 0 rgba($dark, 0.2);
}
& + .timeline-panel{
background:$dark-light;
border-color:$dark-light;
@at-root [data-theme-version="dark"] & {
background-color: $dark-opacity;
border-color: transparent;
}
}
}
}
&.style-1{
.timeline-panel{
background:transparent;
}
.timeline {
.timeline-badge {
&.timeline-badge{
& + .timeline-panel{
background: transparent !important;
border-style:solid;
border-width: 0 0 0 5px;
border-radius: 0;
padding: 5px 10px 5px 15px;
&:after{
border:0;
left: -9px;
width: 7px;
height: 7px;
}
}
}
&.primary{
& + .timeline-panel{
border-color:$primary;
&:after{
background:$primary;
}
}
}
&.success{
& + .timeline-panel{
border-color:$success;
&:after{
background:$success;
}
}
}
&.warning{
& + .timeline-panel{
border-color:$warning;
&:after{
background:$warning;
}
}
}
&.danger{
& + .timeline-panel{
border-color:$danger;
&:after{
background:$danger;
}
}
}
&.info{
& + .timeline-panel{
border-color:$info;
&:after{
background:$info;
}
}
}
&.dark{
& + .timeline-panel{
border-color:$dark;
&:after{
background:$dark;
}
}
}
}
}
}
}

48
public/style/scss/components/ui/_ui-tooltip.scss Normal file
View File

@ -0,0 +1,48 @@
.tooltip{
&-wrapper{
button:not(:last-child){
margin-right: 8px;
}
button:hover{
background: $primary;
color: $white;
}
button{
margin-bottom: .5rem;
&:focus{
box-shadow: none;
}
}
}
&-inner{
border-radius: 0;
background: #333333;
font-size: 12px;
font-weight: 300;
padding: 0.35rem 0.7rem;
}
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
// border-width: 0 0.6rem 0.6rem;
border-bottom-color: #333333;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{
border-right-color: #333333;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{
border-left-color: #333333;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{
border-top-color: #333333;
}