ikinci temizlik tamamlandı
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,55 @@
|
||||
//
|
||||
// apexchart.scss
|
||||
// Vendor css override and new css added
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light{
|
||||
background: $white !important;
|
||||
border: 0 !important;
|
||||
box-shadow: 0 12px 14px rgba(107, 124, 147, 0.30);
|
||||
}
|
||||
|
||||
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title{
|
||||
background: $gray-100 !important;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid $gray-300 !important;
|
||||
color: $dark;
|
||||
}
|
||||
.apexcharts-theme-light .apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-theme-light .apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-theme-light .apexcharts-tooltip-text-z-value,
|
||||
.apexcharts-theme-light .apexcharts-tooltip-text-y-label{
|
||||
color: $dark;
|
||||
margin-left: 1px !important;
|
||||
}
|
||||
|
||||
.apexcharts-theme-dark .apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-theme-dark .apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-theme-dark .apexcharts-tooltip-text-z-value,
|
||||
.apexcharts-theme-dark .apexcharts-tooltip-text-y-label{
|
||||
color: $white;
|
||||
margin-left: 1px !important;
|
||||
}
|
||||
|
||||
.apexcharts-legend-text, .apexcharts-text, .apexcharts-title-text, .apexcharts-text tspan, .apexcharts-tooltip-title, .apexcharts-tooltip-text, .apexcharts-xaxistooltip-text, .apexcharts-yaxistooltip-text {
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
|
||||
.apexcharts-xaxis text, .apexcharts-yaxis text{
|
||||
fill: $gray-400;
|
||||
}
|
||||
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip{
|
||||
background: $white !important;
|
||||
box-shadow: 0 3px 14px rgba(107, 124, 147, 0.30);
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom:after {
|
||||
border-bottom-color: $body-bg !important;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip, .apexcharts-yaxistooltip-left:before, .apexcharts-xaxistooltip-bottom:before {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip{
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
//
|
||||
// avatar.scss
|
||||
// Theme Component
|
||||
|
||||
.avatar {
|
||||
height: $avatar-size-base;
|
||||
width: $avatar-size-base;
|
||||
position: relative;
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-group{
|
||||
padding: 0;
|
||||
display: flex;
|
||||
> li{
|
||||
position: relative;
|
||||
&:not(:last-child){
|
||||
margin-right: -0.8rem;
|
||||
}
|
||||
}
|
||||
.avatar-img{
|
||||
border: 2px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// avatar Sizing
|
||||
|
||||
.avatar {
|
||||
.avatar-name{
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// avatar Sizing
|
||||
.avatar-xs {
|
||||
height: $avatar-size-xs;
|
||||
width: $avatar-size-xs;
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
height: $avatar-size-sm;
|
||||
width: $avatar-size-sm;
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
height: $avatar-size-lg;
|
||||
width: $avatar-size-lg;
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
height: $avatar-size-xl;
|
||||
width: $avatar-size-xl;
|
||||
}
|
||||
|
||||
.avatar-xxl {
|
||||
height: $avatar-size-xl;
|
||||
width: $avatar-size-xl;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: $avatar-size-xxl;
|
||||
height: $avatar-size-xxl;
|
||||
}
|
||||
}
|
||||
.avatar-xxxl {
|
||||
height: $avatar-size-xxl;
|
||||
width: $avatar-size-xxl;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
width: $avatar-size-xxxl;
|
||||
height: $avatar-size-xxxl;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
//
|
||||
// divider.scss
|
||||
// Theme Component
|
||||
|
||||
.divider{
|
||||
height: 1px;
|
||||
background: $black;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.divider-light{
|
||||
height: 1px;
|
||||
background: $white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -0,0 +1,481 @@
|
||||
//
|
||||
// general.scss
|
||||
// Theme general elements and helper styling
|
||||
|
||||
|
||||
// GLightbox and plyr controls theme
|
||||
.plyr__control--overlaid, .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded=true], .plyr--audio .plyr__control:hover, .plyr--audio .plyr__control[aria-expanded=true]{
|
||||
background: $primary;
|
||||
}
|
||||
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
|
||||
background: $primary;
|
||||
}
|
||||
.plyr--full-ui input[type=range]{
|
||||
color: $primary;
|
||||
}
|
||||
.plyr--audio .plyr__controls {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
.glightbox-clean .gclose, .glightbox-modern .gclose{
|
||||
right: auto !important;
|
||||
left: 20px;
|
||||
}
|
||||
*/
|
||||
|
||||
// Search
|
||||
.nav-search .dropdown-menu{
|
||||
top: 120%;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
transition: $transition-base;
|
||||
width: 300px;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
.nav-search .dropdown-menu.show{
|
||||
top: 100%;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-search .dropdown-menu{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Back to top
|
||||
.back-top {
|
||||
cursor: pointer;
|
||||
position: fixed !important;
|
||||
bottom: 40px;
|
||||
right: 40px;
|
||||
display: block;
|
||||
z-index: 99;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(50%);
|
||||
transition: $transition-base;
|
||||
background: rgba($primary, $soft-alpha + 0.1);
|
||||
color: $primary;
|
||||
border-radius: 50%;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
text-align: center;
|
||||
i{
|
||||
font-size: 1.6rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
&.back-top-show {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.back-top {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// sticky post (visible on scroll)
|
||||
.sticky-post{
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 50px;
|
||||
width: 300px;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transform: translateX(50%);
|
||||
transition: $transition-base;
|
||||
}
|
||||
.sticky-post.sticky-post-sticked{
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
|
||||
}
|
||||
|
||||
// To flip element in RTL
|
||||
/* rtl:raw:
|
||||
.rtl-flip {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.rtl-flip.bi:before{
|
||||
transform: inherit;
|
||||
}
|
||||
*/
|
||||
|
||||
// parallax
|
||||
.bg-parallax{
|
||||
transform: translate3d(0, 0, 0);
|
||||
&:before {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer fixed
|
||||
@include media-breakpoint-up(md) {
|
||||
footer.footer-sticky {
|
||||
position: fixed !important;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// pre loader
|
||||
.preloader {
|
||||
background-color: $white;
|
||||
position: fixed;
|
||||
z-index: 1190;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
.preloader-item {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode item hide and show
|
||||
.dark-mode-item{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html[data-theme='dark']{
|
||||
.dark-mode-item{
|
||||
display: block !important;
|
||||
}
|
||||
.light-mode-item{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dark mode switch
|
||||
.dark-mode-switch{
|
||||
margin: 0;
|
||||
&.form-check{
|
||||
min-height: auto;
|
||||
}
|
||||
.form-check-input, .form-check-label{
|
||||
cursor: pointer !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modeswitch {
|
||||
width: 42px;
|
||||
height: 12px;
|
||||
background: $gray-600;
|
||||
border-radius: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 16px;
|
||||
transition: all 1s;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transform: translateX(-14%);
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background: #d8831b;
|
||||
border: 2px solid $white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
transition: all 1s;
|
||||
|
||||
&:before {
|
||||
content: "\f185";
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .modeswitch {
|
||||
.switch {
|
||||
transform: translateX(18px) rotate(1turn);
|
||||
background: $dark;
|
||||
&:before {
|
||||
content: "\f186";
|
||||
}
|
||||
}
|
||||
background: $gray-400;
|
||||
}
|
||||
.navbar-dark{
|
||||
.modeswitch{
|
||||
background: $gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
// modeswitch wrap 2
|
||||
.modeswitch-small {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
.switch {
|
||||
.switch-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
font-size: 22px;
|
||||
color: $warning;
|
||||
transition: all 0.3s;
|
||||
&:before {
|
||||
content: "\f185";
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 900;
|
||||
border: none;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
html[data-theme=dark] .modeswitch-small .switch-icon:before {
|
||||
content: "\f186";
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Font size accessibility
|
||||
html{
|
||||
&.font-lg{
|
||||
font-size:20px;
|
||||
transition: $transition-base;
|
||||
@include media-breakpoint-up(xxl) {
|
||||
.container{
|
||||
max-width: 1300px;
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.font-sm{
|
||||
font-size:14px;
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Rotating text badge
|
||||
.rotating-text-badge {
|
||||
position: absolute;
|
||||
right: -330px;
|
||||
top: -100px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
.rotating-text-badge {
|
||||
direction: ltr !important;
|
||||
}
|
||||
*/
|
||||
|
||||
.rotating-text-badge text {
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.rotating-text-badge svg {
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
animation-name: rotate;
|
||||
animation-duration: 9s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from { -webkit-transform: rotate(360deg); }
|
||||
to { -webkit-transform: rotate(0); }
|
||||
}
|
||||
@-moz-keyframes rotate {
|
||||
from { -moz-transform: rotate(360deg); }
|
||||
to { -moz-transform: rotate(0); }
|
||||
}
|
||||
@-ms-keyframes rotate {
|
||||
from { -ms-transform: rotate(360deg); }
|
||||
to { -ms-transform: rotate(0); }
|
||||
}
|
||||
@-o-keyframes rotate {
|
||||
from { -o-transform: rotate(360deg); }
|
||||
to { -o-transform: rotate(0); }
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(360deg); }
|
||||
to { transform: rotate(0); }
|
||||
}
|
||||
|
||||
// Spilt fixed
|
||||
.spilt-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
margin-left: 90px;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
// Spilt content
|
||||
.spilt-content {
|
||||
padding-left: 740px;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
|
||||
// Media down xl
|
||||
@include media-breakpoint-down(xl) {
|
||||
.spilt-fixed {
|
||||
width: 400px;
|
||||
}
|
||||
.spilt-content {
|
||||
padding-left: 540px;
|
||||
}
|
||||
.rotating-text-badge {
|
||||
right: -230px;
|
||||
top: 0;
|
||||
width: 740px;
|
||||
height: 740px;
|
||||
}
|
||||
}
|
||||
|
||||
// Media down lg
|
||||
@include media-breakpoint-down(lg) {
|
||||
.spilt-fixed {
|
||||
margin-left: 0;
|
||||
position: static;
|
||||
width: 100%;
|
||||
height: auto !important;
|
||||
}
|
||||
.spilt-content {
|
||||
padding-left: 105px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Media down sm
|
||||
@include media-breakpoint-down(sm) {
|
||||
.navbar-vertical-compact {
|
||||
width: 70px;
|
||||
}
|
||||
.spilt-content {
|
||||
padding-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay scrollbar color
|
||||
// .os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle,
|
||||
// .os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle {
|
||||
// background: rgba($black, 0.02);
|
||||
// }
|
||||
|
||||
// Notification dots blink
|
||||
.animation-blink {
|
||||
animation: blink 2s infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
.notif-badge {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: $danger;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// Radio button css for soft success color
|
||||
.btn-primary-soft-check{
|
||||
background-color: $light;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.btn-primary-soft-check:hover {
|
||||
background-color: rgba($primary, 0.2);
|
||||
border: $border-width $border-style $primary;
|
||||
}
|
||||
.btn-check:active+.btn-primary-soft-check, .btn-check:checked+.btn-primary-soft-check, .btn-primary-soft-check.active, .btn-primary-soft-check:active, .show>.btn-primary-soft-check.dropdown-toggle {
|
||||
background-color: rgba($primary, 0.2);
|
||||
color: none;
|
||||
border: $border-width $border-style $primary !important;
|
||||
}
|
||||
.btn-check:focus + .btn, .btn-round-shadow:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
/* rtl:raw:
|
||||
.editor-container {
|
||||
direction: rtl;
|
||||
}
|
||||
.editor-container ol {
|
||||
margin: 0 2em;
|
||||
}
|
||||
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
|
||||
left: 0;
|
||||
right: inherit;
|
||||
}
|
||||
.ql-editor {
|
||||
text-align: right;
|
||||
}
|
||||
.ql-snow .ql-editor blockquote {
|
||||
border-right: 4px solid #ccc;
|
||||
border-left: 0;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) {
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
.ql-editor li:not(.ql-direction-rtl)::before {
|
||||
margin-right: -1.5em;
|
||||
margin-left: 0.3em;
|
||||
text-align: left;
|
||||
}
|
||||
*/
|
||||
|
||||
// Glightbox background
|
||||
.glightbox-container .gslide-media{
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
.cursor-zoom{
|
||||
cursor: zoom-in;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
//
|
||||
// overlay.scss
|
||||
// Theme Component
|
||||
|
||||
// Bg Dark overlay
|
||||
// Creates the "bg-dark-overlay-#" variant
|
||||
@for $i from 2 through 9 {
|
||||
$bg-dark-overlay: ($i);
|
||||
.bg-dark-overlay-#{($i)} {
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
&:before {
|
||||
content: " ";
|
||||
background: $black;
|
||||
opacity: ($i * .1);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,330 @@
|
||||
//
|
||||
// tiny-slider.scss
|
||||
// Theme Component
|
||||
|
||||
.tns-outer{
|
||||
position: relative;
|
||||
}
|
||||
.tns-item{
|
||||
touch-action: pan-y;
|
||||
user-select: none;
|
||||
}
|
||||
.tiny-slider{
|
||||
.item{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Slider arrow
|
||||
//
|
||||
.tns-controls{
|
||||
[data-controls] {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: $border-radius;
|
||||
display: block;
|
||||
z-index: 9;
|
||||
text-align: center;
|
||||
transition: $transition-base;
|
||||
background: rgba($white, .3);
|
||||
color: $white;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0 10px;
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
i{
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tns-controls [data-controls='prev'] {
|
||||
left: 0;
|
||||
}
|
||||
.tns-controls [data-controls='next'] {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* rtl:raw:
|
||||
.tiny-slider .tns-controls [data-controls]{
|
||||
transform: scaleX(-1) translateY(-50%);
|
||||
}
|
||||
.tns-visually-hidden {
|
||||
right: -10000em !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
*/
|
||||
|
||||
// arrow dark
|
||||
.arrow-dark{
|
||||
[data-controls] {
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.arrow-white{
|
||||
[data-controls] {
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
// arrow gray
|
||||
.arrow-gray{
|
||||
[data-controls] {
|
||||
background: $gray-300;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
// arrow round
|
||||
.arrow-round{
|
||||
[data-controls] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// arrow bordered
|
||||
.arrow-bordered{
|
||||
[data-controls] {
|
||||
background: transparent !important;
|
||||
color: $gray-400;
|
||||
border: 2px solid $gray-400;
|
||||
box-sizing: initial;
|
||||
&:hover{
|
||||
border-color: $gray-600;
|
||||
background: transparent;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// arrow blur
|
||||
.arrow-blur{
|
||||
[data-controls]{
|
||||
backdrop-filter: blur(5px);
|
||||
background: rgba(0, 0, 0, 0.4)!important;
|
||||
&:hover{
|
||||
backdrop-filter: blur(0px);
|
||||
background: rgba(0, 0, 0, 0.4)!important;
|
||||
}
|
||||
}
|
||||
&.arrow-white{
|
||||
[data-controls]{
|
||||
background-color: rgba($body-bg, 0.2)!important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// arrow only
|
||||
.arrow-only{
|
||||
[data-controls] {
|
||||
background: transparent;
|
||||
&:hover{
|
||||
background: transparent;
|
||||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// arrow hover
|
||||
.arrow-hover{
|
||||
overflow: hidden;
|
||||
[data-controls='prev']{
|
||||
left: -60px;
|
||||
}
|
||||
[data-controls='next']{
|
||||
right: -60px;
|
||||
}
|
||||
&:hover{
|
||||
[data-controls='prev']{
|
||||
left: 0px;
|
||||
}
|
||||
[data-controls='next']{
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// arrow left
|
||||
.arrow-end{
|
||||
.tns-controls [data-controls]{
|
||||
bottom: 10px;
|
||||
}
|
||||
[data-controls='prev']{
|
||||
right: 30px;
|
||||
left: auto;
|
||||
}
|
||||
[data-controls='next']{
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
// arrow xs
|
||||
.arrow-xs{
|
||||
.tns-controls [data-controls]{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// arrow md none
|
||||
@include media-breakpoint-down(md) {
|
||||
.arrow-md-none [data-controls] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Slider dots
|
||||
//
|
||||
.tns-nav{
|
||||
position: relative;
|
||||
top: 100%;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
[data-nav] {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
padding: 0;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 2px $gray-500;
|
||||
transition: $transition-base;
|
||||
border: 0;
|
||||
&:after{
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: $gray-500;
|
||||
box-shadow: 0 0 1px $gray-500;
|
||||
-webkit-transition: height 0.3s ease-in-out;
|
||||
transition: height 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
.tns-nav-active{
|
||||
&:after{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dots inside
|
||||
.dots-inside .tns-nav{
|
||||
top: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
// Dots primary
|
||||
.dots-primary .tns-nav{
|
||||
[data-nav] {
|
||||
box-shadow: inset 0 0 0 2px $primary;
|
||||
transition: $transition-base;
|
||||
&:after{
|
||||
background-color: $primary;
|
||||
box-shadow: 0 0 1px $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dots white
|
||||
.dots-white .tns-nav{
|
||||
[data-nav] {
|
||||
box-shadow: inset 0 0 0 2px $white;
|
||||
transition: $transition-base;
|
||||
&:after{
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 1px $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dots dark
|
||||
.dots-dark .tns-nav{
|
||||
[data-nav] {
|
||||
box-shadow: inset 0 0 0 2px $dark-gray;
|
||||
transition: $transition-base;
|
||||
&:after{
|
||||
background-color: $dark-gray;
|
||||
box-shadow: 0 0 1px $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dots creative
|
||||
.dots-creative .tns-nav{
|
||||
[data-nav] {
|
||||
background: $gray-300;
|
||||
border: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tns-nav-active{
|
||||
background: $primary;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// custom thumb
|
||||
.custom-thumb{
|
||||
[data-nav]{
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
}
|
||||
[data-nav] *{
|
||||
color: $white !important;
|
||||
}
|
||||
.tns-nav-active[data-nav]{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tns-nav-line .tns-nav{
|
||||
[data-nav] {
|
||||
background: $gray-300;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.tns-nav-active{
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
//
|
||||
// utilities.scss
|
||||
// Theme component for utility classes (helper classes)
|
||||
|
||||
|
||||
// text color on hover
|
||||
.text-primary-hover {
|
||||
a {
|
||||
color: $gray-400;
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.text-primary-hover, button.text-primary-hover {
|
||||
color: $gray-400;
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary-hover {
|
||||
li {
|
||||
color: $gray-400;
|
||||
&:hover {
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// font family
|
||||
.font-base {
|
||||
font-family: $font-family-base !important;
|
||||
}
|
||||
|
||||
.font-heading {
|
||||
font-family: $font-family-heading !important;
|
||||
}
|
||||
|
||||
// Filter
|
||||
.grayscale {
|
||||
filter: grayscale(100%);
|
||||
transition: all .6s ease;
|
||||
&:hover {
|
||||
filter: none;
|
||||
-webkit-filter: grayscale(0%);
|
||||
}
|
||||
}
|
||||
|
||||
// On hover
|
||||
.zoom-hover {
|
||||
transform: scale(1);
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.up-hover {
|
||||
transition: $transition-base;
|
||||
&:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Icons fixed height and width
|
||||
.icon-sm {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 75%;
|
||||
}
|
||||
.icon-md {
|
||||
width: 2.8rem;
|
||||
height: 2.8rem;
|
||||
line-height: 2.8rem;
|
||||
text-align: center;
|
||||
font-size: .8rem;
|
||||
}
|
||||
.icon-lg {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
line-height: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.icon-xl {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
// oversized block for force outside of col width
|
||||
@include media-breakpoint-up(lg) {
|
||||
.oversized-block{
|
||||
width: calc(100% + 140px - 20px + 140px - 20px);
|
||||
margin-left: calc(-140px + 20px);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user