262 lines
6.6 KiB
SCSS
262 lines
6.6 KiB
SCSS
/**
|
|
* SETTINGS
|
|
*/
|
|
|
|
$enable-grid-classes: true !default; // generate grid classes
|
|
$enable-reset-defaults: true !default; // reset default browser values
|
|
|
|
// colors
|
|
$c-white: #fff !default;
|
|
$c-black: #000 !default;
|
|
$c-success: #4caf50 !default;
|
|
$c-info: #5bc0de !default;
|
|
$c-warning: #f0ad4e !default;
|
|
$c-error: #e74c3c !default;
|
|
$c-gray: #969da6 !default;
|
|
$c-gray-light: #eceff1 !default;
|
|
|
|
$c-primary: #03a9f4 !default;
|
|
$c-secondary: #e91e63 !default;
|
|
$c-dark: #18232f !default;
|
|
$c-light: $c-gray-light !default;
|
|
|
|
$c-text: #272727 !default;
|
|
$c-link: $c-primary !default;
|
|
$c-link-hover: rgba($c-primary, .8) !default;
|
|
|
|
$bgc-body: $c-white !default;
|
|
|
|
$c-map: (
|
|
'primary': $c-primary,
|
|
'dark': $c-dark,
|
|
'secondary': $c-secondary,
|
|
'white': $c-white,
|
|
'success': $c-success,
|
|
'info': $c-info,
|
|
'warning': $c-warning,
|
|
'error': $c-error,
|
|
'gray': $c-gray,
|
|
'gray-light': $c-gray-light
|
|
) !default;
|
|
|
|
// Social colors
|
|
$c-fb: rgb(59, 89, 182) !default;
|
|
$c-tw: rgb(64, 153, 255) !default;
|
|
$c-googleplus: rgb(215, 61, 50) !default;
|
|
$c-pinterest: rgb(203, 32, 39) !default;
|
|
$c-skype: rgb(18, 165, 244) !default;
|
|
$c-spotify: rgb(129, 183, 26) !default;
|
|
$c-instagram: #4e433c !default;
|
|
$c-tumblr: #2b4964 !default;
|
|
$c-vimeo: #86b32d !default;
|
|
$c-soundcloud: #f76600 !default;
|
|
$c-youtube: #ff3333 !default;
|
|
$c-linkedin: #4875b4 !default;
|
|
$c-flickr: #fe0883 !default;
|
|
$c-foursquare: #8fd400 !default;
|
|
|
|
// Shadows
|
|
$bxsh-base: 0 0 5px rgba(0, 0, 0, .2) !default;
|
|
$bxsh-medium: $bxsh-base !default;
|
|
|
|
// Typography
|
|
$fw-light: 300 !default;
|
|
$fw-normal: 400 !default;
|
|
$fw-bold: 600 !default;
|
|
$fw-headings: $fw-light !default;
|
|
|
|
$ff-base: 'IBM Plex Sans', sans-serif !default;
|
|
$fw-base: 400 !default;
|
|
$fz-base: 16px !default;
|
|
$lh-base: 1.5em !default;
|
|
|
|
$fz-huge: 36px !default;
|
|
$fz-big: 24px !default;
|
|
$fz-medium: $fz-base !default;
|
|
$fz-small: 12px !default;
|
|
|
|
$lh-huge: 1.3em !default;
|
|
$lh-big: 1.3em !default;
|
|
$lh-medium: $lh-base !default;
|
|
$lh-small: 1.3em !default;
|
|
|
|
// Body
|
|
$c-body: $c-text !default;
|
|
$ff-body: $ff-base !default;
|
|
$fz-body: $fz-base !default;
|
|
$fw-body: $fw-base !default;
|
|
$lh-body: $lh-base !default;
|
|
|
|
// Border
|
|
$bdc-base: #d5d9db !default;
|
|
$bd-medium: 1px solid $bdc-base !default;
|
|
$bdr-base: 3px !default;
|
|
$bdr-medium: $bdr-base !default;
|
|
$bdr-rounded-corners: 5px !default;
|
|
|
|
// Defaults (HTML elements)
|
|
$fw-strong: $fw-bold !default;
|
|
$mb-p: 1.5em !default;
|
|
$mb-ul: 1em !default;
|
|
$mb-li: .5em !default;
|
|
|
|
// Margin
|
|
$m-xsmall: 4px !default;
|
|
$m-small: 8px !default;
|
|
$m-medium: 16px !default;
|
|
$m-big: 36px !default;
|
|
$m-huge: 48px !default;
|
|
|
|
// Padding
|
|
$p-small: 4px !default;
|
|
$p-medium: 8px !default;
|
|
$p-big: 16px !default;
|
|
$p-huge: 36px !default;
|
|
|
|
// Layout
|
|
$bgc-container: transparent !default;
|
|
$mwi-container: 1380px !default;
|
|
$mwi-container-medium: 944px !default;
|
|
$mwi-container-small: 400px !default;
|
|
$w-gutter: 24px !default;
|
|
|
|
// Grid
|
|
$grid-breakpoints: (
|
|
xs: 0,
|
|
sm: 576px,
|
|
md: 768px,
|
|
lg: 992px,
|
|
xl: 1200px
|
|
) !default;
|
|
|
|
$grid-columns: 12 !default;
|
|
$grid-gutter-width: $w-gutter !default;
|
|
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px
|
|
) !default;
|
|
|
|
/**
|
|
* COMPONENTS
|
|
*/
|
|
|
|
// Badges
|
|
$c-badge: $c-text !default;
|
|
$c-badge-colored: $c-white !default;
|
|
$bg-badge: $c-light !default;
|
|
$bdr-badge: $bdr-medium !default;
|
|
$lh-badge: 1.2em !default;
|
|
$p-badge: $p-medium $p-big !default;
|
|
$fz-badge-big: 1.3em !default;
|
|
$fz-badge-small: .7em !default;
|
|
$badges-color-map: (
|
|
primary: $c-primary,
|
|
secondary: $c-secondary,
|
|
dark: $c-dark,
|
|
light: $c-gray,
|
|
success: $c-success,
|
|
error: $c-error,
|
|
warning: $c-warning
|
|
) !default;
|
|
|
|
// Buttons
|
|
$bg-button: $c-primary !default;
|
|
$c-button: $c-white !default;
|
|
$c-button-transparent: $c-primary !default;
|
|
$c-button-outlined: $c-primary !default;
|
|
$bdc-button: $bg-button !default;
|
|
$bd-button: 1px solid $bdc-button !default;
|
|
$bdr-button: 200px !default;
|
|
$ff-button: $ff-body !default;
|
|
$fz-button: $fz-medium !default;
|
|
$fw-button: $fw-bold !default;
|
|
$lh-button: $lh-body !default;
|
|
$m-button: 0 $m-small $m-medium $m-small !default;
|
|
$p-button: $p-medium $p-big !default;
|
|
$tt-button: uppercase !default;
|
|
|
|
$fz-button-big: $fz-big !default;
|
|
$p-button-big: $p-big $p-huge !default;
|
|
|
|
$fz-button-small: $fz-small !default;
|
|
$p-button-small: $p-small $p-big !default;
|
|
|
|
// Forms
|
|
$bgc-form: $c-light !default;
|
|
$c-form: $c-text !default;
|
|
$bdr-form: $bdr-medium !default;
|
|
$bd-form: $bd-medium !default;
|
|
$fz-form: $fz-body !default;
|
|
$bgc-form-focus: lighten($bgc-form, 5%) !default;
|
|
$trs-form: background-color .2s ease-in-out !default;
|
|
$c-form-placeholder: $c-gray !default;
|
|
$mih-form-textarea: 120px !default;
|
|
$p-form: $p-medium $p-big !default;
|
|
$size-form-input-icon: 16px !default;
|
|
$c-form-input-icon: $c-gray !default;
|
|
$bd-form-error: 1px solid $c-error !default;
|
|
$bgc-form-error: $bgc-form !default;
|
|
|
|
// Loading bar
|
|
$h-loading-bar: 6px !default;
|
|
$w-loading-bar: 300px !default;
|
|
$z-loading-bar: 1000 !default;
|
|
|
|
// Loading spinner
|
|
$bg-loading-spinner: $c-secondary !default;
|
|
$size-loading-spinner-inner: 9px !default;
|
|
$size-loading-spinner: 30px !default;
|
|
$z-loading-spinner: 1000 !default;
|
|
|
|
// Notification
|
|
$bdr-notification: $bdr-medium !default;
|
|
$c-notification: $c-white !default;
|
|
$mb-notification: $m-big !default;
|
|
$p-notification: $p-big !default;
|
|
|
|
// Paginator
|
|
$mr-paginator-item: $m-xsmall !default;
|
|
$bdr-paginator-item: $bdr-medium !default;
|
|
$bg-paginator-item: $c-light !default;
|
|
$c-paginator-item: $c-text !default;
|
|
$bg-paginator-item-active: $c-primary !default;
|
|
$c-paginator-item-active: $c-white !default;
|
|
$p-paginator-item: $p-medium $p-big !default;
|
|
|
|
// Table
|
|
$bgc-table-header: $bgc-body !default;
|
|
$bgc-table: $c-light !default;
|
|
$bd-table: $bd-medium !default;
|
|
$c-table-heading: $c-gray !default;
|
|
$c-table-text: $c-text !default;
|
|
$fw-table-heading: normal !default;
|
|
$mwi-table: 100% !default;
|
|
$p-table-cell: $p-medium !default;
|
|
$p-table-heading: $p-medium !default;
|
|
$w-table: 100% !default;
|
|
$fz-table-heading: $fz-small !default;
|
|
|
|
// Tabs
|
|
$bdb-tabs-item-selected: 3px solid $c-primary !default;
|
|
$bdb-tabs-item: 3px solid transparent !default;
|
|
$bdb-tabs: $bd-medium !default;
|
|
$c-tabs-item-hover: $c-primary !default;
|
|
$c-tabs-item-selected: $c-primary !default;
|
|
$c-tabs-item: $c-gray !default;
|
|
$m-tabs-item: 0 $m-medium 0 0 !default;
|
|
$miw-tabs-item: 70px !default;
|
|
$p-tabs-item: $p-big !default;
|
|
|
|
// Tags
|
|
$bg-tag-dot: $bgc-body !default;
|
|
$bg-tag: $c-light !default;
|
|
$bdr-tag: $bdr-medium 0 0 $bdr-medium !default;
|
|
$c-tag: $c-text !default;
|
|
$lh-tag: 16px !default;
|
|
$m-tag: 0 $m-medium $m-medium 0 !default;
|
|
$p-tag: $p-medium !default;
|
|
$size-tag-dot: 5px !default;
|