Add new colors and buttons

app/assets/stylesheets/application.scss

@@ -1,14 +1,14 @@
 /*
  *= require highlightjs-github-theme
  *= require_self
- *= require_tree .
  *= require jquery-ui/draggable
  *= require rails_bootstrap_forms
  *= require bootstrap-select
- *= require constants
  *= stub reports_pdf
  */
 
+@import "shared_styles/global_elements";
+
 @import "constants";
 @import "bootstrap-sprockets";
 @import "bootstrap";
@@ -19,9 +19,14 @@
 @import "handsontable.full.min";
 @import "ajax-bootstrap-select.min";
 @import "extend/bootstrap";
-@import "themes/scinote";
+@import "themes/*";
-@import "extend/perfect-scrollbar";
+@import "extend/*";
 @import "my_modules/protocols/*";
 @import "my_modules/results/*";
 @import "protocols/*";
 @import "hooks/*";
+@import "partials/*";
+@import "settings/*";
+@import "shared/*";
+
+@import "*"

app/assets/stylesheets/constants.scss

@@ -5,7 +5,7 @@
 //==============================================================================
 
 // Grayscale colors
-$color-white: #fff;
+/*$color-white: #fff;
 $color-alabaster: #fcfcfc;
 $color-concrete: #f2f2f2;
 $color-gainsboro: #e3e3e3;
@@ -41,7 +41,7 @@ $office-ms-powerpoint: #d24726;
 
 // MarvinJS color:
 $marvinjs-color: #29999c;
-
+*/
 //==============================================================================
 // Other
 //==============================================================================
@@ -69,7 +69,7 @@ $link-hover-color: darken($link-color, 15%);
 $link-hover-decoration: underline;
 
 // Typography
-$font-family-lato: Lato, "Open Sans", Arial, Helvetica, sans-serif;
+/*$font-family-lato: Lato, "Open Sans", Arial, Helvetica, sans-serif;
 $font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif;
 $font-family-serif: Georgia, "Times New Roman", Times, serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -89,7 +89,7 @@ $line-height-computed: floor(($font-size-base * $line-height-base));
 $headings-font-family: inherit;
 $headings-font-weight: 500;
 $headings-line-height: 1.1;
-$headings-color: inherit;
+$headings-color: inherit;*/
 
 // Components
 $padding-base-vertical: 6px;

app/assets/stylesheets/shared_styles/constants/borders.scss

@@ -0,0 +1,13 @@
+@import "colors";
+
+$border-radius-default: 4px;
+$border-radius-modal: 6px;
+$border-radius-tag: 2px;
+
+$border-default: 1px solid $color-silver-chalice;
+$border-secondary: 1px solid $color-volcano;
+$border-tertiary: 1px solid $color-alto;
+
+$border-focus: 1px solid $brand-focus;
+$border-danger: 1px solid $brand-danger;
+$border-transparent: 1px solid transparent;

app/assets/stylesheets/shared_styles/constants/colors.scss

@@ -0,0 +1,55 @@
+// Grayscale colors
+$color-white: #fff;
+$color-concrete: #F0F0F0;
+$color-alto: #d0d0d0;
+$color-silver-chalice: #a0a0a0;
+$color-volcano: #404040;
+$color-black: #231f20;
+
+
+
+// Theme colors
+$brand-primary: #104da9;
+$brand-primary-hover: #0c3a80;
+$brand-primary-press: #07244f;
+
+$brand-academy: #a52068;
+$brand-academy-dark: #8c1b58;
+
+$brand-focus: #609fff;
+$brand-focus-light: #dfecff;
+
+$brand-success: #2dbe61;
+$brand-success-light: #cbefd7;
+
+$brand-danger: #e72525;
+$brand-danger-hover: #b21d1d;
+$brand-danger-press: #801515;
+$brand-danger-light: #f9c9c9;
+
+$brand-warning: #f0ad4e;
+$brand-warning-light: #fbebd3;
+
+// MS Office colors:
+$office-ms-word: #2b579a;
+$office-ms-excel: #217346;
+$office-ms-powerpoint: #d24726;
+
+// MarvinJS color:
+$marvinjs-color: #29999c;
+
+
+
+// Don't use them
+$color-alabaster: $color-concrete;
+$color-gainsboro: $color-concrete;
+$color-silver: $color-alto;
+$color-dove-gray: $color-volcano;
+$color-emperor: $color-volcano;
+$brand-default: $color-white;
+$brand-info: $brand-focus;
+$brand-other: $brand-success;
+$brand-extra: $brand-focus;
+$brand-primary-light: $brand-focus-light;
+$brand-light-blue: $brand-focus-light;
+

app/assets/stylesheets/shared_styles/constants/fonts.scss

@@ -0,0 +1,61 @@
+$font-family-lato: Lato, "Open Sans", Arial, Helvetica, sans-serif;
+$font-family-sans-serif: "Open Sans", Arial, Helvetica, sans-serif;
+$font-family-serif: Georgia, "Times New Roman", Times, serif;
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
+$font-family-base: $font-family-lato;
+$font-family-icons: "Font Awesome 5 Free";
+$font-size-base: 16px;
+
+
+@mixin font-h1 {
+  font-family: $font-family-base;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+@mixin font-h2 {
+  font-family: $font-family-base;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+@mixin font-h3 {
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  font-weight: bold;
+}
+
+@mixin font-main {
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+}
+
+@mixin font-button {
+  font-family: $font-family-base;
+  font-size: 14px;
+}
+
+@mixin font-small {
+  font-family: $font-family-base;
+  font-size: 12px;
+}
+
+
+
+/*
+
+$font-size-large: ceil(($font-size-base * 1.1)); //16px
+$font-size-small: ceil(($font-size-base * .9)); //13px
+$font-size-h1: floor(($font-size-base * 2.6)); //36px
+$font-size-h2: floor(($font-size-base * 2.15)); //30px
+$font-size-h3: ceil(($font-size-base * 1.7)); //24px
+$font-size-h4: ceil(($font-size-base * 1.25)); //18px
+$font-size-h5: $font-size-base; //14px
+$font-size-h6: ceil(($font-size-base * .85)); //12px
+$line-height-base: 1.428571429;
+$line-height-computed: floor(($font-size-base * $line-height-base));
+$headings-font-family: inherit;
+$headings-font-weight: 500;
+$headings-line-height: 1.1;
+$headings-color: inherit;
+*/

app/assets/stylesheets/shared_styles/constants/transition.scss

@@ -0,0 +1,4 @@
+$timing-function-deceleration: cubic-bezier(0, 0, .2, 1) !default;
+$timing-function-standard: cubic-bezier(.4, 0, .2, 1) !default;
+$timing-function-acceleration: cubic-bezier(.4, 0, 1, 1) !default;
+$timing-function-sharp: cubic-bezier(.4, 0, .6, 1) !default;

app/assets/stylesheets/shared_styles/elements/buttons.scss

@@ -0,0 +1,87 @@
+.sci-btn {
+  @include font-button;
+  animation-timing-function: $timing-function-sharp;
+  background: $brand-primary;
+  border: 1px solid $brand-primary;
+  border-radius: $border-radius-default;
+  color: $color-white;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 20px;
+  outline: 0;
+  padding: 7px 16px;
+  transition: .3s;
+  user-select: none;
+
+  .fas {
+    color: inherit;
+    margin-right: 5px
+  }
+
+  &:hover {
+    background: $brand-primary-hover;
+  }
+
+  &:active {
+    background: $brand-primary-press;
+  }
+
+  &.secondary {
+    background: $color-white;
+    border: $border-default;
+    color: $color-black;
+
+    &:hover {
+      background: $color-concrete;
+      border: $border-secondary;
+    }
+
+    &:active {
+      background: $color-alto;
+      border: $border-secondary;
+    }
+  }
+
+  &.tertiary {
+    background: transparent;
+    border: $border-transparent;
+    color: $color-black;
+
+    &:hover {
+      background: $color-concrete;
+      border: $border-transparent;
+    }
+
+    &:active {
+      background: $color-alto;
+      border: $border-transparent;
+    }
+  }
+
+  &.sensitive {
+    background: $brand-danger;
+    border: $border-danger;
+
+    &:hover {
+      background: $brand-danger-hover;
+    }
+
+    &:active {
+      background: $brand-danger-press;
+    }
+  }
+
+  &.icon-btn {
+    padding: 7px;
+    width: 36px;
+
+    .fas {
+      margin: 0;
+    }
+  }
+
+  &:focus {
+    border: $border-focus;
+  }
+}

app/assets/stylesheets/shared_styles/global_elements.scss

@@ -0,0 +1,2 @@
+@import "constants/*";
+@import "elements/*";

app/views/projects/index.html.erb

@@ -1,3 +1,4 @@
+
 <% provide(:head_title, t("projects.index.head_title")) %>
  
 <% if current_team %>
@@ -168,3 +169,37 @@
 <% end %>
 
 <%= javascript_include_tag "projects/index" %>
+
+<!-- remove next part before merge -->
+
+<div class="demo-container" style="background: white; padding: 20px;">
+  <div>
+    <button class="sci-btn">Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn secondary">Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn tertiary">Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn sensitive">Button</button>
+  </div>
+  <hr>
+  <div>
+    <button class="sci-btn"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn secondary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn tertiary"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn sensitive"><i class="fas fa-arrow-alt-circle-right"></i>Button</button>
+  </div>
+  <hr>
+  <div>
+    <button class="sci-btn icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn secondary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn tertiary icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
+    <span style="display: inline-block; width: 30px"></span>
+    <button class="sci-btn sensitive icon-btn"><i class="fas fa-arrow-alt-circle-right"></i></button>
+  </div>
+</div>