AlchemyCMS/alchemy_cms

@import "./deprecated_variables";

$light-blue: hsl(203deg, 32%, 85%);
$very-light-blue: hsl(203deg, 32%, 97%);
$blue: hsl(212deg, 52%, 36%);
$dark-blue: hsl(212deg, 52%, 26%);
$light-gray: hsl(0deg, 0%, 97%);
$medium-gray: hsl(0deg, 0%, 94%);
$dark-gray: hsl(0deg, 0%, 40%);
$very-dark-gray: hsl(0deg, 0%, 20%);
$light_yellow: hsl(60deg, 81%, 92%);
$orange: hsl(42deg, 100%, 74%);
$dark-orange: hsl(28deg, 77%, 68%);
$very-dark-orange: hsl(28deg, 77%, 48%);
$white: hsl(0deg, 0%, 100%);

$text-color: hsla(224deg, 23%, 26%, 0.8) !default;
$muted-text-color: hsla(224deg, 23%, 26%, 0.5) !default;
$icon-color: hsla(224deg, 23%, 26%, 0.75) !default;
$linked-color: var(--color-orange_medium) !default;
$anchor-color: var(--color-orange_very_dark) !default;

$body-background-color: var(--color-grey_very_light) !default;

$default-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
  "Lucida Sans", Verdana, Tahoma, sans-serif !default;
$mono-font-family: Menlo, Monaco, "Bitstream Vera Sans Mono", "Lucida Console",
  Terminal, monospace !default;
$base-font-size: 12px !default;
$default-font-size: 1em !default;
$small-font-size: var(--font-size_small) !default;
$default-font-style: $default-font-size $default-font-family !default;

$default-padding: 4px !default;
$default-margin: $default-padding !default;

$dialog-header-height: 36px !default;
$dialog-header-padding: 0 2 * $default-padding !default;
$dialog-header-color: var(--color-blue_dark) !default;
$dialog-header-text-color: var(--color-white) !default;
$dialog-header-font-size: $default-font-size !default;
$dialog-box-shadow: 0 8px 16px hsla(0deg, 0%, 14%, 0.5) !default;
$dialog-overlay-color: hsl(0deg, 0%, 39%) !default;
$dialog-overlay-opacity: 0.4 !default;
$dialog-background-color: var(--color-grey_very_light) !default;

$default-border-color: hsla(0deg, 0%, 69%, 0.5) !default;
$border-inset-color: hsla(0deg, 0%, 79%, 0.5) !default;
$default-border-width: 1px !default;
$default-border-style: solid !default;
$default-border: $default-border-width $default-border-style
  $default-border-color !default;
$default-border-radius: 3px !default;

$form-field-margin: $default-margin 0 !default;
$form-field-height: 31px !default;
$form-field-addon-width: 30px !default;
$form-field-background-color: var(--color-white) !default;
$form-field-border-width: $default-border-width !default;
$form-field-border-style: $default-border-style !default;
$form-field-border-color: $default-border-color $default-border-color
  $border-inset-color $border-inset-color !default;
$form-field-box-shadow: inset 0px 0 1px var(--color-grey_light) !default;
$form-field-padding: $default-padding 2 * $default-padding !default;
$form-field-font-size: $default-font-size !default;
$form-field-line-height: 1.25 !default;
$form-field-text-color: var(--color-text) !default;
$form-field-disabled-text-color: hsl(0deg, 0%, 53%) !default;
$form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5) !default;

$focus-color: hsla(28deg, 77%, 68%, 0.75) !default;

$button-bg-color: var(--color-white) !default;
$button-hover-bg-color: transparent !default;
$button-border-color: $default-border-color !default;
$button-border-width: 1px !default;
$button-border-radius: $default-border-radius !default;
$button-text-color: var(--color-text) !default;
$button-hover-border-color: $default-border-color !default;
$button-focus-border-color: var(--color-orange_dark) !default;
$button-font-weight: 700 !default;
$button-text-shadow: none !default;
$button-box-shadow: 0px 1px 1px -1px hsl(0deg, 0%, 20%) !default;
$button-focus-box-shadow: 0px 1px 1px 0px $button-focus-border-color !default;
$button-padding: $default-padding 5 * $default-padding !default;
$small-button-padding: 0.4em 0.8em !default;
$button-margin: $form-field-margin !default;

$icon-button-width: 30px !default;
$icon-button-height: 30px !default;
$icon-button-medium-width: 26px !default;
$icon-button-medium-height: 26px !default;
$icon-button-small-width: 15px !default;
$icon-button-small-height: 15px !default;

$secondary-button-bg-color: transparent !default;
$secondary-button-text-color: var(--color-text) !default;
$secondary-button-border-color: $default-border-color !default;

$linked-button-color: hsla(42deg, 100%, 74%, 0.75) !default;
$linked-border-color: hsl(42deg, 100%, 64%) !default;

$success_border_color: hsl(127deg, 25%, 69%) !default;
$success_text_color: hsl(128deg, 32%, 26%) !default;
$success_background_color: hsl(88deg, 47%, 88%) !default;

$info_border_color: hsl(222deg, 25%, 61%) !default;
$info_text_color: hsl(225deg, 53%, 29%) !default;
$info_background_color: hsl(215deg, 63%, 87%) !default;

$warning_border_color: hsl(55deg, 25%, 69%) !default;
$warning_text_color: hsl(56deg, 53%, 29%) !default;
$warning_background_color: hsl(56deg, 68%, 85%) !default;

$error_border_color: hsl(0deg, 25%, 69%) !default;
$error_text_color: hsl(0deg, 51%, 42%) !default;
$error_background_color: hsl(0deg, 47%, 88%) !default;

$hint-background-color: var(--color-yellow_light) !default;
$hint-text-color: hsl(49deg, 18%, 30%) !default;

$form-left-width: 35% !default;
$form-right-width: 65% !default;

$sitemap-line-height: 32px !default;
$sitemap-page-background-color: hsla(0deg, 0%, 100%, 0.75) !default;
$sitemap-page-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;
$sitemap-info-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
$sitemap-highlight-color: hsla(57deg, 100%, 82%, 0.5) !default;

$main-menu-width: 150px !default;
$collapsed-main-menu-width: 48px !default;
$collapsed-main-menu-entry-max-width: 300px !default;
$main-menu-bg-color: var(--color-blue_dark) !default;
$main-menu-active-bg-color: var(--color-orange_dark) !default;
$main-menu-active-text-color: var(--color-blue_dark) !default;
$main-menu-text-color: var(--color-white) !default;
$main-menu-icon-color: var(--color-white) !default;
$main-menu-entry-max-width: 110px !default;
$toolbar-bg-color: var(--color-grey_light) !default;
$toolbar-height: 46px !default;
$tab-bar-height: 51px !default;
$element-toolbar-height: 37px !default;
$header-height: 29px !default;
$header-background: hsl(0deg, 0%, 85%) !default;
$text-shadow-light: hsla(0deg, 0%, 100%, 0.5) 0 0 4px !default;
$transition-duration: 250ms !default;
$transition-easing: linear !default;

$tooltip-background-color: var(--color-blue_dark) !default;

$addon-icon-opacity: 0.85 !default;

$table-row-even-background-color: var(--color-white) !default;
$table-row-odd-background-color: hsla(0deg, 0%, 100%, 0.5) !default;
$table-row-hover-color: hsla(60deg, 81%, 92%, 0.5) !default;

$elements-window-width: 22.5vw !default;
$elements-window-min-width: 400px !default;
$element-header-bg-color: transparent !default;
$element-header-active-bg-color: var(--color-blue_dark) !default;
$element-header-active-color: var(--color-white) !default;
$element-header-deprecated-bg-color: hsla(29deg, 95%, 84%, 0.25) !default;
$element-deprecated-border-color: hsl(29deg, 95%, 84%) !default;
$top-menu-height: 75px !default;

$tabs-height: 31px !default;
$pagination-height: 52px !default;

$datepicker_current_bg: var(--color-blue_medium) !default;
$datepicker_current_color: var(--color-white) !default;
$datepicker_current_box_shadow: none !default;
$datepicker_hover_bg: var(--color-yellow_light) !default;
$datepicker_hover_color: var(--color-text) !default;
$datepicker_today_bg: var(--color-grey_light) !default;
$datepicker_today_color: var(--color-blue_medium) !default;
$datepicker_header_color: var(--color-text) !default;
$datepicker_day_bg: var(--color-grey_very_light) !default;
$datepicker_day_border: 1px solid var(--color-grey_light) !default;
$datepicker_day_color: var(--color-text) !default;

$select-hover-bg-color: var(--color-blue_dark) !default;
$select-hover-text-color: var(--color-white) !default;
$medium-select-box-width: 90px;
$large-select-box-width: 120px;

$thumbnail-background:
  linear-gradient(45deg, var(--color-grey_light) 25%, transparent 25%) 0.5em
    0.5em/1em 1em,
  linear-gradient(-45deg, var(--color-grey_light) 25%, transparent 25%) -0.5em 0/1em
    1em,
  linear-gradient(45deg, transparent 75%, var(--color-grey_light) 75%) 0 0/1em
    1em,
  linear-gradient(-45deg, transparent 75%, var(--color-grey_light) 75%) 0 0.5em/1em
    1em var(--color-white) !default;

$small-screen-break-point: 500px;
$medium-screen-break-point: 700px;
$large-screen-break-point: 1000px;
$xlarge-screen-break-point: 1440px;
$xxlarge-screen-break-point: 1680px;