Skip to content

Commit 20ea1cf

Browse files
johndjamesonjohndjameson
committed
Merge pull request #25 from codeschool/module_styles
Update and document module styles
2 parents 0de4e32 + ff735eb commit 20ea1cf

12 files changed

Lines changed: 550 additions & 73 deletions

File tree

‎public/stylesheets/application.css‎

Lines changed: 125 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,11 @@ td, th {
340340
height: 150%;
341341
width: 0; }
342342

343+
.lr {
344+
list-style-type: none;
345+
margin: 0;
346+
padding: 0; }
347+
343348
@font-face {
344349
font-family: 'OpenSans';
345350
font-style: normal;
@@ -387,16 +392,16 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
387392
margin-top: 0; }
388393

389394
h1, .h1 {
390-
font-size: 200%; }
395+
font-size: 225%; }
391396

392397
h2, .h2 {
393-
font-size: 150%; }
398+
font-size: 175%; }
394399

395400
h3, .h3 {
396-
font-size: 125%; }
401+
font-size: 137.5%; }
397402

398403
h4, .h4 {
399-
font-size: 110%; }
404+
font-size: 112.5%; }
400405

401406
a {
402407
color: #e5bb31;
@@ -442,31 +447,49 @@ img {
442447
max-width: none; }
443448

444449
.btn {
445-
border-radius: 6px;
446-
border: 0;
450+
border: 1px solid transparent;
447451
cursor: pointer;
448452
display: inline-block;
453+
text-align: center;
454+
text-decoration: none;
455+
-webkit-user-select: none;
456+
-moz-user-select: none;
457+
-ms-user-select: none;
458+
user-select: none;
459+
white-space: nowrap;
460+
background: #e55c52;
461+
border-radius: 4px;
462+
color: #fff;
449463
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
450-
font-size: 16px;
464+
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
465+
font-size: 100%;
451466
line-height: 3;
452467
padding: 0 2.5em;
453-
text-align: center;
454-
text-decoration: none;
455468
transition: all 0.3s ease-in-out; }
456-
457-
.btn--a {
458-
background: #e55c52;
459-
color: #fff; }
460-
.btn--a:active, .btn--a:focus, .btn--a:hover {
469+
.btn:active, .btn:focus, .btn:hover {
461470
background: #ce5249;
462471
color: #fff; }
463472

473+
.btn--block {
474+
display: block; }
475+
476+
.btn--a--bordered {
477+
background: transparent;
478+
border-color: #e55c52;
479+
color: #e55c52; }
480+
.btn--a--bordered:active, .btn--a--bordered:focus, .btn--a--bordered:hover {
481+
background: #e55c52;
482+
color: #fff; }
483+
464484
.btn--b {
465-
background: #f1d332;
466-
color: #fff; }
485+
background: #f1d332; }
467486
.btn--b:active, .btn--b:focus, .btn--b:hover {
468-
background: #e4c82f;
469-
color: #fff; }
487+
background: #d8bd2d; }
488+
489+
.has-btn > .btn {
490+
margin-right: 0.3125em; }
491+
.has-btn > .btn:last-child {
492+
margin-right: 0; }
470493

471494
.cell {
472495
margin-left: auto;
@@ -506,16 +529,16 @@ img {
506529
transition: all 0.3s ease-in-out;
507530
width: 100%; }
508531
.form-input::-webkit-input-placeholder {
509-
color: #bcbcbc;
532+
color: #6d7c79;
510533
font-style: italic; }
511534
.form-input::-moz-placeholder {
512-
color: #bcbcbc;
535+
color: #6d7c79;
513536
font-style: italic; }
514537
.form-input:-ms-input-placeholder {
515-
color: #bcbcbc;
538+
color: #6d7c79;
516539
font-style: italic; }
517540
.form-input::placeholder {
518-
color: #bcbcbc;
541+
color: #6d7c79;
519542
font-style: italic; }
520543
.form-input:focus {
521544
border-color: #e5bb31;
@@ -548,7 +571,7 @@ img {
548571

549572
.form-label {
550573
display: block;
551-
font-size: 90%;
574+
font-size: 87.5%;
552575
font-weight: bold;
553576
margin-bottom: 0.3125em; }
554577

@@ -666,6 +689,44 @@ img {
666689
.g-b--l--4of5 {
667690
width: 80%; } }
668691

692+
.list {
693+
list-style-type: none;
694+
margin: 0;
695+
padding: 0; }
696+
697+
.list--divided > .list-item {
698+
border-bottom: 2px solid #efefef;
699+
padding-bottom: 1.25em; }
700+
.list--divided > .list-item:last-child {
701+
border-bottom: 0;
702+
padding-bottom: 0; }
703+
704+
.list--divided--f > .list-item {
705+
padding-bottom: 0; }
706+
707+
.list--inline > .list-item {
708+
display: inline;
709+
margin-right: 1.25em; }
710+
.list--inline > .list-item:last-child {
711+
margin-right: 0; }
712+
713+
.list--inline--divided > .list-item:not(:first-child)::before {
714+
content: '|';
715+
margin-left: -1ch;
716+
margin-right: 0.625em; }
717+
718+
.list--f > .list-item {
719+
margin-bottom: 0; }
720+
721+
.list--l > .list-item {
722+
margin-bottom: 2.5em; }
723+
724+
.list-item {
725+
display: block;
726+
margin-bottom: 1.25em; }
727+
.list-item:last-child {
728+
margin-bottom: 0; }
729+
669730
.row {
670731
overflow: hidden;
671732
padding: 0 1.25em; }
@@ -674,7 +735,30 @@ img {
674735
background: #e5bb31; }
675736

676737
.row--b {
677-
background: #bcbcbc; }
738+
background: #6d7c79; }
739+
740+
.sector {
741+
position: relative; }
742+
.sector::before {
743+
content: '';
744+
height: 9999px;
745+
left: 0;
746+
position: absolute;
747+
top: 0;
748+
width: 9999px;
749+
z-index: -1; }
750+
.sector:first-child::before {
751+
left: auto;
752+
right: 0; }
753+
754+
.sector--white::before {
755+
background: #fff; }
756+
757+
.sector--snow::before {
758+
background: #f9f9f7; }
759+
760+
.has-sector {
761+
overflow: hidden; }
678762

679763
.well {
680764
margin-bottom: 1.25em;
@@ -715,14 +799,23 @@ img {
715799
.header-nav-item--btn:active, .header-nav-item--btn:focus, .header-nav-item--btn:hover {
716800
border: 0; }
717801

802+
.label {
803+
color: #6d7c79;
804+
display: block;
805+
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
806+
font-weight: bold; }
807+
808+
.label--highlight {
809+
color: #e5bb31; }
810+
718811
.bch {
719812
background: #e5bb31; }
720813

721814
.bci {
722815
background: #000; }
723816

724817
.bcs {
725-
background: #bcbcbc; }
818+
background: #6d7c79; }
726819

727820
.bc-bostonBlue {
728821
background: #4399af; }
@@ -948,7 +1041,7 @@ img {
9481041
color: #fff; }
9491042

9501043
.tcs {
951-
color: #bcbcbc; }
1044+
color: #6d7c79; }
9521045

9531046
.tct {
9541047
color: #37443d; }
@@ -959,17 +1052,17 @@ img {
9591052
.tfh {
9601053
font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
9611054

962-
.tsxs {
963-
font-size: 75%; }
964-
9651055
.tss {
966-
font-size: 90%; }
1056+
font-size: 87.5%; }
9671057

9681058
.tsl {
969-
font-size: 115%; }
1059+
font-size: 112.5%; }
9701060

9711061
.tsxl {
972-
font-size: 150%; }
1062+
font-size: 125%; }
1063+
1064+
.tsxxl {
1065+
font-size: 137.5%; }
9731066

9741067
.tsi {
9751068
font-style: italic; }

‎public/stylesheets/application.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/stylesheets/application.sass‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,17 @@
2424
@import 'components/cell'
2525
@import 'components/form'
2626
@import 'components/grid'
27+
@import 'components/list'
2728
@import 'components/row'
29+
@import 'components/sector'
2830
@import 'components/well'
2931

3032
// -------------------------------------
3133
// Structures
3234
// -------------------------------------
3335
3436
@import 'structures/header'
37+
@import 'structures/label'
3538

3639
// -------------------------------------
3740
// Vendor

‎public/stylesheets/components/_button.sass‎

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,70 @@
22
//
33
// Button
44
// -> Clickable control
5+
// CodePen: http://codepen.io/drewbarontini/pen/yAveh
56
//
67
// -------------------------------------
78
// Template (Haml)
89
// -------------------------------------
910
//
10-
// .btn[a|b]
11+
// .has-btn
12+
//
13+
// .btn[a|b s|l block bordered|rounded]
1114
//
1215
// *************************************
1316
1417
.btn
15-
border-radius: $b-borderRadius
16-
border: 0
17-
cursor: pointer
18-
display: inline-block
18+
+action
19+
background: $btn-background
20+
border-radius: $btn-borderRadius
21+
color: $btn-color
22+
font-family: $b-fontFamily-heading
1923
font-family: $b-fontFamily-heading
20-
font-size: $b-fontSize
24+
font-size: 100%
2125
line-height: 3
2226
padding: 0 $b-space-l
23-
text-align: center
24-
text-decoration: none
2527
transition: $b-transition
2628

29+
+state
30+
background: shade($btn-background, 10%)
31+
color: $btn-color
32+
2733
// -------------------------------------
2834
// Modifiers
2935
// -------------------------------------
3036
31-
// ----- Hierarchy ----- //
37+
// ----- Behavior ----- //
38+
39+
.btn--block
40+
display: block
3241

33-
// Primary
42+
// ----- Hierarchy ----- //
3443
35-
.btn--a
36-
background: $btn--a-background
37-
color: $btn--a-color
44+
.btn--a--bordered
45+
background: transparent
46+
border-color: $btn-background
47+
color: $btn-background
3848

3949
+state
40-
background: shade($btn--a-background, 10%)
41-
color: $btn--a-color
50+
background: $btn-background
51+
color: $c-text-invert
4252

4353
// Secondary
4454
4555
.btn--b
4656
background: $btn--b-background
47-
color: $btn--b-color
4857

4958
+state
50-
background: shade($btn--b-background, 5%)
51-
color: $btn--b-color
59+
background: shade($btn--b-background, 10%)
60+
61+
// -------------------------------------
62+
// Context
63+
// -------------------------------------
64+
65+
.has-btn
66+
67+
> .btn
68+
margin-right: $b-space-xs
69+
70+
&:last-child
71+
margin-right: 0

0 commit comments

Comments
 (0)