Skip to content

Commit 34c9ad2

Browse files
toastercuptoastercup
committed
feat: drop in variables from cortex (to eventually be abstracted to style-base), uppercase thumbnail placeholder text
1 parent dc23296 commit 34c9ad2

File tree

4 files changed

+167
-1
lines changed

4 files changed

+167
-1
lines changed

‎app/assets/stylesheets/cortex-plugins-core/application.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1+
// TODO: These two files should be removed once we abstract Cortex styles to a cortex-style-base lib
2+
@import 'variables/colors';
3+
@import 'variables/typography';
4+
15
@import 'components/thumbnail-placeholder';

‎app/assets/stylesheets/cortex-plugins-core/components/thumbnail-placeholder.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
.thumbnail-placeholder {
2-
background-color: #E4E4E4; // TODO: Abstract to cortex-style-base library. This should be $color-grey-evenlighter
2+
background-color: $color-grey-evenlighter;
33
display: flex;
44
height: 50px;
55
width: 50px;
66

77
.h4 {
8+
text-transform: uppercase;
89
align-self: center;
910
text-align: center;
1011
width: 100%;

‎app/assets/stylesheets/cortex-plugins-core/variables/_colors.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Color Definitions
2+
3+
$color-teal: #63C0B9;
4+
$color-teal-dark: #54A1A1;
5+
$color-teal-light: #A1D9D5;
6+
7+
$color-orange: #F79C25;
8+
$color-orange-dark: #E78523;
9+
$color-orange-light: #FED473;
10+
11+
$color-anchor-blue-light: #747D8E;
12+
13+
$color-green: #009b74;
14+
15+
$color-slate-grey: #6E788F;
16+
$color-grey: #BBB; // Type
17+
$color-grey-dark: #333; // Type, Sidebar background, Login page background
18+
$color-grey-light: #D4D4D4; // Content background color
19+
$color-grey-lightest: #DDD; // Disabled and flat button background color
20+
$color-grey-evenlighter: #E4E4E4;
21+
$color-grey-reallylight: #F2F2F2;
22+
$color-grey-extralight: #F4F4F4; // Wizard Instruction Panel background color
23+
24+
$color-red: #d85252;
25+
26+
$color-white: white; // Header
27+
$color-black: #000000;
28+
29+
30+
// Color Semantics
31+
32+
$employer-color: $color-teal;
33+
$employer-color-dark: $color-teal-dark;
34+
$employer-color-light: $color-teal-light;
35+
36+
$flash-error-background: $color-red;
37+
$flash-success-background: $color-green;
38+
39+
$ar-color: $color-orange;
40+
$ar-color-dark: $color-orange-dark;
41+
$ar-color-light: $color-orange-light;
42+
43+
$notes-text: #6E788F;
44+
45+
$jumbo-button-text: #6E788F;
46+
$jumbo-button-hover-background: $color-grey-evenlighter;
47+
$jumbo-button-active-background: $color-grey-reallylight;

‎app/assets/stylesheets/cortex-plugins-core/variables/_typography.scss‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@font-face {
2+
font-family: Montserrat;
3+
font-style: normal;
4+
font-weight: normal;
5+
src: url(asset_path('Montserrat-Regular.otf')) format("opentype");
6+
}
7+
8+
@font-face {
9+
font-family: Montserrat;
10+
font-style: normal;
11+
font-weight: bold;
12+
src: url(asset_path('Montserrat-Medium.otf')) format("opentype");
13+
}
14+
15+
@font-face {
16+
font-family: Montserrat;
17+
font-style: normal;
18+
font-weight: bolder;
19+
src: url(asset_path('Montserrat-SemiBold.otf')) format("opentype");
20+
}
21+
22+
@font-face {
23+
font-family: Montserrat;
24+
font-style: normal;
25+
font-weight: lighter;
26+
src: url(asset_path('Montserrat-Light.otf')) format("opentype");
27+
}
28+
29+
$cortex-font-stack: Montserrat, sans-serif;
30+
$base-font-size: 1rem;
31+
32+
%display-text { // Cortex Logo
33+
color: $color-grey-dark;
34+
font-family: $cortex-font-stack;
35+
font-weight: normal;
36+
font-size: 2.1775rem;
37+
}
38+
39+
h1, h2, h3, h4, h5, h6 {
40+
line-height: 1.5;
41+
}
42+
43+
h1,
44+
.text-style-1 { // Bread Crumbs and Page Headers
45+
color: $color-teal;
46+
font-family: $cortex-font-stack;
47+
font-weight: bold;
48+
font-size: 1.17rem;
49+
text-decoration: none;
50+
}
51+
52+
h2,
53+
.text-style-2 {
54+
color: $color-grey;
55+
font-family: $cortex-font-stack;
56+
font-weight: lighter;
57+
font-size: 1.17rem;
58+
}
59+
60+
h3,
61+
.text-style-3 {
62+
color: $color-grey;
63+
font-family: $cortex-font-stack;
64+
font-weight: bold;
65+
font-size: 1.17rem;
66+
}
67+
68+
h4,
69+
.text-style-4 { // Section Headers, Dropdowns, Button Text
70+
color: $color-grey-dark;
71+
font-family: $cortex-font-stack;
72+
font-size: 0.83rem;
73+
}
74+
75+
h5,
76+
.text-style-5 { // Field Text
77+
color: $color-grey;
78+
font-family: $cortex-font-stack;
79+
font-weight: lighter;
80+
font-size: $base-font-size;
81+
}
82+
83+
h6,
84+
.text-style-6 { // Field Text Filled
85+
color: $color-anchor-blue-light;
86+
font-family: $cortex-font-stack;
87+
font-size: $base-font-size;
88+
}
89+
90+
.text-style-7 { // Help Notes
91+
color: $color-anchor-blue-light;
92+
font-family: $cortex-font-stack;
93+
font-weight: lighter;
94+
font-size: 0.67rem;
95+
}
96+
97+
%sidebar-nav { // Side Nav
98+
color: $color-grey;
99+
font-family: $cortex-font-stack;
100+
font-weight: lighter;
101+
font-size: 0.875rem;
102+
text-transform: uppercase;
103+
104+
&.active { // Side Nav Selected
105+
font-weight: bold;
106+
color: $color-teal;
107+
}
108+
}
109+
110+
p {
111+
color: $color-anchor-blue-light;
112+
font-family: $cortex-font-stack;
113+
font-size: $base-font-size;
114+
}

0 commit comments

Comments
 (0)