Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity
Files
9e9f866aeec806289c55f610d9e7375dbf46a7bb
tabler/scss/_variables.scss
codecalm 9e9f866aee markdown fixes, docs styling
2020-02-02 15:05:55 +01:00

458 lines
12 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
//ASSETS BASE
$assets-base: ".." !default;
// FONTS
$google-font: "Source Sans Pro" !default;
$font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
// EXTERNAL FONTS
$icon-fonts: () !default;
// COLORS
$theme-color-interval: 10% !default;
$light: #f5f7fb !default;
$dark: #354052 !default;
$light-black: rgba($dark, .24) !default;
$light-mix: rgba(mix($light, $dark, 64%), .24) !default;
$light-white: rgba($light, .24) !default;
$min-black: rgba($dark, .032) !default;
$min-white: rgba($light, .032) !default;
$gray-100: $light !default;
$gray-200: mix($light, $dark, 98%) !default;
$gray-300: mix($light, $dark, 94%) !default;
$gray-400: mix($light, $dark, 88%) !default;
$gray-500: mix($light, $dark, 78%) !default;
$gray-600: mix($light, $dark, 60%) !default;
$gray-700: mix($light, $dark, 36%) !default;
$gray-800: mix($light, $dark, 16%) !default;
$gray-900: $dark !default;
$blue: #206bc4 !default;
$azure: #45aaf2 !default;
$indigo: #6574cd !default;
$purple: #a55eea !default;
$pink: #f66d9b !default;
$red: #fa4654 !default;
$orange: #ff922b !default;
$yellow: #fab005 !default;
$lime: #94d82d !default;
$green: #5eba00 !default;
$teal: #2bcbba !default;
$cyan: #17a2b8 !default;
$black: #000000 !default;
$white: #ffffff !default;
$body-bg: $light !default;
$body-color: $dark !default;
$text-muted-opacity: .64 !default;
$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
$border-color: rgba($text-muted, .24) !default;
$hover-bg: $light-white !default;
$active-bg: rgba($blue, .06) !default;
$dark-body-bg: #222935 !default;
$dark-body-color: #afbdd1 !default;
$dark-border-color: rgba($dark-body-color, .4) !default;
$primary: $blue !default;
$secondary: $text-muted !default;
$success: $green !default;
$info: $azure !default;
$warning: $yellow !default;
$danger: $red !default;
$social-colors: (
"facebook": #3b5998,
"twitter": #1da1f2,
"google": #dc4e41,
"youtube": #ff0000,
"vimeo": #1ab7ea,
"dribbble": #ea4c89,
"github": #181717,
"instagram": #e4405f,
"pinterest": #bd081c,
"vk": #6383a8,
"rss": #ffa500,
"flickr": #0063dc,
"bitbucket": #0052cc,
"tabler": #206bc4
) !default;
$colors: (
"blue": $blue,
"azure": $azure,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"lime": $lime,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800,
"dark": $dark
) !default;
$avatar-sizes: (
"xs": 1.5rem,
"sm": 2rem,
"md": 3rem,
"lg": 4.5rem,
"xl": 6rem
) !default;
//Fonts
$font-size-base: .9375rem !default;
$font-weight-bold: 600 !default;
$body-letter-spacing: null !default;
$line-height-base: 1.6 !default;
$line-height-sm: 1.3333334 !default;
$line-height-lg: 2 !default;
$border-width: 1px !default;
$border-width-wide: 2px !default;
$border-radius: 3px !default;
//Typography
$headings-font-weight: $font-weight-bold !default;
$small-font-size: 87.5% !default;
$h1-font-size: (26em / 15) !default;
$h2-font-size: (22em / 15) !default;
$h3-font-size: (18em / 15) !default;
$h4-font-size: (15em / 15) !default;
$h5-font-size: (13em / 15) !default;
$h6-font-size: (11em / 15) !default;
$blockquote-font-size: $h4-font-size !default;
$code-font-size: $h6-font-size !default;
$code-color: $primary !default;
$lead-font-size: $h4-font-size !default;
$lead-font-weight: 400 !default;
$hr-opacity: .1 !default;
$hr-margin-y: 1rem !default;
$caret-spacing: .4em !default;
//Sizing
$spacer: 1rem !default;
$spacers: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 2.5,
6: $spacer * 4,
7: $spacer * 6
) !default;
$size-spacers: (
auto: auto,
px: 1px,
full: 100%
) !default;
$sizes-percentage: (
1: 1%,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
) !default;
$grid-breakpoints: (
xs: 0,
sm: 33rem,
md: 48rem,
lg: 64rem,
xl: 75.25rem
) !default;
$container-max-widths: (
sm: 32.5rem,
md: 47.5rem,
lg: 64rem,
xl: 75.25rem
) !default;
$container-variations: (
tight: 30rem,
narrow: 45rem,
) !default;
$embed-responsive-aspect-ratios: (
'2by1': (
x: 2,
y: 1
)
) !default;
//sidenav
$sidenav-width: 15.625rem !default;
$sidenav-width-narrow: 4rem !default;
$sidenav-bg: $white !default;
$sidenav-border-color: $border-color !default;
$sidenav-dark-bg: $dark !default;
$sidenav-dark-color: $white !default;
$sidenav-padding: 1.25rem !default;
$sidenav-breakpoint-show: 'sm' !default;
$sidenav-breakpoint-folded: 'lg' !default;
//alerts
$alert-link-font-weight: $font-weight-bold !default;
$alert-bg-level: -8 !default;
$alert-border-level: -6 !default;
$alert-color-level: 8 !default;
//breadcrumb
$breadcrumb-variants: (
dots: "·",
arrows: "›",
bullets: "\02022",
) !default;
//badges
$badge-font-weight: $font-weight-bold !default;
$badge-empty-size: .5rem !default;
//buttons
$input-color: $body-color !default;
$input-btn-line-height: (22/15) !default;
$input-btn-font-size: $font-size-base !default;
$input-btn-font-size-sm: $h5-font-size !default;
$input-btn-padding-x-sm: .5rem !default;
$input-btn-padding-y-sm: .125rem !default;
$input-btn-font-size-lg: $h2-font-size !default;
$input-btn-padding-x-lg: 1.5rem !default;
$input-btn-padding-y-lg: .5rem !default;
$input-height: null !default;
$input-height-sm: null !default;
$input-height-lg: null !default;
$input-color: inherit !default;
$input-focus-color: inherit !default;
//buttons
$btn-padding-x: 1rem !default;
$btn-font-weight: 500 !default;
$btn-border-radius: 3px !default;
//cards
$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-cap-bg: $min-black !default;
$card-active-border-color: $primary !default;
$card-status-size: $border-width-wide !default;
$card-group-margin: 1.5rem !default;
$card-group-margin-sm: .75rem !default;
$card-shadow: rgba($dark, .04) 0 2px 4px 0 !default;
$card-shadow-hover: rgba($dark, .16) 0 2px 16px 0 !default;
$cards-grid-gap: 1.25rem !default;
$cards-grid-gap-sm: .75rem !default;
$cards-grid-breakpoint: lg !default;
//close
$close-font-weight: 400 !default;
$close-font-size: 1.5rem !default;
//dropdown
$dropdown-item-padding-x: 1rem !default;
$dropdown-font-size: $h4-font-size !default;
$dropdown-divider-bg: $border-color !default;
$dropdown-padding-y: .5rem !default;
$dropdown-link-hover-bg: $hover-bg !default;
$dropdown-link-hover-color: inherit !default;
$dropdown-spacer: 1px !default;
$dropdown-link-active-color: $primary !default;
$dropdown-link-active-bg: $active-bg !default;
$dropdown-border-color: $border-color !default;
$dropdown-menu-max-width: 25rem !default;
//grid
$grid-gutter-width: 1.25rem !default;
//loader
$loader-size: 2.5rem !default;
//lists
$list-group-item-padding-y: .5rem !default;
$list-group-item-padding-x: .75rem !default;
//modals
$modal-content-border-color: $border-color !default;
$modal-backdrop-opacity: .24 !default;
$modal-backdrop-bg: $dark !default;
$modal-backdrop-blur: 2px !default;
$modal-fade-transform: translate(0, -1rem) !default;
$modal-content-border-radius: $border-radius !default;
$modal-inner-padding: .75rem !default;
$modal-inner-padding-x: 1.25rem !default;
$modal-footer-border-width: 0 !default;
$modal-header-border-width: 0 !default;
$modal-xl: 1140px !default;
$modal-lg: 800px !default;
$modal-md: 540px !default;
$modal-sm: 300px !default;
//navbar
$navbar-padding-y: .5rem !default;
$navbar-height: 3.5rem !default;
$navbar-border-color: $border-color !default;
$navbar-toggler-padding-y: .75rem !default;
$navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-margin: -.75rem !default;
$navbar-toggler-font-size: 1rem !default;
$navbar-toggler-size: 1.5rem !default;
$navbar-toggler-item-height: 2px !default;
$navbar-toggler-item-spacing: 7px !default;
$navbar-toggler-transform-time: .2s !default;
//popover
$popover-border-color: $border-color !default;
//nav
//$nav-link-padding-y: 1rem !default;
$navbar-padding-y: .75rem !default;
$navbar-nav-link-padding-x: .75rem !default;
$navbar-light-color: $text-muted !default;
$navbar-light-active-color: $primary !default;
$navbar-light-hover-color: $body-color !default;
//pagination
$pagination-border-width: 0 !default;
$pagination-padding-y: .25rem !default;
$pagination-padding-x: .25rem !default;
$pagination-color: $text-muted !default;
$pagination-bg: transparent !default;
$pagination-disabled-bg: transparent !default;
$pagination-disabled-color: rgba($text-muted, .5) !default;
//steps
$steps-border-width: 2px !default;
$steps-color-inactive: #f3f5f5 !default;
//spinner
$spinner-width: 1.5rem !default;
$spinner-height: 1.5rem !default;
$spinner-width-sm: 1rem !default;
$spinner-height-sm: 1rem !default;
$spinner-border-width: 2px !default;
$spinner-border-width-sm: 1px !default;
//tables
$table-head-border-color: $border-color !default;
//toasts
$toast-border-color: $border-color !default;
$toast-header-color: $text-muted !default;
//other
$yiq-contrasted-threshold: 200 !default;
//progress
$progress-bg: $light-mix !default;
$progress-height: .5rem !default;
//ribbons
$ribbon-margin: .25rem !default;
$list-group-border-color: $border-color !default;
$list-group-action-color: inherit !default;
$input-disabled-bg: $gray-100 !default;
$input-border-color: $border-color !default;
$input-placeholder-color: $text-muted !default;
$input-group-addon-bg: $min-black !default;
$input-group-addon-color: $text-muted !default;
$input-border-radius: $border-radius !default;
//Forms
$form-check-input-width: 1rem !default;
$form-check-padding-left: $form-check-input-width + .5rem !default;
$form-check-input-bg: $white !default;
$form-check-input-border: 1px solid $border-color !default;
$form-check-input-border-radius: $border-radius !default;
$form-check-input-checked-bg-size: .75rem !default;
$form-check-input-checked-color: $white !default;
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
$form-check-input-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 8.5L6.5 11l6-6'/></svg>") !default;
$form-check-input-checked-border-color: $border-color !default;
$form-select-indicator-color: opacify($border-color, .24) !default;
$form-switch-width: 1.75rem !default;
$form-switch-padding-left: $form-switch-width + .5rem !default;
$form-range-track-height: .25rem !default;
$form-range-track-bg: $light-mix !default;
$form-range-thumb-border: 2px solid $white !default;
$form-range-thumb-height: 1rem !default;
$form-range-thumb-focus-box-shadow-width: .125rem !default;
$form-feedback-icon-valid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $green + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>"), "#", "%23") !default;
$form-feedback-icon-invalid: str-replace(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='" + $red + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>"), "#", "%23") !default;
$caret-width: .32em !default;
//Flags
$generate-flags: true !default;
$flag-sizes: (
"md": 2rem,
"lg": 3rem,
"xl": 4rem
) !default;
//Payments
$payment-sizes: (
"sm": 1.5rem,
"lg": 3rem,
"xl": 4rem
) !default;
$enable-social-colors: true !default;
$enable-ghost-buttons: true !default;
$enable-extra-colors: true !default;
$enable-gradients: false !default;
Reference in New Issue View Git Blame Copy Permalink