sass.n2o.variables.scss Maven / Gradle / Ivy
The newest version!
// ---------------- OLD CODE ----------------- //
// 3 to 4 migration
$gray-lighter: $gray-300;
$gray-light: $gray-300;
$gray: $gray-600;
// Список переменных N2O
//Header
$header-min-height: 60px !default;
$nav-item-icon-color: inherit !default;
$collapsed-item-padding: 0.5rem 1rem 0.5rem 0 !default;
//Checkbox
$checkbox-icon-content: '\f00c' !default;
$checkbox-icon-font: 'FontAwesome' !default;
$checkbox-background-color: #fff !default;
$checkbox-border: 1px solid #90a4ae !default;
$checkbox-border-radius: 0 !default;
$checkbox-custom-control-size: 1.5rem !default;
$checkbox-border-color-checked: #163851 !default;
$checkbox-hover-border: $checkbox-border !default;
$checkbox-background-image: $custom-checkbox-indicator-icon-checked !default;
$checkbox-focus-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(22, 56, 81, 0.25) !default;
$checkbox-background-size: 50% !default;
$checkbox-background-position: center !default;
$checkbox-background-repeat: no-repeat !default;
$checkbox-position-top: 0.3rem !default;
$checkbox-position-left: 0 !default;
$checkbox-position-right: auto !default;
$checkbox-position-bottom: auto !default;
$checkbox-background-color-checked: #163851 !default;
$checkbox-color: #333 !default;
$checkbox-disabled-color: rgba(51, 51, 51, 0.55) !default;
$checkbox-border-disabled-color: rgba(187, 187, 187, 0.55) !default;
$checkbox-border-focus-color: rgba(82, 168, 236, 0.8);
$checkbox-indeterminate-disabled-background: rgba(51, 51, 51, 0.55);
$checkbox-width: 16px !default;
$checkbox-height: 16px !default;
$checkbox-font-size: 11px !default;
$custom-checkbox-margin: 0 !default;
// Radio
$n2o-radio-background-color: #90a4ae !default;
$n2o-radio-width: 1rem !default;
$n2o-radio-height: 1rem !default;
$n2o-radio-focus-box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(22, 56, 81, 0.25) !default;
$n2o-radio-checked-border-color: #163851 !default;
$n2o-radio-checked-background-color: #f5f5f5 !default;
$n2o-radio-margin: 0 !default;
$n2o-radio-input-margin-right: 1.5rem;
$n2o-radio-input-tabs-padding: $nav-link-padding-y $nav-link-padding-x;
$n2o-radio-input-border-width: $nav-tabs-border-width;
$n2o-radio-input-border-color: $gray-300;
$n2o-radio-input-hover-border-color: $gray-200;
//ProgressBar
$small-height: 10px !default;
$normal-height: 20px !default;
$large-height: 34px !default;
//InputSelect
$border: 1px solid #ccc !default;
$input-select-border: 1px solid #cfd8dc !default;
$input-select-border-color: #ccc !default;
$input-select-hover-border-color: #cfd8dc !default;
$input-select-padding: $input-padding-y $input-padding-x !default;
$input-select-font-size: 1rem !default;
$input-select-font-color: #263238 !default;
$input-select-border-radius: 0 !default;
$input-select-item-padding: 0.5rem 1.5rem !default;
$input-select-control-icon-size: 12px !default;
$image-height: 40px !default;
$image-selected-height: 20px !default;
$input-min-height: calc(2.25rem + 2px) !default;
$input-padding: 4px 0 4px 12px !default;
$input-control-padding: 2px 12px 2px 12px !default;
$focus-color: #317db5 !default;
$disabled-cursor: not-allowed !default;
$input-cursor: pointer !default;
$disabled-color: rgba(156, 159, 173, 0.55) !default;
$popup-height: 290px !default;
$popup-max-width: 900px !default;
$selected-item-height: 14px !default;
$selected-item-margin-y: 0.2rem !default;
$selected-item-margin-x: 0.15rem !default;
$selected-item-width: 150px !default;
$multiselect-item-color: #fafafa !default;
$shadow-box: 0 0 0 3px rgba(197, 205, 211, 1) !default;
$input-select-control-dropdown-header-padding: 0.5rem 1rem !default;
$input-select-editable-cell-min-height: $input-min-height !default;
//InputTreeSelect
$image-tree-height: 20px !default;
$multiselect-item-width: auto !default;
$icon-size: 12px !default;
$image-width: 24px !default;
$tree-animation-speed: 0.15s !default;
$max-popup-height: 500px !default;
$max-popup-width: 50vh !default;
$icon-tree-hover-color: $gray-100 !default;
$input-select-tree-color-hover: #ccc !default;
// Card
$card-colunm-mode-width: 250px !default;
$card-image-liner-width: 100px;
$card-line-mode-height: 60px !default;
$card-border-top: none !default;
$card-border-right: none !default;
$card-border-bottom: none !default;
$card-border-left: none !default;
$card-background-color: $white !default;
$card-box-shadow-hover: none !default;
//Collapse
$collapse-header-margin: 0 0 10px 0 !default;
$collapse-line-height: 1px !default;
$collapse-line-color: #ced3d6 !default;
// DatePicker
$calendar-min-width: 230px !default;
$calendar-max-width: 230px !default;
$calendar-height: 220px !default;
$datepicker-day-background-color-hover: $gray-200 !default;
$datepicker-day-color-hover: #051f28 !default;
$datepicker-day-padding: 0 1px !default;
$datepicker-day-color-selected: white !default;
$datepicker-day-background-color-selected: $primary !default;
$datepicker-day-border-color-current: $primary !default;
$datepicker-button-width: 40px;
// Divider
$border-default: 1px solid rgba(0, 0, 0, 0.4);
$border-dashed: 1px dashed rgba(0, 0, 0, 0.4);
$horizontal: 'divider-h';
$vertical: 'divider-v';
// Panel Region
$panel-region-heading-background-color: white !default;
$panel-region-background-color: $white !default;
$panel-region-border-top: 1px solid rgba(0, 0, 0, 0.125) !default;
$panel-region-border-right: 1px solid rgba(0, 0, 0, 0.125) !default;
$panel-region-border-bottom: 1px solid rgba(0, 0, 0, 0.125) !default;
$panel-region-border-left: 1px solid rgba(0, 0, 0, 0.125) !default;
$panel-region-box-shadow-hover: none !default;
// FileUploader
$file-uploader-progress-bar-width: 100% !default;
$file-uploader-progress-bar-height: 5px !default;
$file-uploader-border-color-drag-enter: $green !default;
// DropZone
$drop-zone-width: 100% !default;
$drop-zone-height: 200px !default;
$drop-zone-border: 2px dashed black !default;
// Sidebar
$togglerHeight: 50px !default;
$custom-light-gray: darken($gray-500, 5%) !default;
$sidebarWidth: 200px !default;
$sidebarCollapseWidth: 60px !default;
$gray-light: $gray-100 !default;
$gray-dark: #263238 !default;
$gray-lighter: $gray-300 !default;
$navbar-inverse-link-active-color: rgba(255, 255, 255, 0.5) !default;
$navbar-default-link-active-color: rgba(0, 0, 0, 0.5) !default;
$gray: $gray-600 !default;
$navbar-default-bg: $gray-light !default;
$navbar-inverse-bg: $gray-dark !default;
// Panel
$panel-darken: 10%;
// Wireframe
$alert-info-text: #31708f;
$border-radius-base: 1px;
// Switch
$n2o-switch-width: 44px;
$n2o-switch-height: 22px;
$n2o-switch-border-width: 1px;
$n2o-switch-border-color: $gray-200;
$n2o-switch-border-radius: $border-radius;
$n2o-switch-bg-color: $gray-200;
$n2o-switch-animation-duration: 0.3s;
$n2o-switch-element-width: 18px;
$n2o-switch-element-height: 18px;
$n2o-switch-element-border-radius: $border-radius;
$n2o-switch-element-background-color: $white;
$n2o-switch-element-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
$n2o-switch-checked-border-width: 1px;
$n2o-switch-checked-border-color: $primary;
$n2o-switch-checked-background-color: $primary;
$n2o-switch-disabled-border-color: $input-disabled-bg;
$n2o-switch-disabled-background-color: $input-disabled-bg;
$n2o-switch-disabled-element-background-color: $gray-300;
// Tree
$n2o-tree-selected-color: $gray-300;
$n2o-tree-hover-color: $gray-200;
$n2o-tree-draggable-color: $gray-300;
$n2o-tree-filtered-elem-color: $gray-300;
$custom-checkbox-indicator-icon-close-color: $custom-control-indicator-checked-color;
$custom-checkbox-indicator-icon-close : str-replace(url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg height='16px' version='1.1' viewBox='0 0 16 16' width='16px' xmlns='http://www.w3.org/2000/svg' xmlns:sketch='http://www.bohemiancoding.com/sketch/ns' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle/%3E%3Cdefs/%3E%3Cg fill='none' fill-rule='evenodd' id='Icons with numbers' stroke='none' stroke-width='1'%3E%3Cg fill='#{$custom-checkbox-indicator-icon-close-color}' id='Group' transform='translate(-672.000000, -144.000000)'%3E%3Cpath d='M678,144 L682,144 L682,150 L688,150 L688,154 L682,154 L682,160 L678,160 L678,154 L672,154 L672,150 L678,150 Z M678,144' id='Rectangle 204'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;
$search-text-color: $red;
$search-text-color: $red;
//Slider
$n2o-slider-handle-color: $primary;
$n2o-slider-dot-color: $primary;
$n2o-slider-tracker-color: $primary;
// Rating
$rating-stars-selected-color: #daa520;
$rating-stars-color: $secondary;
// PillFilter
$pill-filter-border-color: $secondary;
$pill-filter-active-color: $secondary;
$pill-filter-text-color: $gray-dark;
$n2o-slider-rail-color: $gray-200;
// Spiner
$spinner-background-cover-color: rgba(255, 255, 255, 0.5);
// Sidebar
$sidebar-width: 240px !default;
$sidebar-micro-width: 20px !default;
$sidebar-mini-width: 80px !default;
$sidebar-maxi-width: 240px !default;
$sidebar-max-compressed-width: 60px !default;
$sidebar-color: $gray-200 !default;
$sidebar-bg-color: $primary !default;
$sidebar-item-hover-bg: rgba(255, 255, 255, 0.1) !default;
// Sidebar brand
$sidebar-brand-font-size: 20px !default;
$sidebar-brand-bg-color: #0d151c !default;
$sidebar-brand-padding: 15px 10px !default;
$sidebar-brand-border-bottom: 1px solid #293845 !default;
$sidebar-brand-border-top: 0 !default;
$sidebar-brand-border-left: 0 !default;
$sidebar-brand-border-right: 0 !default;
// Footer
$footer-height: 40px !default;
//Toolbar
$toolbar-margin: 5px 0 5px 0;
//TextEditor
$text-editor-border: 1px solid #f1f1f1;
//Drawer
$drawer-backdrop-bg: #000 !default;
$drawer-content-bg: #fff !default;
$drawer-left-shadow: 2px 0 8px rgba(0, 0, 0, 0.15) !default;
$drawer-right-shadow: -2px 0 8px rgba(0, 0, 0, 0.15) !default;
$drawer-top-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !default;
$drawer-bottom-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15) !default;
$drawer-content-pd: 40px 0 40px 0 !default;
$drawer-border: 1px solid #90a4ae !default;
$drawer-icon-color: #333 !default;
$drawer-animation: 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86) !default;
//ImageUpload
$primary: #163851;
$image-uploader-border: 1px dashed #163851 !default;
$image-uploader-card-border: 1px solid #d9d9d9 !default;
//Tiles
$tiles-item-margin: 10px !default;
$tiles-border: 1px solid #f0f0f0 !default;
$tiles-hover-border: 1px solid transparent !default;
$tiles-hover-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) !default;
$tiles-cell-margin: 5px 0 !default;
$tiles-item-padding: 5px !default;
//TabsRegion
$tabs-border : 1px solid #90a4ae;
//Image
$n2o-image-text-margin: 5px;
//InputIcon
$input-icon-width: $font-size-base*1.25;
$input-icon-height: $font-size-base*1.25;
$input-icon-padding: 2px;
//Cards
$cards-item-margin: 10px !default;
$cards-border: 1px solid #f0f0f0 !default;
$cards-hover-border: 1px solid transparent !default;
$cards-hover-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) !default;
$cards-cell-margin: 5px 0 !default;
$cards-item-padding: 5px !default;
// Breakpoints
$mobile-max-width: 767px;
$tablet-max-width: 1023px;
$desktops-max-width: 1300px;
//Alert
$alert-primary-body-color: #cce5ff;
$alert-secondary-body-color: #e2e3e5;
$alert-success-body-color: #d4edda;
$alert-danger-body-color: #f8d7da;
$alert-warning-body-color: #fff3cd;
$alert-info-body-color: #d1ecf1;
$alert-light-body-color: #fefefe;
$alert-dark-body-color: #d6d8d9;
$alert-primary-text-color: #004085;
$alert-secondary-text-color: #383d41;
$alert-success-text-color: #155724;
$alert-danger-text-color: #721c24;
$alert-warning-text-color: #856404;
$alert-info-text-color: #0c5460;
$alert-light-text-color: #818182;
$alert-dark-text-color: #1b1e21;
$alert-hover-darken: 5%;
//new-n2o-components temp vars
$n2o-ui-primary: #374596;
$n2o-ui-primary-hover: #334087;
// Scroll-spy
$menu-item-color: #707070;
//Dropdown
$dropdown-item-padding: 0.25rem 1.5rem;