Skip to content

Commit 10790c7

Browse files
conordavidsonconordavidson
committed
Update to g3d styling
1 parent d6e0ecb commit 10790c7

File tree

16 files changed

+1962
-194
lines changed

16 files changed

+1962
-194
lines changed

‎PROFIT_SHARE_CALCULATOR/app/components/metrics-drawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import Ember from 'ember';
22

33
export default Ember.Component.extend({
4-
classNames: ['metrics-drawer', 'px3'],
4+
classNames: ['metrics-drawer'],
55
classNameBindings: ['open'],
66
actions: {
77
setNumeric(label, value) {

‎PROFIT_SHARE_CALCULATOR/app/styles/app.scss

+54-25
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,43 @@
11
:root {
2-
--light-gray: #F4F4F4;
3-
--medium-gray: #C8C8C8;
4-
--dark-gray: #3B3B3B;
5-
--dark-navy: #173963;
2+
--text-color: #eddb35;
3+
--background-color: rgb(19, 20, 27);
4+
--card-background: rgb(29, 25, 37);
5+
--card-background-active: rgb(36, 31, 46);
6+
--outline: #474034;
67
}
78

8-
::selection {
9-
background: var(--dark-navy); /* WebKit/Blink Browsers */
10-
color: white;
9+
.mt6 {
10+
margin-top: 6rem;
11+
}
12+
13+
.mt7 {
14+
margin-top: 7rem;
15+
}
16+
17+
.mt8 {
18+
margin-top: 8rem;
1119
}
12-
::-moz-selection {
13-
background: var(--dark-navy); /* Gecko Browsers */
14-
color: white;
20+
21+
::selection {
22+
background: #3b3544; /* WebKit/Blink Browsers */
1523
}
1624

1725
[data-ember-action] {
1826
cursor: pointer;
27+
}
28+
29+
.hover-glow {
1930
transition: 120ms ease-in-out;
20-
&:hover { opacity: 0.4; }
31+
&:hover {
32+
box-shadow: 0px 0 9px -1px #ada132f0;
33+
}
34+
}
35+
36+
.hover-fade {
37+
transition: 120ms ease-in-out;
38+
&:hover {
39+
opacity: 0.6;
40+
}
2141
}
2242

2343
.brick {
@@ -35,9 +55,8 @@
3555
}
3656
&.active {
3757
.inner {
38-
background-color: var(--dark-navy);
39-
border-color: var(--dark-navy);
40-
h3, p { color: white; }
58+
background-color: var(--card-background-active);
59+
box-shadow: 0 0 4px #eddb3546;
4160
}
4261
}
4362
}
@@ -69,8 +88,8 @@ input.inline {
6988
display: block;
7089
font-size: 1.17em;
7190
font-weight: bold;
72-
color: var(--dark-gray);
73-
font-family: "Atlas Grotesk", sans-serif;
91+
color: var(--text-color);
92+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
7493
outline: none;
7594
background-color: transparent;
7695
border-style: solid;
@@ -83,6 +102,17 @@ input.inline {
83102
color: var(--dark-navy);
84103
}
85104

105+
input {
106+
background-color: transparent;
107+
color: var(--text-color);
108+
padding: 0.5rem 0;
109+
font-weight: 300;
110+
}
111+
112+
input[type=number]::-webkit-inner-spin-button,
113+
input[type=number]::-webkit-outer-spin-button {
114+
-webkit-appearance: none;
115+
}
86116

87117
label.metric-input {
88118
text-align: right;
@@ -113,18 +143,17 @@ label.metric-input {
113143

114144
.metrics-bar-trigger {
115145
cursor: pointer;
116-
font-family: "Atlas Grotesk", sans-serif;
146+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
117147
font-weight: 900;
118-
text-transform: uppercase;
119-
letter-spacing: 2px;
120-
font-size: 0.75rem;
148+
font-size: 1rem;
121149
position: fixed;
122150
z-index: 3;
123-
top: 110px;
124-
left: 32px;
125-
background-color: var(--dark-navy);
126-
color: white;
127-
padding: 10px;
151+
top: 100px;
152+
left: 1rem;
153+
background-color: var(--card-background);
154+
padding: 16px 22px;
155+
border-radius: 999px;
156+
box-shadow: 0 0 8px #eddb3570;
128157
}
129158

130159
@import 'global/fonts';

‎PROFIT_SHARE_CALCULATOR/app/styles/components/_metrics-drawer.scss

+13-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
.metrics-drawer {
22
z-index: 2;
33
position: fixed;
4-
background-color: white;
5-
box-shadow: 0 0 15px 1px #2f2f2f;
4+
background-color: var(--background-color);
5+
box-shadow: 0 0 4px #eddb3546;
66
left: 0;
7-
width: 280px;
8-
max-width: 90%;
7+
width: 100vw;
8+
max-width: 500px;
99
height: 100%;
10-
padding-top: 150px;
10+
padding-top: 170px;
1111
transform: translateX(-100%);
1212
transition: transform 180ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
1313

1414
&.open {
1515
transform: translateX(0%);
1616
}
1717
}
18+
19+
.metrics-drawer-inner {
20+
padding: 0 1rem;
21+
22+
@media screen and (min-width: 48rem) {
23+
padding: 0 2rem;
24+
}
25+
}

‎PROFIT_SHARE_CALCULATOR/app/styles/components/_nav-bar.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
.nav-bar {
22
position: fixed;
3-
background-color: white;
3+
color: #eddb35;
44
width: 100%;
5-
height: 80px;
6-
box-shadow: 0 0 15px 1px #2f2f2f;
5+
height: 110px;
76
z-index: 3;
7+
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, #1d1126 80%, #1d1126 100%);
88

99
.title {
1010
margin-left: auto;

‎PROFIT_SHARE_CALCULATOR/app/styles/global/_colors.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.border-medium-gray {
2-
border: 1px solid var(--medium-gray);
2+
border: 1px solid var(--outline);
33
}
44

55
.bg-dark-navy {

‎PROFIT_SHARE_CALCULATOR/app/styles/global/_elements.scss

+16-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
11
html {
2+
color-scheme: dark !important;
23
-webkit-font-smoothing: antialiased;
4+
background-color: var(--background-color);
5+
color: var(--text-color);
6+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
37
}
48

5-
h1, h2, h3, h4, h5, h6, p, label, input {
6-
color: var(--dark-gray);
7-
font-family: "Atlas Grotesk", sans-serif;
8-
&.lighter { font-weight: lighter; }
9-
}
9+
.lighter { font-weight: 400; }
1010

1111
h1 { font-size: 3em; }
12-
a { color: var(--dark-navy); }
12+
a { color: var(--text-color); }
1313
p { &.line-height { line-height: 1.75em; } }
1414

1515
hr {
1616
border-bottom: 0;
1717
border-style: solid;
18-
border-color: var(--medium-gray);
18+
border-color: var(--outline);
19+
box-shadow: 0 0 4px #eddb3546;
20+
}
21+
22+
a {
23+
transition: all 150ms ease-in-out;
24+
}
25+
26+
a:hover {
27+
text-shadow: 0 0 8px var(--text-color);
1928
}

‎PROFIT_SHARE_CALCULATOR/app/styles/global/_fonts.scss

+3-53
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,8 @@
11
.serif {
2-
font-family: "Austin News Deck", serif;
3-
&.lighter { font-weight: lighter; }
2+
&.lighter { font-weight: 400; }
3+
&.lightest { font-weight: 200; }
44
}
55

66
.caps {
77
letter-spacing: 0.1em !important;
8-
}
9-
10-
@font-face {
11-
font-family: 'Austin News Deck';
12-
src: url('AustinNewsDeck-Light-Web.eot');
13-
src: local('Austin News Deck'), local('Austin News Deck Light'),
14-
url('/fonts/AustinNewsDeck-Light-Web.eot?#iefix') format('embedded-opentype'),
15-
url('/fonts/AustinNewsDeck-Light-Web.woff2') format('woff2'),
16-
url('/fonts/AustinNewsDeck-Light-Web.woff') format('woff'),
17-
url('/fonts/AustinNewsDeck-Light-Web.ttf') format('truetype'),
18-
url('/fonts/AustinNewsDeck-Light-Web.svg#Calibre-Black') format('svg');
19-
font-weight: lighter;
20-
font-style: normal;
21-
}
22-
23-
@font-face {
24-
font-family: 'Austin News Deck';
25-
src: url('AustinNewsDeck-Roman-Web.eot');
26-
src: local('Austin News Deck'), local('Austin News Deck Roman'),
27-
url('/fonts/AustinNewsDeck-Roman-Web.eot?#iefix') format('embedded-opentype'),
28-
url('/fonts/AustinNewsDeck-Roman-Web.woff2') format('woff2'),
29-
url('/fonts/AustinNewsDeck-Roman-Web.woff') format('woff'),
30-
url('/fonts/AustinNewsDeck-Roman-Web.ttf') format('truetype'),
31-
url('/fonts/AustinNewsDeck-Roman-Web.svg#Calibre-Black') format('svg');
32-
font-weight: normal;
33-
font-style: normal;
34-
}
35-
36-
@font-face {
37-
font-family: 'Atlas Grotesk';
38-
src: url('/fonts/AtlasGroteskRegular.eot');
39-
src: url('/fonts/AtlasGroteskRegular.eot') format('embedded-opentype'),
40-
url('/fonts/AtlasGroteskRegular.woff2') format('woff2'),
41-
url('/fonts/AtlasGroteskRegular.woff') format('woff'),
42-
url('/fonts/AtlasGroteskRegular.ttf') format('truetype'),
43-
url('/fonts/AtlasGroteskRegular.svg#AtlasGroteskRegular') format('svg');
44-
font-weight: normal;
45-
font-style: normal;
46-
}
47-
48-
@font-face {
49-
font-family: 'Atlas Grotesk';
50-
src: url('/fonts/AtlasGroteskLight.eot');
51-
src: url('/fonts/AtlasGroteskLight.eot') format('embedded-opentype'),
52-
url('/fonts/AtlasGroteskLight.woff2') format('woff2'),
53-
url('/fonts/AtlasGroteskLight.woff') format('woff'),
54-
url('/fonts/AtlasGroteskLight.ttf') format('truetype'),
55-
url('/fonts/AtlasGroteskLight.svg#AtlasGroteskLight') format('svg');
56-
font-weight: lighter;
57-
font-style: normal;
58-
}
8+
}

‎PROFIT_SHARE_CALCULATOR/app/styles/overrides/_ember-notify.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
.ember-notify-default .ember-notify {
2-
font-family: "Atlas Grotesk", sans-serif;
3-
color: white;
2+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
43
border: 0;
54
font-size: 16px;
65
line-height: 20px;
76
padding: 18px;
7+
box-shadow: 0 0 4px #eddb3546;
88

9-
&.success { background-color: var(--dark-navy) }
10-
&.info { background-color: var(--dark-navy) }
11-
&.warning { background-color: var(--dark-navy) }
12-
&.error { background-color: var(--dark-navy) }
9+
&.success { background-color: var(--card-background) }
10+
&.info { background-color: var(--card-background) }
11+
&.warning { background-color: var(--card-background) }
12+
&.error { background-color: var(--card-background) }
1313
}
1414

0 commit comments

Comments
 (0)