beyond_canvas 0.22.0.pre → 0.23.0.pre

data/app/assets/stylesheets/beyond_canvas/components/_tables.scss

@@ -1,8 +1,10 @@
 .table {
-  width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
 
   th, td {
+    box-sizing: border-box;
     padding: 15px;
     text-align: left;
   }
@@ -12,19 +14,22 @@
       font-weight: 700;
 
       &:first-child {
-        background-color: $table-header-background;
+        background-color: var(--table-header-background);
       }
 
       &:nth-child(2) {
-        border-bottom: 2px solid $table-border-color;
+        border-bottom: 2px solid var(--table-row-border);
       }
     }
   }
 
   tbody {
     tr {
-      &:not(:last-child) {
-        border-bottom: 1px solid $table-border-color;
+      background-color: var(--table-row-background);
+      border-bottom: var(--table-row-border);
+
+      &:hover {
+        background-color: var(--table-row-background-hover);
       }
     }
   }

data/app/assets/stylesheets/beyond_canvas/components/_titles.scss

@@ -3,5 +3,5 @@
   line-height: 1;
   font-weight: normal;
   font-size: 190%;
-  color: $title-color;
+  color: var(--workspace-headline);
 }

data/app/assets/stylesheets/beyond_canvas/mailer.scss

@@ -1,5 +1,6 @@
 @import "bourbon";
 
-@import "settings/variables";
+@import "settings/constant_variables";
+@import "settings/base_variables";
 
 @import "components/markdown";

data/app/assets/stylesheets/beyond_canvas/settings/_base_variables.scss

@@ -0,0 +1,241 @@
+:root {
+  /*
+  /*  ---------------------------------------------------
+  /*  Brand
+  /*  --------------------------------------------------- */
+  --primary-color: Orange;
+  --secondary-color: #383838;
+  --tertiary-color: DeepSkyBlue;
+  /*
+  /*  ---------------------------------------------------
+  /*  Global layout
+  /*  --------------------------------------------------- */
+  --workspace-text: #3e3e3e;
+  --workspace-background: #e6e6e6;
+  --workspace-border: #d2d2d2;
+  --workspace-headline: #676767;
+  --padding: 40px;
+  --borderRadius: 3px;
+  --surfaceHover-color: #b3ecff;
+  /*
+  /*  ---------------------------------------------------
+  /*  Card
+  /*  --------------------------------------------------- */
+  --card-headline: #a3a3a3;
+  --card-background: white;
+  --card-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
+  --card-divider-border: 1px solid #e6e6e6;
+  --card-borderRadius: 3px;
+  --card-padding: 40px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Breadcrumb
+  /*  --------------------------------------------------- */
+  --breadcrumb-text: #787878;
+  --breadcrumb-link: #787878;
+  --breadcrumb-link-hover: #525252;
+  --breadcrumb-icon: #787878;
+  /*
+  /*  ---------------------------------------------------
+  /*  Action bar
+  /*  --------------------------------------------------- */
+  --workspace-toolbar-background: white;
+  --workspace-toolbar-border: 1px solid rgba(0, 0, 0, 0.2);
+  --header-bar-height: 73px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Notification and Toast messages
+  /*  --------------------------------------------------- */
+  --notification-background: white;
+  --notification-text: gray;
+  --notification-borderRadius: 4px;
+  --notification-boxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+  --notification-success: #97c344;
+  --notification-info: #999999;
+  --notification-warning: #f3b547;
+  --notification-danger: #da3c3c;
+  /*
+  /*  ---------------------------------------------------
+  /*  Modal
+  /*  --------------------------------------------------- */
+  --modal-overlay-background: rgba(0, 0, 0, 0.75);
+  --modal-container-background: white;
+  --modal-container-borderRadius: 3px;
+  --modal-closeButton-icon: #8b8b8b;
+  --modal-closeButton-icon-hover: #717171;
+  --modal-container-padding: 40px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Empty states
+  /*  --------------------------------------------------- */
+  --emptyState-surface: #e3e3e3;
+  --emptyState-bubbles: #dedede;
+  --emptyState-outline: #575757;
+  --emptyState-headline: #676767;
+  --emptyState-help-text: gray;
+  /*
+  /*  ---------------------------------------------------
+  /*  Loading spinner
+  /*  --------------------------------------------------- */
+  --spinner-border: #c0c0c0;
+  --spinner-border-highlighting: #676767;
+  /*
+  /*  ---------------------------------------------------
+  /*  States
+  /*  --------------------------------------------------- */
+  --danger-color: #da3c3c;
+  --success-color: #97c344;
+  --warning-color: #f3b547;
+  --disabled-color: #d0d0d0;
+  --default-color: #999999;
+  /*
+  /* ---------------------------------------------------
+  /* Status bubbles
+  /* --------------------------------------------------- */
+  --todo-status-background: #f9dca7;
+  --todo-status-text: #af740b;
+  --active-status-background: #cde2a5;
+  --active-status-text: #4e6721;
+  --danger-status-background: #eeb3a7;
+  --danger-status-text: #c72626;
+  --outline-status-background: transparent;
+  --outline-status-border: #b3b3b3;
+  --outline-status-text: #808080;
+  /*
+  /*  ---------------------------------------------------
+  /*  Link
+  /*  --------------------------------------------------- */
+  --primaryLink-color: DeepSkyBlue;
+  --primaryLink-hover-color: #0099cc;
+  --defaultLink-color: #787878;
+  --defaultLink-hover-color: #5e5e5e;
+  /*
+  /*  ---------------------------------------------------
+  /*  Buttons
+  /*  --------------------------------------------------- */
+  --button-text: white;
+  --button-borderRadius: 4px;
+  --button-borderBottom-width: 2px;
+  --button-horizontal-padding: calc(8px - 2px / 2);
+  --button-default-background: #999999;
+  --button-default-background-hover: #7f7f7f;
+  --button-default-borderBottom-color: #7f7f7f;
+  --button-primary-background: Orange;
+  --button-primary-background-hover: #cc8400;
+  --button-primary-borderBottom-color: #cc8400;
+  --button-danger-background: #da3c3c;
+  --button-danger-background-hover: #ae3535;
+  --button-danger-borderBottom-color: #ae3535;
+  --button-disabled-background: #d0d0d0;
+  --button-disabled-text: #909090;
+  --button-disabled-textShadow: 1px 1px 0 #ffffff;
+  --button-outline-border-color: Orange;
+  --button-outline-border-width: 1px;
+  --button-outline-background: transparent;
+  --button-outline-background-hover: #ffedcc;
+  --button-outline-text: #eb9800;
+  --button-link-default-text: #787878;
+  --button-link-primary-text: DeepSkyBlue;
+  /*
+  /*  ---------------------------------------------------
+  /*  RichTextEditor
+  /*  --------------------------------------------------- */
+  --textEditor-text: #3e3e3e;
+  --textEditor-background: white;
+  --textEditor-border-color: #d2d2d2;
+  --textEditor-border-radius: 3px;
+  --textEditor-toolbar-background: #f3f3f3;
+  --textEditor-toolbar-border-color: #d2d2d2;
+  --textEditor-button-background: #f3f3f3;
+  --textEditor-button-background-hover: #e6e6e6;
+  --textEditor-button-active-background: #d4d4d4;
+  --textEditor-button-icon: #676767;
+  --textEditor-button-icon-disabled: #b3b3b3;
+  /*
+  /*  ---------------------------------------------------
+  /*  Table
+  /*  --------------------------------------------------- */
+  --table-row-border: 1px solid #e6e6e6;
+  --table-row-background: white;
+  --table-row-background-hover: #b3ecff;
+  --table-header-background: #ebebeb;
+  --table-header-link: #3e3e3e;
+  --table-header-link-hover: #252525;
+  --table-header-sort-icon-default: #b3b3b3;
+  --table-header-sort-icon: currentColor;
+  /*
+  /*  ---------------------------------------------------
+  /*  Media queries
+  /*  --------------------------------------------------- */
+  --screen-xs-max: 47.9375em;
+  --screen-sm: 48em;
+  --screen-sm-max: 61.9375em;
+  --screen-md: 62em;
+  --screen-md-max: 74.9375em;
+  --screen-lg: 75em;
+  --screen-lg-max: 112.4375em;
+  --screen-xl: 112.5em;
+  /*
+  /*  ---------------------------------------------------
+  /*  Form elements
+  /*  --------------------------------------------------- */
+  --formGroup-label: gray;
+  --formGroup-validation-error: #da3c3c;
+  --formGroup-validation-text: white;
+  --formGroup-validation-borderRadius: 3px;
+  --inputField-borderRadius: 3px;
+  --inputField-border: #d2d2d2;
+  --inputField-border-focus: Orange;
+  --inputField-text: #3e3e3e;
+  --inputField-background: white;
+  --inputField-background-focus: white;
+  --inputField-background-disabled: #f5f5f5;
+  --inputField-text-disabled: #9a9a9a;
+  --inputField-placeholder-text: #a4a4a4;
+  --inputField-hint-text: gray;
+  --smartInputField-suggestion-active: #b3ecff;
+  --smartInputField-value-background: #d9d9d9;
+  --smartInputField-value-text: #666666;
+  --smartInputField-value-icon: currentColor;
+  --smartInputField-value-icon-hover: #4d4d4d;
+  --smartInputField-value-borderRadius: 3px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Checkboxes and Radio buttons
+  /*  --------------------------------------------------- */
+  --check-color: #97c344;
+  --uncheck-color: #b3b3b3;
+  --check-disabled-text: #c5c5c5;
+  --check-disabled-icon: #d9d9d9;
+  /*
+  /*  ---------------------------------------------------
+  /*  FlipSwitch
+  /*  --------------------------------------------------- */
+  --flipSwitch-unchecked-background: #b3b3b3;
+  --flipSwitch-checked-background: #97c344;
+  --flipSwitch-border: #c0c0c0;
+  --flipSwitch-label: gray;
+  --flipSwitch-text: silver;
+  /*
+  /*  ---------------------------------------------------
+  /*  Step list
+  /*  --------------------------------------------------- */
+  --stepList-background: #f0f0f0;
+  --stepList-headline: #747474;
+  --stepList-bubble-line: #808080;
+  --stepList-bubble-background: #808080;
+  --stepList-bubble-text: white;
+  /*
+  /*  ---------------------------------------------------
+  /*  Reseller logo
+  /*  --------------------------------------------------- */
+  --logo-width: 238px;
+  --logo-height: 76px;
+  /*
+  /*  ---------------------------------------------------
+  /*  Gray scale colors
+  /*  --------------------------------------------------- */
+  --white: white;
+  --gray: gray;
+  --silver: silver;
+}

data/app/assets/stylesheets/beyond_canvas/settings/{_variables.scss → _constant_variables.scss}

@@ -1,3 +1,16 @@
+:root {
+  // ************************************************************
+  // Menu
+  // ************************************************************
+  --menu-height: 60px;
+}
+
+
+
+
+
+
+
 // ************************************************************
 // Colors
 // ************************************************************
@@ -13,16 +26,14 @@ $palette-danger: rgb(218, 60, 60) !default;
 // General styles
 // ************************************************************
 
-$main-background-public: rgb(233, 232, 220) !default;
-$main-background-application: rgb(233, 232, 220) !default;
 $main-transition: 0.125s ease-in;
+$main-color: red;
 
 // ************************************************************
 // Typography
 // ************************************************************
 
 $main-font-family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif';
-$main-color: rgb(62, 62, 62) !default;
 $main-line-height: 1.5;
 $main-font-size: 14px;
 
@@ -30,7 +41,6 @@ $main-font-size: 14px;
 // Headlines
 // ************************************************************
 
-$headline-color: rgb(122, 118, 76) !default;
 $headline-line-height: 1;
 
 // ************************************************************
@@ -68,13 +78,9 @@ $button-padding: 6px 12px 7px;
 // Cards
 // ************************************************************
 
-$card-border-radius: 3px !default;
-$card-box-shadow: 0 2px 7px rgba($black, 0.2) !default;
 $card-padding: 40px;
 $card-margin: 30px;
-$card-separator-color: rgb(222, 222, 222) !default;
 $card-separator-spacing: 40px;
-$card-title-color: rgb(247, 133, 96) !default;
 
 // ************************************************************
 // Containers
@@ -82,12 +88,6 @@ $card-title-color: rgb(247, 133, 96) !default;
 
 $container-spacing: 30px;
 
-// ************************************************************
-// Labels
-// ************************************************************
-
-$label-color: rgb(128, 128, 128) !default;
-
 // ************************************************************
 // Inputs
 // ************************************************************
@@ -107,6 +107,17 @@ $checkbox-checked-background: #ffffff !default; // This value MUST be HEX
 $checkbox-unchecked-color: #C2BF9D !default; // This value MUST be HEX
 $checkbox-unchecked-background: #ffffff !default; // This value MUST be HEX
 
+// ************************************************************
+// Toggles
+// ************************************************************
+
+$toggle-border-color: #cbc9ad !default;
+$toggle-disabled-background: #f5f4ef !default;
+$toggle-checked-background: #97c344 !default; // This value MUST be HEX
+$toggle-checked-color: #ffffff !default; // This value MUST be HEX
+$toggle-unchecked-background: #c2bf9d !default; // This value MUST be HEX
+$toggle-unchecked-color: #ffffff !default; // This value MUST be HEX
+
 // ************************************************************
 // Radiobuttons
 // ************************************************************
@@ -126,28 +137,8 @@ $hint-color: rgb(158, 158, 158) !default;
 // Logo
 // ************************************************************
 
-$logo-margin-top-public: 0 !default;
-$logo-margin-bottom-public: 34px !default;
-
-// ************************************************************
-// Flash
-// ************************************************************
-
-$flash-success: rgb(123, 170, 81) !default;
-$flash-notice: rgb(123, 170, 81) !default;
-$flash-info: rgb(153, 153, 153) !default;
-$flash-warning: rgb(243, 181, 71) !default;
-$flash-error: rgb(218, 60, 60) !default;
-$flash-border-radius: 4px !default;
-$flash-box-shadow: 0 1px 2px 0 rgba($black, 0.2) !default;
-$flash-color: rgb(128, 128, 128) !default;
-
-// ************************************************************
-// Tables
-// ************************************************************
-
-$table-header-background: rgb(243, 242, 236) !default;
-$table-border-color: rgb(233, 232, 220) !default;
+$logo-margin-top-public: 0;
+$logo-margin-bottom-public: 34px;
 
 // ************************************************************
 // Comments
@@ -156,31 +147,6 @@ $table-border-color: rgb(233, 232, 220) !default;
 $comment-background: rgb(246, 246, 243) !default;
 $comment-color: rgb(170, 169, 156) !default;
 
-// ************************************************************
-// Notices
-// ************************************************************
-
-$notice-success-background: rgb(123, 170, 81) !default;
-$notice-notice-background: rgb(123, 170, 81) !default;
-$notice-info-background: rgb(153, 153, 153) !default;
-$notice-warning-background: rgb(243, 181, 71) !default;
-$notice-error-background: rgb(218, 60, 60) !default;
-$notice-border-radius: 4px !default;
-$notice-color: rgb(153, 153, 153) !default;
-
-// ************************************************************
-// Status
-// ************************************************************
-
-$status-good-background: rgb(205,225,165) !default;
-$status-good-color: rgb(85,110,41) !default;
-$status-warning-background: rgb(249,220,166) !default;
-$status-warning-color: rgb(178,120,18) !default;
-$status-danger-background: rgb(247,174,163) !default;
-$status-danger-color: rgb(164,35,34) !default;
-$status-neutral-background: rgb(224,223,205) !default;
-$status-neutral-color: rgb(155,151,100) !default;
-
 // ************************************************************
 // Breadcrums
 // ************************************************************
@@ -241,10 +207,10 @@ $sidebar-item-selected-background: #4eb7a8;
 // Modals
 // ************************************************************
 
-$modal-padding: 10px;
+$modal-padding: 20px;
 $modal-width: 650px;
 $modal-close-icon-color: #8b8b8b !default;
-$modal-background-color: rgba(0, 0, 0, 0.5) !default;
+$modal-background-color: rgba(0, 0, 0, 0.75) !default;
 
 // ************************************************************
 // Select2
@@ -264,4 +230,4 @@ $select2-option-hover-color: rgb(62, 62, 62) !default;
 // Collapsibles
 // ************************************************************
 
-$collapsible-color: $palette-primary !default
+$collapsible-color: $palette-primary !default;