Skip to content

Commit a267136

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

File tree

16 files changed

+1961
-193
lines changed

16 files changed

+1961
-193
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;
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

+2-52
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;
88
}
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-
}

‎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

‎PROFIT_SHARE_CALCULATOR/app/templates/application.hbs

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{{nav-bar}}
22

3-
<div class='metrics-bar-trigger' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
3+
<div class='metrics-bar-trigger hover-glow' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
44
{{#if metricsDrawerOpen}}
55
Close
66
{{else}}
@@ -26,14 +26,14 @@
2626
</p>
2727

2828
<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.MOCK studio.mode) "active"}}'>
29-
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
29+
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
3030
<h3 class='serif lighter'>Mock Mode</h3>
3131
<p>Play with the calculator to understand how it works!</p>
3232
</div>
3333
</div>
3434

3535
<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.REAL studio.mode) "active"}}'>
36-
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.REAL)}}>
36+
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.REAL)}}>
3737
<h3 class='serif lighter'>Real World Mode</h3>
3838
<p>Actually calculate profit share at the end of the year</p>
3939
</div>
@@ -67,7 +67,7 @@
6767
</p>
6868
{{#each studio.scenarios as |scenario|}}
6969
<div class='brick col col-12 sm-col-6 py1 center {{if (eq scenario studio.selectedScenario) "active"}}'>
70-
<div class='inner p2 border-medium-gray' {{action (route-action 'applyScenario' scenario)}}>
70+
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'applyScenario' scenario)}}>
7171
<h3 class='serif lighter'>{{scenario.title}}</h3>
7272
<p>{{scenario.description}}</p>
7373
</div>
@@ -90,14 +90,14 @@
9090
{{#each studio.technologists as |technologist|}}
9191
<div class='technologist col col-12'>
9292
<div class='inner py1 clearfix flex'>
93-
<div class='col col-2 flex items-center'>
93+
<div class='col col-2 flex items-center pr1'>
9494
{{#if (eq editing technologist)}}
9595
{{input value=technologist.name class='inline py1'}}
9696
{{else}}
9797
<h3>{{technologist.name}}</h3>
9898
{{/if}}
9999
</div>
100-
<div class='months col col-4 center flex items-center'>
100+
<div class='months col col-4 center flex items-center pr1'>
101101
{{#if (eq editing technologist)}}
102102
<input
103103
value={{technologist.monthsAtSanctu}}
@@ -109,7 +109,7 @@
109109
<h3>{{technologist.monthsAtSanctu}} Months / PSU</h3>
110110
{{/if}}
111111
</div>
112-
<div class='salary col col-3 sm-col-4 center flex items-center'>
112+
<div class='salary col col-3 sm-col-4 center flex items-center pr1'>
113113
{{#if (eq editing technologist)}}
114114
<input
115115
value={{technologist.salary}}
@@ -121,19 +121,19 @@
121121
<h3>{{format-money technologist.salary}}</h3>
122122
{{/if}}
123123
</div>
124-
<div class='profit col col-3 sm-col-4 flex items-center'>
124+
<div class='profit col col-3 sm-col-4 flex items-center pr1'>
125125
<h3 class='dark-navy'>{{format-money technologist.profitShare}}</h3>
126126
</div>
127127

128-
<div class='col col-1 caps center xs-hide'>
128+
<div class='col col-1 center xs-hide hover-fade'>
129129
{{#if (eq editing technologist)}}
130-
<h6 {{action (route-action 'stopEditingTeamMember')}}>OK</h6>
130+
<h5 {{action (route-action 'stopEditingTeamMember')}}>OK</h5>
131131
{{else}}
132-
<h6 {{action (route-action 'editTeamMember' technologist)}}>Edit</h6>
132+
<h5 {{action (route-action 'editTeamMember' technologist)}}>Edit</h5>
133133
{{/if}}
134134
</div>
135-
<div class='col col-1 caps right-align xs-hide'>
136-
<h6 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h6>
135+
<div class='col col-1 right-align xs-hide hover-fade'>
136+
<h5 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h5>
137137
</div>
138138
</div>
139139
</div>
@@ -145,8 +145,8 @@
145145
</div>
146146
{{/each}}
147147
<div class='col col-12 center py1 xs-hide' {{action (route-action 'addTeamMember')}}>
148-
<div class='border-medium-gray inner py1 px3 clearfix center'>
149-
<h3 class='white'>+ Add Team Member</h3>
148+
<div class='border-medium-gray inner py1 px3 clearfix center hover-glow'>
149+
<h3>+ Add Team Member</h3>
150150
</div>
151151
</div>
152152
</div>

0 commit comments

Comments
 (0)