İlk temizlik tamamlandı bir önceki projeden
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,128 @@
|
||||
//
|
||||
// Background
|
||||
// --------------------------------------------------
|
||||
|
||||
// Contextual colors
|
||||
@include bg-variant('.bg-primary-op', rgba($brand-primary, .75));
|
||||
@include bg-variant('.bg-primary-dark', $brand-dark);
|
||||
@include bg-variant('.bg-primary-dark-op', rgba($brand-dark, .8));
|
||||
@include bg-variant('.bg-primary-darker', $brand-darker);
|
||||
@include bg-variant('.bg-primary-light', $brand-light);
|
||||
@include bg-variant('.bg-primary-lighter', $brand-lighter);
|
||||
@include bg-variant('.bg-body', $body-bg);
|
||||
@include bg-variant('.bg-body-light', $body-bg-light);
|
||||
@include bg-variant('.bg-body-dark', $body-bg-dark);
|
||||
@include bg-variant('.bg-muted', $gray-dark);
|
||||
@include bg-variant('.bg-success-light ', $brand-success-light);
|
||||
@include bg-variant('.bg-warning-light ', $brand-warning-light);
|
||||
@include bg-variant('.bg-info-light ', $brand-info-light);
|
||||
@include bg-variant('.bg-danger-light ', $brand-danger-light);
|
||||
@include bg-variant('.bg-white', $white);
|
||||
@include bg-variant('.bg-black', $black);
|
||||
@include bg-variant('.bg-gray', $gray);
|
||||
@include bg-variant('.bg-gray-dark', $gray-dark);
|
||||
@include bg-variant('.bg-gray-darker', $gray-darker);
|
||||
@include bg-variant('.bg-gray-light', $gray-light);
|
||||
@include bg-variant('.bg-gray-lighter', $gray-lighter);
|
||||
|
||||
// Gradients
|
||||
@include bg-gradient-variant('.bg-gd-primary', 135deg, darken($brand-primary, 15%), lighten($brand-primary, 5%));
|
||||
@include bg-gradient-variant('.bg-gd-dusk', 135deg, $theme-elegance-primary, $brand-primary);
|
||||
@include bg-gradient-variant('.bg-gd-cherry', 135deg, lighten($theme-pulse-primary, 5%), darken($theme-pulse-primary, 10%));
|
||||
@include bg-gradient-variant('.bg-gd-aqua', 135deg, $theme-corporate-primary, $theme-flat-primary);
|
||||
@include bg-gradient-variant('.bg-gd-emerald', 135deg, $theme-earth-primary, $theme-corporate-primary);
|
||||
@include bg-gradient-variant('.bg-gd-sea', 135deg, darken($brand-primary, 7%), $brand-info);
|
||||
@include bg-gradient-variant('.bg-gd-leaf', 135deg, $brand-warning, $brand-success);
|
||||
@include bg-gradient-variant('.bg-gd-lake', 135deg, $brand-info, $brand-success);
|
||||
@include bg-gradient-variant('.bg-gd-sun', 135deg, $brand-danger, $brand-warning);
|
||||
|
||||
@include bg-gradient-variant('.bg-gd-light', 0deg, $body-bg-light, $white);
|
||||
|
||||
// Black/White with opacity
|
||||
.bg-black-op {
|
||||
background-color: rgba(0,0,0,.5) !important;
|
||||
|
||||
&-5 {
|
||||
background-color: rgba(0,0,0,.05) !important;
|
||||
}
|
||||
|
||||
&-10 {
|
||||
background-color: rgba(0,0,0,.1) !important;
|
||||
}
|
||||
|
||||
&-25 {
|
||||
background-color: rgba(0,0,0,.25) !important;
|
||||
}
|
||||
|
||||
&-75 {
|
||||
background-color: rgba(0,0,0,.75) !important;
|
||||
}
|
||||
|
||||
&-90 {
|
||||
background-color: rgba(0,0,0,.9) !important;
|
||||
}
|
||||
|
||||
&-95 {
|
||||
background-color: rgba(0,0,0,.95) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-white-op {
|
||||
background-color: rgba(255,255,255,.5) !important;
|
||||
|
||||
&-5 {
|
||||
background-color: rgba(255,255,255,.05) !important;
|
||||
}
|
||||
|
||||
&-10 {
|
||||
background-color: rgba(255,255,255,.1) !important;
|
||||
}
|
||||
|
||||
&-25 {
|
||||
background-color: rgba(255,255,255,.25) !important;
|
||||
}
|
||||
|
||||
&-75 {
|
||||
background-color: rgba(255,255,255,.75) !important;
|
||||
}
|
||||
|
||||
&-90 {
|
||||
background-color: rgba(255,255,255,.9) !important;
|
||||
}
|
||||
|
||||
&-95 {
|
||||
background-color: rgba(255,255,255,.95) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Image Background
|
||||
.bg-image {
|
||||
background-color: $gray-lighter;
|
||||
background-position: 0% 50%;
|
||||
background-size: cover;
|
||||
|
||||
&-top {
|
||||
background-position-y: 0%;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
background-position-y: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
&-fixed {
|
||||
background-attachment: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pattern Image
|
||||
.bg-pattern {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
// Video Background
|
||||
.bg-video {
|
||||
width: 100%;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// Borders
|
||||
// --------------------------------------------------
|
||||
|
||||
.border {
|
||||
border: 1px solid $body-bg-dark !important;
|
||||
|
||||
&-t { border-top: 1px solid $body-bg-dark !important; }
|
||||
&-r { border-right: 1px solid $body-bg-dark !important; }
|
||||
&-b { border-bottom: 1px solid $body-bg-dark !important; }
|
||||
&-l { border-left: 1px solid $body-bg-dark !important; }
|
||||
}
|
||||
|
||||
.border-light {
|
||||
border: 1px solid $body-bg-light !important;
|
||||
|
||||
&-t { border-top: 1px solid $body-bg-light !important; }
|
||||
&-r { border-right: 1px solid $body-bg-light !important; }
|
||||
&-b { border-bottom: 1px solid $body-bg-light !important; }
|
||||
&-l { border-left: 1px solid $body-bg-light !important; }
|
||||
}
|
||||
|
||||
.border-white-op {
|
||||
border: 1px solid rgba(255,255,255,.1) !important;
|
||||
|
||||
&-t { border-top: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-r { border-right: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-b { border-bottom: 1px solid rgba(255,255,255,.1) !important; }
|
||||
&-l { border-left: 1px solid rgba(255,255,255,.1) !important; }
|
||||
}
|
||||
|
||||
.border-black-op {
|
||||
border: 1px solid rgba(0,0,0,.1) !important;
|
||||
|
||||
&-t { border-top: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-r { border-right: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-b { border-bottom: 1px solid rgba(0,0,0,.1) !important; }
|
||||
&-l { border-left: 1px solid rgba(0,0,0,.1) !important; }
|
||||
}
|
||||
|
||||
.border-2x { border-width: 2px !important; }
|
||||
.border-3x { border-width: 3px !important; }
|
||||
@@ -0,0 +1,20 @@
|
||||
//
|
||||
// Display
|
||||
// --------------------------------------------------
|
||||
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-1 {
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
//
|
||||
// Effects
|
||||
// --------------------------------------------------
|
||||
|
||||
// Ripple effect (mostly for buttons usage)
|
||||
.click-ripple {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, .5);
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
|
||||
&.animate {
|
||||
animation: click-ripple .9s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes click-ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
//
|
||||
// Sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
// Width
|
||||
.min-width-20 { min-width: 20px !important; }
|
||||
.min-width-30 { min-width: 30px !important; }
|
||||
.min-width-50 { min-width: 50px !important; }
|
||||
.min-width-75 { min-width: 75px !important; }
|
||||
.min-width-100 { min-width: 100px !important; }
|
||||
.min-width-125 { min-width: 125px !important; }
|
||||
.min-width-150 { min-width: 150px !important; }
|
||||
.min-width-175 { min-width: 175px !important; }
|
||||
.min-width-200 { min-width: 200px !important; }
|
||||
.min-width-300 { min-width: 300px !important; }
|
||||
.min-width-320 { min-width: 320px !important; }
|
||||
|
||||
// Height
|
||||
.min-height-20 { min-height: 20px !important; }
|
||||
.min-height-30 { min-height: 30px !important; }
|
||||
.min-height-50 { min-height: 50px !important; }
|
||||
.min-height-75 { min-height: 75px !important; }
|
||||
.min-height-100 { min-height: 100px !important; }
|
||||
.min-height-125 { min-height: 125px !important; }
|
||||
.min-height-150 { min-height: 150px !important; }
|
||||
.min-height-175 { min-height: 175px !important; }
|
||||
.min-height-200 { min-height: 200px !important; }
|
||||
.min-height-300 { min-height: 300px !important; }
|
||||
.min-height-400 { min-height: 400px !important; }
|
||||
.min-height-500 { min-height: 500px !important; }
|
||||
@@ -0,0 +1,37 @@
|
||||
//
|
||||
// Spacing
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $prop, $abbrev in (margin: m, padding: p) {
|
||||
@each $size, $lengths in $space-breaks {
|
||||
$length-x: map-get($lengths, x);
|
||||
$length-y: map-get($lengths, y);
|
||||
|
||||
.#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x !important; }
|
||||
|
||||
.#{$abbrev}t-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-top: $length-y !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}r-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-right: $length-x !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}b-#{$size},
|
||||
.#{$abbrev}y-#{$size} {
|
||||
#{$prop}-bottom: $length-y !important;
|
||||
}
|
||||
|
||||
.#{$abbrev}l-#{$size},
|
||||
.#{$abbrev}x-#{$size} {
|
||||
#{$prop}-left: $length-x !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.push,
|
||||
.items-push > div {
|
||||
margin-bottom: $space-base;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
//
|
||||
// Text
|
||||
// --------------------------------------------------
|
||||
|
||||
// Font weight
|
||||
.font-w300 { font-weight: 300 !important; }
|
||||
.font-w400 { font-weight: 400 !important; }
|
||||
.font-w600 { font-weight: 600 !important; }
|
||||
.font-w700 { font-weight: 700 !important; }
|
||||
|
||||
// Font sizes
|
||||
.font-size-default { font-size: $font-size-base !important; }
|
||||
.font-size-xl { font-size: $font-size-xl !important; }
|
||||
.font-size-lg { font-size: $font-size-lg !important; }
|
||||
.font-size-md { font-size: $font-size-md !important; }
|
||||
.font-size-sm { font-size: $font-size-sm !important; }
|
||||
.font-size-xs { font-size: $font-size-xs !important; }
|
||||
|
||||
// Line height
|
||||
.line-height-base { line-height: $line-height-base !important; }
|
||||
|
||||
// Helpers
|
||||
.text-wrap-break-word { word-wrap: break-word; }
|
||||
.text-uppercase { letter-spacing: .0625rem; }
|
||||
|
||||
// Contextual colors
|
||||
@include text-emphasis-variant('.text-primary-dark', $brand-dark);
|
||||
@include text-emphasis-variant('.text-primary-darker', $brand-darker);
|
||||
@include text-emphasis-variant('.text-primary-light', $brand-light);
|
||||
@include text-emphasis-variant('.text-primary-lighter', $brand-lighter);
|
||||
@include text-emphasis-variant('.text-body-bg', $body-bg);
|
||||
@include text-emphasis-variant('.text-body-bg-dark', $body-bg-dark);
|
||||
@include text-emphasis-variant('.text-body-bg-light', $body-bg-light);
|
||||
@include text-emphasis-variant('.text-body-color', $body-color);
|
||||
@include text-emphasis-variant('.text-body-color-dark', $body-color-dark);
|
||||
@include text-emphasis-variant('.text-body-color-light', $body-color-light);
|
||||
@include text-emphasis-variant('.text-muted', $gray-dark);
|
||||
@include text-emphasis-variant('.text-success-light', $brand-success-light);
|
||||
@include text-emphasis-variant('.text-warning-light', $brand-warning-light);
|
||||
@include text-emphasis-variant('.text-info-light', $brand-info-light);
|
||||
@include text-emphasis-variant('.text-danger-light', $brand-danger-light);
|
||||
@include text-emphasis-variant('.text-white', $white);
|
||||
@include text-emphasis-variant('.text-white-op', rgba(255,255,255,.8));
|
||||
@include text-emphasis-variant('.text-black', $black);
|
||||
@include text-emphasis-variant('.text-black-op', rgba(0,0,0,.5));
|
||||
@include text-emphasis-variant('.text-gray', $gray);
|
||||
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
|
||||
@include text-emphasis-variant('.text-gray-darker', $gray-darker);
|
||||
@include text-emphasis-variant('.text-gray-light', $gray-light);
|
||||
@include text-emphasis-variant('.text-gray-lighter', $gray-lighter);
|
||||
|
||||
// Contextual dual text colors (for inverse header/sidebar)
|
||||
@include text-emphasis-variant('.text-dual-primary-dark', $brand-dark);
|
||||
|
||||
.page-header-inverse #page-header,
|
||||
.sidebar-inverse #sidebar {
|
||||
@include text-emphasis-variant('.text-dual-primary-dark', $body-color-light);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
//
|
||||
// Vertical Align
|
||||
// --------------------------------------------------
|
||||
|
||||
.align-parent { position: relative; }
|
||||
|
||||
.align-v {
|
||||
@include vertical-align(50%, auto, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-r {
|
||||
@include vertical-align(50%, 0, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-l {
|
||||
@include vertical-align(50%, auto, 0, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-r {
|
||||
@include vertical-align(50%, 0, auto, 0, -50%);
|
||||
}
|
||||
|
||||
.align-v-h {
|
||||
@include vertical-align(50%, auto, 50%, -50%, -50%);
|
||||
}
|
||||
Reference in New Issue
Block a user