mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-12-11 14:45:59 +08:00
Add new colors and buttons
This commit is contained in:
aignatov-bio
parent
c79b25d5d2
commit
9694117635
9 changed files with 271 additions and 9 deletions
|
|
@ -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 "extend/perfect-scrollbar";
|
||||
@import "themes/*";
|
||||
@import "extend/*";
|
||||
@import "my_modules/protocols/*";
|
||||
@import "my_modules/results/*";
|
||||
@import "protocols/*";
|
||||
@import "hooks/*";
|
||||
@import "partials/*";
|
||||
@import "settings/*";
|
||||
@import "shared/*";
|
||||
|
||||
@import "*"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
13
app/assets/stylesheets/shared_styles/constants/borders.scss
Normal file
13
app/assets/stylesheets/shared_styles/constants/borders.scss
Normal file
|
|
@ -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;
|
||||
55
app/assets/stylesheets/shared_styles/constants/colors.scss
Normal file
55
app/assets/stylesheets/shared_styles/constants/colors.scss
Normal file
|
|
@ -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;
|
||||
|
||||
61
app/assets/stylesheets/shared_styles/constants/fonts.scss
Normal file
61
app/assets/stylesheets/shared_styles/constants/fonts.scss
Normal file
|
|
@ -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;
|
||||
*/
|
||||
|
|
@ -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;
|
||||
87
app/assets/stylesheets/shared_styles/elements/buttons.scss
Normal file
87
app/assets/stylesheets/shared_styles/elements/buttons.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import "constants/*";
|
||||
@import "elements/*";
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue