titon-toolkit 0.14.0 → 1.0.0.rc1

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 (49) hide show
  1. checksums.yaml +4 -4
  2. data/readme.md +18 -13
  3. data/scss/ie8.scss +23 -16
  4. data/scss/toolkit/_common.scss +126 -7
  5. data/scss/toolkit/{modules → components}/accordion.scss +3 -25
  6. data/scss/toolkit/{modules → components}/blackout.scss +0 -7
  7. data/scss/toolkit/{ui → components}/breadcrumbs.scss +26 -16
  8. data/scss/toolkit/{ui → components}/button-group.scss +1 -8
  9. data/scss/toolkit/{ui → components}/button.scss +0 -5
  10. data/scss/toolkit/components/carousel.scss +147 -0
  11. data/scss/toolkit/{ui → components}/dropdown.scss +30 -27
  12. data/scss/toolkit/{modules → components}/flyout.scss +0 -6
  13. data/scss/toolkit/{layout → components}/grid.scss +1 -1
  14. data/scss/toolkit/components/icon.scss +60 -0
  15. data/scss/toolkit/{layout → components}/input-group.scss +3 -1
  16. data/scss/toolkit/components/input.scss +112 -0
  17. data/scss/toolkit/components/label.scss +106 -0
  18. data/scss/toolkit/components/lazy-load.scss +12 -0
  19. data/scss/toolkit/{ui → components}/matrix.scss +0 -7
  20. data/scss/toolkit/{modules → components}/modal.scss +44 -44
  21. data/scss/toolkit/{ui/alert.scss → components/notice.scss} +13 -20
  22. data/scss/toolkit/{ui → components}/pagination.scss +0 -14
  23. data/scss/toolkit/{ui → components}/pin.scss +0 -5
  24. data/scss/toolkit/{modules → components}/popover.scss +4 -16
  25. data/scss/toolkit/{ui → components}/progress.scss +15 -12
  26. data/scss/toolkit/{modules → components}/showcase.scss +30 -60
  27. data/scss/toolkit/{layout → components}/table.scss +0 -0
  28. data/scss/toolkit/{modules → components}/tabs.scss +0 -16
  29. data/scss/toolkit/{modules → components}/tooltip.scss +1 -15
  30. data/scss/toolkit/{modules → components}/type-ahead.scss +1 -4
  31. data/scss/toolkit/effects/pill.scss +4 -2
  32. data/scss/toolkit/layout/base.scss +68 -30
  33. data/scss/toolkit/layout/code.scss +2 -3
  34. data/scss/toolkit/layout/form.scss +71 -25
  35. data/scss/toolkit/layout/typography.scss +8 -8
  36. data/scss/toolkit/mixins/_grid.scss +0 -8
  37. data/scss/toolkit/mixins/_layout.scss +3 -14
  38. data/scss/toolkit/mixins/_responsive.scss +0 -14
  39. data/scss/toolkit/themes/titon.scss +116 -98
  40. data/scss/toolkit.scss +26 -25
  41. data/version.md +1 -1
  42. metadata +30 -32
  43. data/scss/toolkit/_variables.scss +0 -63
  44. data/scss/toolkit/mixins/_themes.scss +0 -98
  45. data/scss/toolkit/modules/carousel.scss +0 -183
  46. data/scss/toolkit/themes/tomorrow-night.scss +0 -582
  47. data/scss/toolkit/ui/icon.scss +0 -22
  48. data/scss/toolkit/ui/label-badge.scss +0 -76
  49. data/scss/toolkit/ui/lazy-load.scss +0 -19
@@ -6,18 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $dropdown-transition: $default-transition !default;
10
-
11
- /**
12
- * <ul class="dropdown">
13
- * <li class="heading>Heading</li>
14
- * <li><a href="">Some Action</a></li>
15
- * <li><a href="">Some Action</a></li>
16
- * <li class="divider"></li>
17
- * <li><a href="">Some Action</a></li>
18
- * </ul>
19
- */
20
-
21
9
  .dropdown {
22
10
  display: none;
23
11
  text-align: left;
@@ -25,7 +13,7 @@ $dropdown-transition: $default-transition !default;
25
13
  top: 100%;
26
14
  left: 0;
27
15
  width: 200px;
28
- background: $gray-light;
16
+ background: $gray;
29
17
  border: 1px solid $gray-dark;
30
18
  line-height: 100%;
31
19
  z-index: 500;
@@ -45,7 +33,7 @@ $dropdown-transition: $default-transition !default;
45
33
  li {
46
34
  position: relative;
47
35
 
48
- > a {
36
+ > a {
49
37
  padding: $small-padding;
50
38
  display: block;
51
39
 
@@ -55,11 +43,6 @@ $dropdown-transition: $default-transition !default;
55
43
  }
56
44
  }
57
45
 
58
- &.divider {
59
- margin: ($margin / 2) 0;
60
- border-top: 1px solid $gray-dark;
61
- }
62
-
63
46
  &.has-children {
64
47
  > a .caret-right { display: inline-block; }
65
48
  }
@@ -74,11 +57,6 @@ $dropdown-transition: $default-transition !default;
74
57
  left: 100%;
75
58
  }
76
59
  }
77
-
78
- &.heading {
79
- font-weight: bold;
80
- padding: $small-padding;
81
- }
82
60
  }
83
61
 
84
62
  // Force display
@@ -94,14 +72,39 @@ $dropdown-transition: $default-transition !default;
94
72
  padding: 0;
95
73
  }
96
74
 
75
+ .dropdown-divider {
76
+ margin: ($margin / 2) 0;
77
+ border-top: 1px solid $gray-dark;
78
+ }
79
+
80
+ .dropdown-heading {
81
+ padding: $small-padding;
82
+ background-color: $gray-dark;
83
+ }
84
+
97
85
  //-------------------- Modifiers --------------------//
98
86
 
87
+ .dropdown.dropdown--top {
88
+ top: auto;
89
+ bottom: 100%;
90
+ }
91
+
99
92
  .dropdown.dropdown--right {
93
+ top: auto;
94
+ left: 100%;
95
+ }
96
+
97
+ .dropdown.dropdown--left {
98
+ top: auto;
99
+ left: auto;
100
+ right: 100%;
101
+ }
102
+
103
+ .dropdown.dropdown--push {
100
104
  left: auto;
101
105
  right: 0;
102
106
  }
103
107
 
104
- .dropdown.dropdown--top {
105
- top: auto;
106
- bottom: 100%;
108
+ .dropdown.dropdown--pull {
109
+ bottom: 0;
107
110
  }
@@ -6,12 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $flyout-transition: $default-transition !default;
10
-
11
- /**
12
- * Should be used in conjunction with the JavaScript Titon.Flyout module.
13
- */
14
-
15
9
  .flyout {
16
10
  position: absolute;
17
11
  top: 0;
@@ -4,7 +4,7 @@
4
4
  * @link http://titon.io
5
5
  */
6
6
 
7
- @import "../common";
7
+ @import "../_common";
8
8
 
9
9
  .grid,
10
10
  .row {
@@ -0,0 +1,60 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ [class*="icon-"] {
10
+ @include reset-inline-block;
11
+ @include disabled-state { opacity: $disabled-opacity; }
12
+ }
13
+
14
+ [class*="icon-12"] { width: 12px; height: 12px; }
15
+ [class*="icon-16"] { width: 16px; height: 16px; }
16
+ [class*="icon-24"] { width: 24px; height: 24px; }
17
+ [class*="icon-32"] { width: 32px; height: 32px; }
18
+ [class*="icon-64"] { width: 64px; height: 64px; }
19
+
20
+ .button {
21
+ [class*="icon-"] { margin-top: -1px; }
22
+ }
23
+
24
+ //-------------------- Modifiers --------------------//
25
+
26
+ .icon--90deg { @include transform(rotate(90deg)); }
27
+ .icon--180deg { @include transform(rotate(180deg)); }
28
+ .icon--270deg { @include transform(rotate(270deg)); }
29
+ .icon--flip { @include transform(rotateY(180deg)); }
30
+ .icon--flip-vert { @include transform(rotateX(180deg)); }
31
+
32
+ @-webkit-keyframes rotate {
33
+ from { -webkit-transform: rotate(0deg); }
34
+ to { -webkit-transform: rotate(360deg); }
35
+ }
36
+
37
+ @-moz-keyframes rotate {
38
+ from { -moz-transform: rotate(0deg); }
39
+ to { -moz-transform: rotate(360deg); }
40
+ }
41
+
42
+ @keyframes rotate {
43
+ from { transform: rotate(0deg); }
44
+ to { transform: rotate(360deg); }
45
+ }
46
+
47
+ .icon--rotate {
48
+ -webkit-animation-name: rotate;
49
+ -webkit-animation-duration: $icon-animation;
50
+ -webkit-animation-iteration-count: infinite;
51
+ -webkit-animation-timing-function: linear;
52
+ -moz-animation-name: rotate;
53
+ -moz-animation-duration: $icon-animation;
54
+ -moz-animation-iteration-count: infinite;
55
+ -moz-animation-timing-function: linear;
56
+ animation-name: rotate;
57
+ animation-duration: $icon-animation;
58
+ animation-iteration-count: infinite;
59
+ animation-timing-function: linear;
60
+ }
@@ -8,6 +8,7 @@
8
8
 
9
9
  .input-group {
10
10
  display: inline-block;
11
+ white-space: nowrap;
11
12
 
12
13
  > .input,
13
14
  > .input-addon,
@@ -23,7 +24,8 @@
23
24
  vertical-align: middle;
24
25
 
25
26
  &:last-child { margin-right: 0; }
26
- &:hover, &:focus { z-index: 1; }
27
+ &:hover { z-index: 1; }
28
+ &:focus { z-index: 2; }
27
29
  }
28
30
 
29
31
  @include clear-fix;
@@ -0,0 +1,112 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ .custom-input {
10
+ @include reset-inline-block;
11
+ }
12
+
13
+ // Checkbox, radio
14
+ .custom-input {
15
+ .checkbox,
16
+ .radio {
17
+ @include reset-inline-block;
18
+ background: $gray-lightest;
19
+ border: 1px solid $gray-dark;
20
+ width: 16px;
21
+ height: 16px;
22
+ top: -3px;
23
+ line-height: 1rem;
24
+ border-radius: $round;
25
+ @include transition(all $default-transition);
26
+
27
+ &:hover { border-color: $gray-darkest; }
28
+ }
29
+
30
+ .radio { border-radius: 50%; }
31
+
32
+ input {
33
+ display: none;
34
+
35
+ // Style when the associated label is being hovered
36
+ &:hover + .checkbox,
37
+ &:hover + .radio {
38
+ border-color: $gray-darkest;
39
+ }
40
+
41
+ // Style when the checkbox is checked
42
+ &:checked + .checkbox,
43
+ &:checked + .radio {
44
+ border-color: $info;
45
+ box-shadow: 0 0 5px $info-light;
46
+ }
47
+
48
+ // Style when input is disabled
49
+ &[disabled] + .checkbox,
50
+ &[disabled] + .radio {
51
+ cursor: not-allowed;
52
+ border-color: $gray;
53
+ }
54
+ }
55
+ }
56
+
57
+ // Select
58
+ .custom-input {
59
+ .select {
60
+ @include reset-inline-block;
61
+ cursor: pointer;
62
+ background: $gray-lightest;
63
+ border: 1px solid $gray-dark;
64
+ border-radius: $round;
65
+ white-space: nowrap;
66
+ line-height: 1rem;
67
+ @include transition(all $default-transition);
68
+ }
69
+
70
+ .select-label,
71
+ .select-arrow {
72
+ display: inline-block;
73
+ vertical-align: middle;
74
+ line-height: normal;
75
+ font-size: $medium-size;
76
+ padding: $medium-padding;
77
+ }
78
+
79
+ .select-arrow {
80
+ float: right;
81
+
82
+ .caret-down { border-top-color: #000; }
83
+ }
84
+
85
+ // Position the real select over the custom one
86
+ select {
87
+ position: absolute;
88
+ top: 0;
89
+ left: 0;
90
+ z-index: 1;
91
+ opacity: 0;
92
+ width: 100%;
93
+
94
+ // Style when the select is hovered
95
+ &:hover + .select {
96
+ border-color: $gray-darkest;
97
+ }
98
+
99
+ // Style when the select is focused
100
+ &:focus + .select {
101
+ border-color: $info;
102
+ box-shadow: 0 0 5px $info-light;
103
+ }
104
+
105
+ // Style when select is disabled
106
+ &[disabled] + .select {
107
+ cursor: not-allowed;
108
+ color: $gray-darkest;
109
+ border-color: $gray;
110
+ }
111
+ }
112
+ }
@@ -0,0 +1,106 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ .label {
10
+ @include reset-inline-block;
11
+ font-size: .7rem;
12
+ line-height: 100%;
13
+ background: $gray-dark;
14
+ padding: .275rem .425rem;
15
+ text-transform: uppercase;
16
+ border-radius: 2px;
17
+ white-space: nowrap;
18
+ top: -1px;
19
+ letter-spacing: 1px;
20
+
21
+ &.small {
22
+ font-size: .6rem;
23
+ padding: .2rem .35rem;
24
+ }
25
+
26
+ &.large {
27
+ font-size: .8rem;
28
+ padding: .35rem .5rem;
29
+ }
30
+
31
+ &:empty { display: none; }
32
+ &:after {
33
+ content: "";
34
+ height: 0;
35
+ width: 0;
36
+ position: absolute;
37
+ }
38
+ }
39
+
40
+ //-------------------- Modifiers --------------------//
41
+
42
+ .label.label--badge {
43
+ border-radius: 1rem;
44
+ }
45
+
46
+ .label.label--arrow-left {
47
+ border-top-left-radius: 1px;
48
+ border-bottom-left-radius: 1px;
49
+ padding-left: 2px;
50
+ margin-left: 10px;
51
+
52
+ &:after {
53
+ top: 0;
54
+ right: 100%;
55
+ border: .65rem solid transparent;
56
+ border-right-color: $gray-dark;
57
+ }
58
+
59
+ &.small:after { border-width: .5rem; }
60
+ &.large:after { border-width: .75rem; }
61
+ }
62
+
63
+ .label.label--arrow-right {
64
+ border-top-right-radius: 1px;
65
+ border-bottom-right-radius: 1px;
66
+ padding-right: 2px;
67
+ margin-right: 10px;
68
+
69
+ &:after {
70
+ top: 0;
71
+ left: 100%;
72
+ border: .65rem solid transparent;
73
+ border-left-color: $gray-dark;
74
+ }
75
+
76
+ &.small:after { border-width: .5rem; }
77
+ &.large:after { border-width: .75rem; }
78
+ }
79
+
80
+ .label.label--ribbon-left {
81
+ border-top-left-radius: 0;
82
+ border-bottom-left-radius: 0;
83
+
84
+ &:after {
85
+ top: 100%;
86
+ left: 0;
87
+ border: 1em solid transparent;
88
+ border-top-width: 0 !important;
89
+ border-left-width: 0 !important;
90
+ border-right-color: $gray-darkest;
91
+ }
92
+ }
93
+
94
+ .label.label--ribbon-right {
95
+ border-top-right-radius: 0;
96
+ border-bottom-right-radius: 0;
97
+
98
+ &:after {
99
+ top: 100%;
100
+ right: 0;
101
+ border: 1em solid transparent;
102
+ border-top-width: 0 !important;
103
+ border-right-width: 0 !important;
104
+ border-left-color: $gray-darkest;
105
+ }
106
+ }
@@ -0,0 +1,12 @@
1
+ /**
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
+ */
6
+
7
+ @import "../common";
8
+
9
+ .lazy-load {
10
+ background-image: none !important;
11
+ @include transition(background $lazyLoad-transition);
12
+ }
@@ -6,12 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $matrix-transition: $default-transition !default;
10
-
11
- /**
12
- * Should be used in conjunction with the JavaScript Titon.Matrix component.
13
- */
14
-
15
9
  .matrix {
16
10
  position: relative;
17
11
  list-style: none;
@@ -28,7 +22,6 @@ $matrix-transition: $default-transition !default;
28
22
  .matrix-item {
29
23
  margin: 0;
30
24
  padding: 0;
31
- position: absolute;
32
25
  @include transition(top $matrix-transition, left $matrix-transition, bottom $matrix-transition, right $matrix-transition, opacity $matrix-transition);
33
26
 
34
27
  img {
@@ -6,21 +6,6 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- $modal-transition: $default-transition !default;
10
-
11
- /**
12
- * Should be used in conjunction with the JavaScript Titon.Modal module.
13
- *
14
- * <div class="modal">
15
- * <div class="modal-outer">
16
- * <div class="modal-inner">
17
- * Custom content here
18
- * </div>
19
- * <button type="button" class="modal-close"></button>
20
- * </div>
21
- * </div>
22
- */
23
-
24
9
  .modal {
25
10
  position: fixed;
26
11
  top: 50%;
@@ -36,23 +21,25 @@ $modal-transition: $default-transition !default;
36
21
  backface-visibility: hidden;
37
22
  @include transform(translateX(-50%) translateY(-50%));
38
23
 
39
- .close {
40
- position: absolute;
41
- top: -1px;
42
- right: -35px;
24
+ &.is-loading {
25
+ .modal-close { display: none; }
26
+ .modal-handle { background: $gray; }
43
27
  }
28
+ }
44
29
 
45
- &.is-loading {
46
- .close { display: none; }
30
+ .modal-close {
31
+ position: absolute;
32
+ top: $padding;
33
+ right: $padding;
34
+ line-height: 1rem;
35
+ opacity: $default-opacity;
36
+ padding: 5px;
47
37
 
48
- .modal-outer {
49
- background: $gray;
50
- }
51
- }
38
+ &:hover { opacity: 1; }
52
39
  }
53
40
 
54
41
  // Used for animations, should also contain the styles
55
- .modal-outer {
42
+ .modal-handle {
56
43
  position: relative;
57
44
  margin: 0 auto;
58
45
  background: $gray;
@@ -79,6 +66,19 @@ $modal-transition: $default-transition !default;
79
66
  @include content-spacing;
80
67
  }
81
68
 
69
+ //-------------------- Modifiers --------------------//
70
+
71
+ .modal.modal--fullscreen {
72
+ width: 100%;
73
+ top: 0;
74
+ left: 0;
75
+ margin: 0;
76
+ max-width: 100%;
77
+ max-height: auto;
78
+ border-radius: 0;
79
+ @include transform(translateX(0) translateY(0));
80
+ }
81
+
82
82
  //-------------------- Animations --------------------//
83
83
 
84
84
  .modal {
@@ -90,12 +90,12 @@ $modal-transition: $default-transition !default;
90
90
  &.slide-in-right,
91
91
  &.flip,
92
92
  &.flip-vert {
93
- .modal-outer {
93
+ .modal-handle {
94
94
  opacity: 0;
95
95
  @include transition(all $modal-transition);
96
96
  }
97
97
 
98
- &.show .modal-outer {
98
+ &.show .modal-handle {
99
99
  opacity: 1;
100
100
  }
101
101
  }
@@ -106,63 +106,63 @@ $modal-transition: $default-transition !default;
106
106
  }
107
107
 
108
108
  &.from-above {
109
- .modal-outer {
109
+ .modal-handle {
110
110
  @include transform(scale(1.3));
111
111
  }
112
112
 
113
- &.show .modal-outer {
113
+ &.show .modal-handle {
114
114
  @include transform(scale(1));
115
115
  }
116
116
  }
117
117
 
118
118
  &.from-below {
119
- .modal-outer {
119
+ .modal-handle {
120
120
  @include transform(scale(0.7));
121
121
  }
122
122
 
123
- &.show .modal-outer {
123
+ &.show .modal-handle {
124
124
  @include transform(scale(1));
125
125
  }
126
126
  }
127
127
 
128
128
  &.slide-in-top {
129
- .modal-outer {
129
+ .modal-handle {
130
130
  @include transform(translateY(-50%));
131
131
  }
132
132
 
133
- &.show .modal-outer {
133
+ &.show .modal-handle {
134
134
  @include transform(translateY(0));
135
135
  }
136
136
  }
137
137
 
138
138
  &.slide-in-bottom {
139
- .modal-outer {
139
+ .modal-handle {
140
140
  @include transform(translateY(50%));
141
141
  }
142
142
 
143
- &.show .modal-outer {
143
+ &.show .modal-handle {
144
144
  @include transform(translateY(0));
145
145
  }
146
146
  }
147
147
 
148
148
  &.slide-in-left {
149
- .modal-outer {
149
+ .modal-handle {
150
150
  @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
151
151
  @include transform(translateX(-50%));
152
152
  }
153
153
 
154
- &.show .modal-outer {
154
+ &.show .modal-handle {
155
155
  @include transform(translateX(0));
156
156
  }
157
157
  }
158
158
 
159
159
  &.slide-in-right {
160
- .modal-outer {
160
+ .modal-handle {
161
161
  @include transition(all $modal-transition cubic-bezier(0.25, 0.5, 0.5, 0.9));
162
162
  @include transform(translateX(50%));
163
163
  }
164
164
 
165
- &.show .modal-outer {
165
+ &.show .modal-handle {
166
166
  @include transform(translateX(0));
167
167
  }
168
168
  }
@@ -220,12 +220,12 @@ $modal-transition: $default-transition !default;
220
220
  &.flip {
221
221
  @include perspective(1300px);
222
222
 
223
- .modal-outer {
223
+ .modal-handle {
224
224
  @include transform-style(preserve-3d);
225
225
  @include transform(rotateY(-70deg));
226
226
  }
227
227
 
228
- &.show .modal-outer {
228
+ &.show .modal-handle {
229
229
  @include transform(rotateY(0deg));
230
230
  }
231
231
  }
@@ -233,12 +233,12 @@ $modal-transition: $default-transition !default;
233
233
  &.flip-vert {
234
234
  @include perspective(1300px);
235
235
 
236
- .modal-outer {
236
+ .modal-handle {
237
237
  @include transform-style(preserve-3d);
238
238
  @include transform(rotateX(-70deg));
239
239
  }
240
240
 
241
- &.show .modal-outer {
241
+ &.show .modal-handle {
242
242
  @include transform(rotateX(0deg));
243
243
  }
244
244
  }
@@ -6,21 +6,10 @@
6
6
 
7
7
  @import "../common";
8
8
 
9
- /**
10
- * <div class="alert is-info">
11
- * <button type="button" class="close">
12
- * <span class="x">&times;</span>
13
- * </button>
14
- *
15
- * <h3 class="alert-title">Title</h3>
16
- * <p>This is an information message!</p>
17
- * </div>
18
- */
19
-
20
- .alert {
9
+ .notice {
21
10
  margin: $margin 0;
22
11
  padding: $padding;
23
- background: $gray;
12
+ background: $gray-light;
24
13
  border: 1px solid $gray-dark;
25
14
  text-align: left;
26
15
 
@@ -33,16 +22,20 @@
33
22
  font-weight: bold;
34
23
  }
35
24
 
36
- .close {
37
- float: right;
38
- margin-left: $margin;
25
+ @include content-spacing;
26
+ }
39
27
 
40
- & ~ p { margin: 0; }
41
- }
28
+ .notice-close {
29
+ float: right;
30
+ margin-left: $margin;
31
+ line-height: 1rem;
32
+ opacity: $default-opacity;
33
+ padding: 5px;
42
34
 
43
- @include content-spacing;
35
+ & ~ p { margin: 0; }
36
+ &:hover { opacity: 1; }
44
37
  }
45
38
 
46
- .alert-title {
39
+ .notice-title {
47
40
  margin: 0 0 ($margin / 2) 0;
48
41
  }