src/styles/_variables.scss
/**
* @license
* Copyright (c) La Vía Óntica SC, Ontica LLC and contributors. All rights reserved.
*
* See LICENSE.txt in the project root for complete license information.
*/
//
// Color Palette
//
$white: #fdfdfd !default;
$primary-color: hsl(205, 20%, 30%) !default;
$primary-color-light: hsl(205, 20%, 60%) !default;
$primary-color-dark: hsl(205, 20%, 10%) !default;
$secondary-color: hsl(205, 20%, 22%) !default;
$secondary-color-light: hsl(205, 20%, 40%) !default;
$secondary-color-semi-light: hsl(205, 20%, 30%) !default;
$secondary-color-dark: hsl(205, 20%, 10%) !default;
$warning-color: hsl(357, 47%, 51%) !default;
$warning-color-light: hsl(357, 47%, 65%);
$warning-color-dark: hsl(357, 47%, 35%) !default;
$title-color: $primary-color !default;
$title-border-color: $primary-color !default;
$text-color: $secondary-color !default;
$text-color-light: $secondary-color-light !default;
$text-color-dark: $secondary-color-dark !default;
$background-color-work-area: #f4f6f6 !default;
$background-color: #fff !default;
$background-color-highlight: #fbfefd !default;
$border-color: #e8e8e8 !default;
$border-color-light: #edeef0 !default;
$border-color-dark: #909090 !default;
$disabled-color: #edeef0 !default;
$secondary-text-color: $white !default;
$action-color: $primary-color;
$action-selected-color: $primary-color-dark;
$selected-item-text-color: $text-color !default;
$link-color: $text-color !default;
$backdrop-color: rgba(0, 0, 0, 0.32) !default;
//
// Typography
//
$font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-secondary: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-size-root: 10pt !default;
$font-size-base: 1rem !default;
$font-weight-base: 200 !default;
//
$font-size-title: $font-size-base * 1.25;
$font-weight-title: 500;
//
$font-size-command: $font-size-base * 0.85;
$font-weight-command: 300;
//
$font-size-hint: $font-size-base * 0.75;
$font-weight-hint: 300;
$font-weight-bold: 600;
$text-italic: italic;
//
$font-size-grid-header: $font-size-base * 0.75;
$font-size-grid: 9pt;
//
// Responsive
//
$screen-small: 959px;
$screen-medium: 1366px;
$screen-standard: 1440px;
//
// Layout
//
$layout-gradient-initial-color: $warning-color-dark;
$layout-gradient-final-color: $warning-color;
$layout-secondary-color: $secondary-color;
$layout-secondary-color-dark: $secondary-color-dark;
$toolbar-item-background: lighten($primary-color, 65);
$toolbar-item-background-hover: lighten($primary-color, 60);
$toolbar-icon-color: $primary-color;
$toolbar-item-size: 34px;
$toolbar-icon-size: 24px;
//
// icons
//
$primary-icon-size: 16pt;
$icon-color: #909090 !default;
$icon-color-light: #e8e8e8 !default;
$icon-color-dark: #606060 !default;
$icon-color-success: #65a596 !default;
$icon-color-warning: #f3d08f !default;
$icon-color-error: #df879d !default;
//
// form
//
$form-color: #6a6a6a;
$form-title-border: 1px dotted $border-color-dark;
$form-font-weight: 300;
$form-border-bottom: 1px solid $icon-color-light;
$form-title-color: $border-color-dark;
//
// html controls
//
$control-font: 9.5pt $font-family;
$control-small-font: 8.5pt $font-family;
$control-color: $secondary-color;
$control-label-color: $secondary-color-dark;
$control-background-color: #fdfdfd;
$control-border: 1px solid #dfdfdf;
$control-border-radius: 2px;
$selected-control-background-color: #fafafa;
$selected-control-color: $secondary-color;
$selected-control-border: 1px solid #bababa;
$control-disabled-background: #f0f0f0;
$control-disabled-color: $secondary-color;
$control-width: calc(100% - 10px);
$control-height: 28px;
$control-margin: 2px 8px 2px 0;
$control-padding: 2px 6px;
$select-padding: 2px 2px 2px 6px;
$button-font: 9.5pt $font-family;
$button-color: #f8f8f8;
$button-selected-color: #e6e6e6;
$button-border: 0 solid #cecece;
$button-height: 28px;
$checkbox-background-color: $primary-color;
$checkbox-size: 28px;
$checkbox-warning-background-color: $layout-secondary-color;
$date-picker-width: 90px;
$range-picker-width: 185px;
$range-picker-month-cursor-hover: rgba(78, 100, 116, 0.3);
$range-picker-month-in-range: rgba(78, 100, 116, 0.2);
$range-picker-month-hover-selection: rgba(78, 100, 116, 0.3);
$range-picker-month-edge-background: rgb(78, 100, 116);
$range-picker-month-edge-color: white;
$file-control-area-height: 30px;
$file-control-area-width: 30px;
$file-control-tag-area-width: 225px;
$file-control-line-height: 24px;
$file-control-space: 4px;
$file-control-border-radius: 3px;
$tag-default-background-color: hsl(205, 20%, 85%);
$tag-default-color: hsl(205, 20%, 50%);
$tag-info-background-color: hsl(205, 20%, 50%);
$tag-success-background-color: hsl(166, 26%, 52%) !default;
$tag-warning-background-color: hsl(39, 81%, 70%) !default;
$tag-error-background-color: hsl(357, 47%, 70%) !default;
$list-selection-header-background-color: hsl(210, 20%, 90%) !default;
$simple-list-background-color: hsl(210, 20%, 96%) !default;
//
// grid
//
$grid-header-background-color: $primary-color !default;
$grid-header-color: $secondary-text-color !default;
$grid-footer-background-color: $disabled-color;
$grid-odd-background-color: #f4f4f4 !default;
$grid-even-background-color: $white;
$grid-selected-background-color: hsl(205, 20%, 92%);
$grid-nested-background-color: hsl(205, 20%, 92%);
$grid-nested-border: 2px solid hsl(205, 20%, 60%);
$grid-hover-background-color: hsl(205, 20%, 96%);
$grid-selected-hover-background-color: hsl(205, 20%, 90%);
$grid-nested-hover-background-color: hsl(205, 20%, 90%);
$grid-border: 0;
$grid-header-height: 37px;
$grid-row-height: 35px;
$grid-entry-padding-vertical: 10px;
$grid-entry-padding-horizontal: 10px;
$grid-entry-padding-vertical-first: 10px;
$grid-entry-padding-vertical-default: 8px;
//
// Designer
//
$designer-border-color: #d2d2d2 !default;
$designer-bar-background: #f0f0f0 !default;
$designer-bar-selected-border-color: #32816e !default;
$designer-bar-selected-background-color: #b3dbd3 !default;
$designer-bar-selected-hover-background-color: #97cec3 !default;
$designer-cell-selected-background-color: #eef7f5 !default;
$designer-cell-selected-hover-background-color: #dcefeb !default;
$designer-primary-color: #e5f6ff !default;
$designer-secondary-color: #fff8dd !default;
$designer-tertiary-color: #ffe5ed !default;
$designer-quaternary-color: #f3eeff !default;
$designer-gray-color: #f7f7f7 !default;
$designer-green-color: #e8fff3 !default;