AlchemyCMS/alchemy_cms

View on GitHub
app/assets/stylesheets/alchemy/_variables.scss

Summary

Maintainability
Test Coverage
$light-blue: #cddce5;
$very-light-blue: lighten($light-blue, 12%);
$blue: #2d5a8d;
$dark-blue: darken($blue, 10%);
$light-gray: #f7f7f7;
$medium-gray: #efefef;
$dark-gray: #666666;
$very-dark-gray: #333;
$dark-gray-blue: rgb(51, 59, 81);
$light_yellow: #fbfbd8;
$orange: #ffd77a;
$dark-orange: #eca96e;
$very-dark-orange: darken($dark-orange, 20%);
$white: #fff;

$text-color: rgba($dark-gray-blue, 0.8) !default;
$muted-text-color: rgba($dark-gray-blue, 0.5) !default;
$icon-color: rgba($dark-gray-blue, 0.75) !default;
$linked-color: $orange !default;
$anchor-color: $very-dark-orange !default;

$body-background-color: $light-gray !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: 0.9em !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: $dark-blue !default;
$dialog-header-text-color: $white !default;
$dialog-header-font-size: $default-font-size !default;
$dialog-box-shadow: 0 8px 16px rgba(35, 35, 35, 0.5) !default;
$dialog-overlay-color: rgb(100, 100, 100) !default;
$dialog-overlay-opacity: 0.4 !default;
$dialog-background-color: $light-gray !default;

$default-border-color: rgba(#afafaf, 0.5) !default;
$border-inset-color: lighten($default-border-color, 10%) !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: $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 $medium-gray !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: $text-color !default;
$form-field-disabled-text-color: #888 !default;
$form-field-disabled-bg-color: rgba($white, 0.5) !default;

$focus-color: rgba($dark-orange, 0.75) !default;

$button-bg-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: $text-color !default;
$button-hover-border-color: $default-border-color !default;
$button-focus-border-color: $dark-orange !default;
$button-font-weight: 700 !default;
$button-text-shadow: none !default;
$button-box-shadow: 0px 1px 1px -1px #333 !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: $text-color !default;
$secondary-button-border-color: $default-border-color !default;

$linked-button-color: rgba($linked-color, 0.75) !default;
$linked-border-color: darken($linked-color, 10%) !default;

$success_border_color: #9cc4a1 !default;
$success_text_color: #2e5934 !default;
$success_background_color: #e2efd3 !default;

$info_border_color: #8392b5 !default;
$info_text_color: #233772 !default;
$info_background_color: #cadbf3 !default;

$warning_border_color: #c4c19c !default;
$warning_text_color: #726d23 !default;
$warning_background_color: #f3f0c1 !default;

$error_border_color: #c49c9c !default;
$error_text_color: #a23434 !default;
$error_background_color: #efd3d3 !default;

$hint-background-color: $light_yellow !default;
$hint-text-color: #59543e !default;

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

$sitemap-line-height: 32px !default;
$sitemap-page-background-color: rgba($white, 0.75) !default;
$sitemap-page-hover-color: rgba($light_yellow, 0.5) !default;
$sitemap-info-background-color: rgba($white, 0.5) !default;
$sitemap-highlight-color: rgba(#fffba5, 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: $dark-blue !default;
$main-menu-active-bg-color: $dark-orange !default;
$main-menu-active-text-color: $dark-blue !default;
$main-menu-text-color: $white !default;
$main-menu-icon-color: $white !default;
$main-menu-entry-max-width: 110px !default;
$toolbar-bg-color: $medium-gray !default;
$toolbar-height: 46px !default;
$tab-bar-height: 51px !default;
$element-toolbar-height: 37px !default;
$header-height: 29px !default;
$header-background: #d8d8d8 !default;
$text-shadow-light: rgba($white, 0.5) 0 0 4px !default;
$transition-duration: 250ms !default;
$transition-easing: linear !default;

$tooltip-background-color: $dark-blue !default;

$addon-icon-opacity: 0.85 !default;

$table-row-even-background-color: $white !default;
$table-row-odd-background-color: rgba($white, 0.5) !default;
$table-row-hover-color: rgba($light_yellow, 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: $dark-blue !default;
$element-header-active-color: $white !default;
$element-header-deprecated-bg-color: rgba(253, 213, 175, 0.25) !default;
$element-deprecated-border-color: rgb(253, 213, 175) !default;
$top-menu-height: 75px !default;

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

$datepicker_current_bg: $blue !default;
$datepicker_current_color: $white !default;
$datepicker_current_box_shadow: none !default;
$datepicker_hover_bg: $light_yellow !default;
$datepicker_hover_color: $text-color !default;
$datepicker_today_bg: $medium-gray !default;
$datepicker_today_color: $blue !default;
$datepicker_header_color: $text-color !default;
$datepicker_day_bg: $light-gray !default;
$datepicker_day_border: 1px solid $medium-gray !default;
$datepicker_day_color: $text-color !default;

$select-hover-bg-color: $dark-blue !default;
$select-hover-text-color: $white !default;
$medium-select-box-width: 90px;
$large-select-box-width: 120px;

$thumbnail-background:
  linear-gradient(45deg, $medium-gray 25%, transparent 25%) 0.5em 0.5em/1em 1em,
  linear-gradient(-45deg, $medium-gray 25%, transparent 25%) -0.5em 0/1em 1em,
  linear-gradient(45deg, transparent 75%, $medium-gray 75%) 0 0/1em 1em,
  linear-gradient(-45deg, transparent 75%, $medium-gray 75%) 0 0.5em/1em 1em
    $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;