Variables deprecated

Variables

Content of src/themes/definitions.scss

/*
 * - Variables containing the word 'background' will always refer to the background color.
 * - Variables containing 'color' will refer to the foreground color of an element, like color of a font.
 * - Hover in most cases means 'hovered' elements.
 * - Selected relates to the currently selected item.
 * - The most significant visual change is achieved by changing the following variables:
 *   - @brand-primary
 *   - @link-color
 */

/*
 * 1. GLOBALS
 */

@import 'temp-vars';
@import 'temp-mixins';

/*
 * 1.1 Base colors
 */

$brand-success:                         #008500;    /* Bootstrap overwrite */
 // e.g. used for window-content
$background:                            $white;

 /*
  * 1.2 Accent colors
  */

$white:                                 #fff;
$black:                                 #000;
$gray:                                  #555555;    /* Bootstrap overwrite */
$blue:                                  #017fb3;
$blue-dark:                             #0064cd;
$blue-light:                            lighten(#049cdb, 25%);
$green:                                 #198819;
$green-light:                           #92d050;
$red:                                   #cc0000;
$yellow:                                #f8e400;
$orange:                                #f89406;
$pink:                                  #e01cd9;
$purple:                                #7e16cf;
$dark-silver:                           #aaa;
$silver:                                #bbb;
$light-silver:                          #ccc;

 /*
  * 1.3 High contrast colors
  */

$hc-gray:                               #767676;
$hc-green:                              #198919;

$hc-link-color:                         #3774a8;
$hc-border-color:                       $hc-gray;

 /*
  * 1.4 Typography
  */

$light-font-family:                     -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$normal-font-family:                    $light-font-family;
$font-family-sans-serif:                $light-font-family;     /* Bootstrap overwrite */

$font-size-touch:                       16px;
$topbar-font-size:                      13px;
$vgrid-font-size:                       13px;
$inline-link-font-size:                 14px;
$sm-mail-detail-font-size:              15px;

 /*
  * 1.5 Base layout
  */

$padding-base-vertical:                  4px;    /* Bootstrap overwrite */
$padding-base-horizontal:               12px;    /* Bootstrap overwrite */
$modal-inner-padding:                   13px;    /* Bootstrap overwrite */

$base-padding:                          4px;
$default-padding:                       $base-padding * 4;
$list-view-padding:                     $default-padding;

 /*
  * 1.6 Links
  */

$link-on-dark:                          #3bf;
$inline-link-border-color:              #eee;
$inline-links-margin:                   18px 0;

 /*
  * 1.7 Icons
  */

$trash-icon-hover-background:           $red;
$trash-icon-hover-color:                $white;

// only used for some upsell items as default yet (therefore not documented)
$upsell-icon-color:                     #ffc107;

 /*
  * 1.8 Images
  */

$theme:                                 'default';
$fallback-image-contact:                '@/themes/#{$theme}/assets/fallback-image-contact.png';
$fallback-image-group:                  '@/themes/#{$theme}/assets/fallback-image-group.png';
$fallback-image-resource:               '@/themes/#{$theme}/assets/fallback-image-resource.png';

$onboarding-mailapp-appstore:           '@/themes/default/assets/mobileapps/mailapp_ios.png';
$onboarding-mailapp-googleplay:         '@/themes/default/assets/mobileapps/mailapp_android.png';
$onboarding-driveapp-googleplay:        '@/themes/default/assets/mobileapps/driveapp_android.png';
$onboarding-driveapp-appstore:          '@/themes/default/assets/mobileapps/driveapp_ios.png';

 /*
  * 1.9 Border radius
  */

$border-radius-large:                   3px;    /* Bootstrap overwrite */
$border-radius-base:                    3px;    /* Bootstrap overwrite */
$border-radius-small:                   3px;    /* Bootstrap overwrite */

$contact-picture-radius:                50%;

 // matches smartphone detection threshold in browser.js
$smartphone-breakpoint:                 540px;
$pagecontroller-animation-duration:     400ms;
 // size of the menu launcher in the top left
$mobile-launcher-icon-size:             18px;
 //toolbar height
$mobile-toolbar-height:                 50px;

 /*
  * 1.11 Misc
  */

$default-border-color:                  #ddd;
$error-text-color:                      #a94442;
$outline-color:                         blue;
$ui-disabled-color:                     $light-silver;

 // session expired blur class
$bluriness: 4px;


 /*
  * 2. COMMONS
  */

 /*
  * 2.1 Alerts
  */

$alert-info-text:                       #396ca0;    /* Bootstrap overwrite */

 /*
  * 2.2 Badges
  * f.e. unread messages count in folder tree
  */

$badge-color:                           $white;       /* Bootstrap overwrite */
$badge-bg:                              $dark-silver;  /* Bootstrap overwrite */

 /*
  * 2.3 Buttons
  */

$btn-info-bg:                           #5bc0de;      /* Bootstrap overwrite */
$btn-success-bg:                        #198819;      /* Bootstrap overwrite */
$btn-warning-bg:                        #fbb450;      /* Bootstrap overwrite */
$btn-warning-color:                     #764500;      /* Bootstrap overwrite */
$btn-danger-bg:                         #df332e;      /* Bootstrap overwrite */
$btn-inverse-bg:                        #444;         /* Bootstrap overwrite */

 /*
  * 2.4 Labels
  */

$label-info-bg:                         #3a87ad;    /* Bootstrap overwrite */
$label-default-bg:                      #666;       /* Bootstrap overwrite */

 /*
  * 3. COMPONENTS
  */

 /*
  * 3.3 Notification
  */

$notification-icon-color:               rgba(255, 255, 255, 1);
$notification-icon-background:          rgba(200, 0, 0, 1);
$notification-icon-color-active:        #333;
$notification-icon-background-active:   $white;
$notification-pane-background:          rgba(255, 255, 255, 1);
$notification-pane-item-background:     rgba(0, 0, 0, 0.10);

 /*
  * 3.5 Toolbar
  */

$toolbar:                               blue;
$toolbar-vertical-padding:              8px;
$toolbar-height:                        24px + 2 * $toolbar-vertical-padding;

$link-disabled-color:                   $dark-silver;
$link-accent-color:                     #ffad00;

 /*
  * 3.6 Premium toolbar
  */

$premium-toolbar-background:            blue;
$premium-toolbar-header-background:     lighten($premium-toolbar-background, 10%);
$premium-toolbar-link-color:            $white;
$premium-toolbar-header-color:          lighten($premium-toolbar-header-background, 50%);

 /*
  * 3.9 Wizard & tours
  */

$wizard-backdrop-color:                 rgba(0, 0, 0, 0.15);

 // hotspot (e.g. used as visual marker in guided tours)
$hotspot-color:                         #FD057C;
$pulse-color:                           fade($hotspot-color, 70%);
$pulse-border-color:                    $hotspot-color;


 /*
  * 4. OX APPS
  */

 /*
  * 4.2 calendar
  */

$appointment-reserved:                  #3774a8;    /* blue */
$appointment-free:                      #8eb360;    /* green */
$appointment-private:                   #555;       /* dark gray */
$appointment-unconfirmed-font:          #555;       /* dark gray */
$appointment-declined-font:             #686868;    /* gray */
$appointment-unconfirmed:               #f0f0f0;
$appointment-declined:                  #e8e8e8;

 // Percentage increase of the dark pigment content on hover effect
$appointment-hover-pct:                 15%;
  /* light blue */
$weekview-time-width:                   80px;
$weekview-footer-height:                34px;
$weekview-working-time-border:          #aaa;

 /*
  * Presence
  */
$presence-color-online: #7CB342;
$presence-color-busy: #d00;
$presence-color-absent: #ffa500;