mitlibraries-theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +10 -0
  3. data/.travis.yml +5 -0
  4. data/CODE_OF_CONDUCT.md +74 -0
  5. data/Gemfile +6 -0
  6. data/LICENSE.txt +21 -0
  7. data/README.md +76 -0
  8. data/Rakefile +10 -0
  9. data/app/helpers/link_helper.rb +22 -0
  10. data/app/views/layouts/_flash.html.erb +8 -0
  11. data/app/views/layouts/_global_alert.html.erb +9 -0
  12. data/app/views/layouts/_head.html.erb +46 -0
  13. data/app/views/layouts/_institute_footer.html.erb +17 -0
  14. data/app/views/layouts/_js_exception_handler.erb +4 -0
  15. data/app/views/layouts/_libraries_footer.html.erb +25 -0
  16. data/app/views/layouts/_site_footer.html.erb +1 -0
  17. data/app/views/layouts/_site_header.html.erb +17 -0
  18. data/app/views/layouts/_site_nav.html.erb +16 -0
  19. data/app/views/layouts/application.html.erb +39 -0
  20. data/bin/console +14 -0
  21. data/bin/setup +8 -0
  22. data/lib/mitlibraries/theme/version.rb +5 -0
  23. data/lib/mitlibraries/theme.rb +11 -0
  24. data/mitlibraries-theme.gemspec +29 -0
  25. data/vendor/assets/images/favicon.ico +0 -0
  26. data/vendor/assets/images/mitlib-wordmark.svg +1 -0
  27. data/vendor/assets/images/vi-shape7-tp.svg +1 -0
  28. data/vendor/assets/stylesheets/_core.scss +32 -0
  29. data/vendor/assets/stylesheets/elements/_content.scss +74 -0
  30. data/vendor/assets/stylesheets/elements/_controls.scss +156 -0
  31. data/vendor/assets/stylesheets/elements/_footer.scss +114 -0
  32. data/vendor/assets/stylesheets/elements/_forms.scss +151 -0
  33. data/vendor/assets/stylesheets/elements/_header.scss +92 -0
  34. data/vendor/assets/stylesheets/elements/_modules.scss +173 -0
  35. data/vendor/assets/stylesheets/elements/_tables.scss +112 -0
  36. data/vendor/assets/stylesheets/global/_base.scss +63 -0
  37. data/vendor/assets/stylesheets/global/_helpers.scss +161 -0
  38. data/vendor/assets/stylesheets/global/_layouts.scss +413 -0
  39. data/vendor/assets/stylesheets/global/_shame.scss +4 -0
  40. data/vendor/assets/stylesheets/global/_typography.scss +81 -0
  41. data/vendor/assets/stylesheets/global/_unsets.scss +29 -0
  42. data/vendor/assets/stylesheets/global/_variables.scss +117 -0
  43. data/vendor/assets/stylesheets/global/_vendor-overrides.scss +1 -0
  44. data/vendor/assets/stylesheets/js-elements/_expand-collapse.scss +35 -0
  45. data/vendor/assets/stylesheets/libraries-main.scss +17 -0
  46. metadata +172 -0
@@ -0,0 +1,173 @@
1
+ // modules and other reusable bits
2
+
3
+ .box-content {
4
+ border: 1px solid $gray-l3;
5
+ background-color: $white-t;
6
+ padding: 3%;
7
+ }
8
+
9
+ .bit {
10
+ margin: 0 0 3rem 0;
11
+ border-top: 3px solid $gray-l2;
12
+ padding-top: 1rem;
13
+ font-size: $fs-small;
14
+
15
+ .title {
16
+ @extend .hd-5;
17
+ }
18
+
19
+ ul {
20
+ @extend .list-unbulleted;
21
+ }
22
+ }
23
+
24
+ // global app style alerts and notices
25
+
26
+ .alert {
27
+
28
+ p {
29
+ margin-top: .2rem;
30
+ margin-bottom: .2rem;
31
+ }
32
+
33
+ &.info {
34
+ color: $black;
35
+ }
36
+
37
+ &.success {
38
+ color: $success;
39
+ }
40
+
41
+ &.warning {
42
+ color: $warning;
43
+ }
44
+
45
+ &.error {
46
+ color: $error;
47
+ }
48
+ }
49
+
50
+ .wrap-notices {
51
+ background-color: $gray-d1;
52
+ color: $white;
53
+ font-size: $fs-xsmall;
54
+
55
+ a {
56
+ color: $brand-primary2;
57
+ }
58
+
59
+ &.info {
60
+ }
61
+
62
+ &.success {
63
+ border-bottom: 4px solid $success;
64
+ }
65
+
66
+ &.warning {
67
+ border-bottom: 4px solid $warning;
68
+ }
69
+
70
+ &.error {
71
+ border-bottom: 4px solid $error;
72
+ }
73
+ }
74
+
75
+ .alert-banner {
76
+ display: block;
77
+ margin-bottom: 2rem;
78
+ border-radius: 2px;
79
+ padding: 1.6rem 2rem;
80
+ border: 1px solid $brand-primary;
81
+ border-top: 5px solid $brand-primary;
82
+ color: $black-t;
83
+ font-weight: $fw-bold;
84
+
85
+ .fa {
86
+ display: inline-block;
87
+ margin-right: .5em
88
+ }
89
+
90
+ &.success {
91
+ border: 1px solid $success;
92
+ border-top: 3px solid $success;
93
+ color: $black-t;
94
+ }
95
+
96
+ &.warning {
97
+ border: 1px solid $warning;
98
+ border-top: 5px solid $warning;
99
+ color: $black-t;
100
+ }
101
+
102
+ &.error {
103
+ border: 1px solid $error;
104
+ border-top: 5px solid $error;
105
+ color: $black-t;
106
+ }
107
+ }
108
+
109
+ .inline-action {
110
+
111
+ @media (min-width: $bp-screen-md) {
112
+
113
+ .message {
114
+ display: inline-block;
115
+ vertical-align: middle;
116
+ width: 65%
117
+ }
118
+
119
+ .actions {
120
+ display: inline-block;
121
+ vertical-align: middle;
122
+ width: 34%;
123
+ text-align: right;
124
+ }
125
+ }
126
+ }
127
+
128
+ .well {
129
+ margin: 2rem 0;
130
+ background-color: $wisp;
131
+ box-shadow: inset 0 0 5px $shadow;
132
+ padding: 2rem 2.5rem;
133
+ }
134
+
135
+ .panel {
136
+ position: relative;
137
+ margin: 1.5rem 0;
138
+ border: 1px solid $gray-l2;
139
+ background-color: $white;
140
+ border-top: 4px solid $brand-primary;
141
+
142
+ .panel-heading {
143
+ @extend .copy-lead;
144
+ margin: 1.5rem 2rem .5rem 2rem;
145
+ }
146
+
147
+ .panel-body {
148
+ margin: .5rem 2rem 1.5rem 2rem;
149
+ }
150
+
151
+ .panel-footer {
152
+ font-size: $fs-small;
153
+ border-top: 1px solid $gray-l2;
154
+ background-color: $wisp;
155
+ padding: 1rem 2rem;
156
+ }
157
+
158
+ &.panel-info {
159
+ border-top: 4px solid $brand-primary;
160
+ }
161
+
162
+ &.panel-success {
163
+ border-top: 4px solid $success;
164
+ }
165
+
166
+ &.panel-warning {
167
+ border-top: 4px solid $warning;
168
+ }
169
+
170
+ &.panel-danger {
171
+ border-top: 4px solid $error;
172
+ }
173
+ }
@@ -0,0 +1,112 @@
1
+ // tables
2
+
3
+ .highlight {
4
+ background-color: lighten($warning, 20%);
5
+ }
6
+
7
+ %table-base {
8
+ margin-top: 1rem;
9
+ margin-bottom: 2rem;
10
+
11
+ caption {
12
+ margin-bottom: .5rem;
13
+ font-size: $fs-small;
14
+ text-align: left;
15
+ }
16
+
17
+ tr:hover {
18
+ background-color: $smoke;
19
+ }
20
+
21
+ th {
22
+ font-weight: $fw-bold;
23
+ text-align: left;
24
+ }
25
+
26
+ th,
27
+ td {
28
+ padding: .75rem;
29
+ border: 1px solid $gray-l3;
30
+ }
31
+
32
+ tfoot {
33
+
34
+ tr {
35
+ border-top: 2px solid $gray-l3;
36
+ font-weight: $fw-bold;
37
+ }
38
+ }
39
+
40
+ // can be used on cols, rows, or cells
41
+ .is-highlighted {
42
+ @extend .highlight;
43
+ }
44
+
45
+ // can be used on rows or cells only
46
+ .align-left {
47
+ text-align: left;
48
+ }
49
+
50
+ .align-center {
51
+ text-align: center;
52
+ }
53
+
54
+ .align-right {
55
+ text-align: right;
56
+ }
57
+ }
58
+
59
+ .table {
60
+ @extend %table-base;
61
+ }
62
+
63
+ .table-simplified {
64
+ @extend %table-base;
65
+
66
+ th,
67
+ td {
68
+ border: none;
69
+ border-bottom: 1px solid $gray-l3;
70
+ }
71
+ }
72
+
73
+ // extra cozy
74
+ .table-cozy {
75
+
76
+ th,
77
+ td {
78
+ padding: .5rem;
79
+ }
80
+ }
81
+
82
+ // extra comfortable
83
+ .table-spacious {
84
+
85
+ th,
86
+ td {
87
+ padding: 1.2rem;
88
+ }
89
+ }
90
+
91
+ // wrapping div allows horizontally large tables to scroll on small screens
92
+ .wrapper-table-scrollable {
93
+ width: 100%;
94
+ overflow-y: auto;
95
+ }
96
+
97
+ // responsive table enables `supplemental` columns to hide on small screens
98
+ .table-responsive {
99
+
100
+ th.supplemental,
101
+ td.supplemental {
102
+ display: none;
103
+ }
104
+
105
+ @media(min-width: $bp-screen-md) {
106
+
107
+ th.supplemental,
108
+ td.supplemental {
109
+ display: table-cell;
110
+ }
111
+ }
112
+ }
@@ -0,0 +1,63 @@
1
+ // Base setup
2
+
3
+ * {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ html, body {
8
+ height: 100%;
9
+ font-size: 62.5%;
10
+ }
11
+
12
+ body {
13
+ background-color: $gray;
14
+ color: $white;
15
+ font-size: 16px;
16
+ font-size: 1.6rem;
17
+ line-height: $lh-base;
18
+ font-family: $base-font;
19
+
20
+ }
21
+
22
+ table {
23
+ border-collapse: collapse;
24
+ border-spacing: 0;
25
+ }
26
+
27
+ ol,
28
+ ul {
29
+ padding-left: 2.5rem;
30
+ }
31
+
32
+ li > ul,
33
+ li > ol {
34
+ margin-top: .5rem;
35
+ }
36
+
37
+ dt {
38
+ font-weight: $fw-bold;
39
+ }
40
+
41
+ dd {
42
+ margin-left: 0;
43
+ margin-bottom: 1rem;
44
+ }
45
+
46
+ hr {
47
+ margin: 2rem 0;
48
+ border: none;
49
+ border-top: 1px solid $gray-l1;
50
+ }
51
+
52
+ a {
53
+ @extend %link;
54
+ }
55
+
56
+ // because
57
+ .wrap-outer-header.reasons {
58
+ background: #f23074; /* Old browsers */
59
+ background: -moz-linear-gradient(45deg, #f23074 0%, #d6d628 36%, #207cca 66%, #544b8c 100%); /* FF3.6-15 */
60
+ background: -webkit-linear-gradient(45deg, #f23074 0%,#d6d628 36%,#207cca 66%,#544b8c 100%); /* Chrome10-25,Safari5.1-6 */
61
+ background: linear-gradient(45deg, #f23074 0%,#d6d628 36%,#207cca 66%,#544b8c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
62
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f23074', endColorstr='#544b8c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
63
+ }
@@ -0,0 +1,161 @@
1
+ // mixins and extends for simple stuff that gets reused a lot
2
+
3
+ .sr {
4
+ border: 0 none;
5
+ clip: rect(1px, 1px, 1px, 1px);
6
+ height: 1px;
7
+ margin: -1px;
8
+ overflow: hidden;
9
+ padding: 0;
10
+ position: absolute;
11
+ width: 1px;
12
+ word-wrap: normal;
13
+ }
14
+
15
+ @mixin sr-focusable {
16
+ &:focus {
17
+ position: static;
18
+ display: block;
19
+ height: auto;
20
+ width: auto;
21
+ }
22
+ }
23
+
24
+ // flexbox wrapper
25
+ .wrap-bar {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ }
30
+
31
+ @mixin clearfix {
32
+ &:after {
33
+ content: '';
34
+ display: table;
35
+ clear: both;
36
+ }
37
+ }
38
+
39
+ %unbutton {
40
+ @extend %link;
41
+ -webkit-appearance: none;
42
+ -moz-appearance: none;
43
+ border: 0;
44
+ background-color: transparent;
45
+ cursor: pointer;
46
+ }
47
+
48
+ // remove spacing from first/last children
49
+ %clear-first-child {
50
+ &:first-child {
51
+ margin-top: 0;
52
+ padding-top: 0;
53
+ border-top: none;
54
+ }
55
+ }
56
+
57
+ %clear-last-child {
58
+ &:last-child {
59
+ margin-bottom: 0;
60
+ padding-bottom: 0;
61
+ border-bottom: none;
62
+ }
63
+ }
64
+
65
+ %text-ellipsis {
66
+ overflow: hidden;
67
+ white-space: nowrap;
68
+ text-overflow: ellipsis;
69
+ }
70
+
71
+ // lists
72
+ %reset-list {
73
+ margin: 0;
74
+ padding: 0;
75
+ list-style: none;
76
+ text-indent: 0;
77
+
78
+ li,
79
+ dt,
80
+ dd {
81
+ margin: 0;
82
+ padding: 0;
83
+ }
84
+ }
85
+
86
+ .list-unbulleted {
87
+ list-style: none;
88
+ padding-left: 0;
89
+ text-indent: 0;
90
+ }
91
+
92
+ .list-inline {
93
+ @extend %reset-list;
94
+
95
+ li,
96
+ dt,
97
+ dd {
98
+ display: inline-block;
99
+ }
100
+ }
101
+
102
+ .list-inline-pipe {
103
+ padding-left: 0;
104
+
105
+ li,
106
+ .item {
107
+ display: inline-block;
108
+ padding-right: 1rem;
109
+
110
+ &:after {
111
+ content: ' | ';
112
+ margin-left: 1rem;
113
+ }
114
+
115
+ &:last-child:after {
116
+ content: '';
117
+ }
118
+ }
119
+ }
120
+
121
+ .is-hidden {
122
+ display: none;
123
+ }
124
+
125
+
126
+ %link {
127
+ transition: all .25s ease-in-out 0s;
128
+ color: $brand-primary;
129
+ text-decoration: underline;
130
+
131
+ // STATE: hover, active, focus
132
+ &:hover,
133
+ &:active,
134
+ &:focus {
135
+ color: $brand-primary-accent;
136
+ }
137
+
138
+ // STATE: is disabled
139
+ &:disabled,
140
+ &.is-disabled {
141
+ border: none;
142
+ background-color: $gray-l3;
143
+ color: $gray-d1;
144
+
145
+ &:hover {
146
+ border: none;
147
+ background-color: $gray-l3;
148
+ color: $gray-d1;
149
+ cursor: not-allowed;
150
+ }
151
+ }
152
+
153
+ // STATE: is pressed or active
154
+ &:active,
155
+ &.is-pressed,
156
+ &.is-active {
157
+ color: $brand-secondary;
158
+ }
159
+ }
160
+
161
+