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.
- checksums.yaml +4 -4
- data/readme.md +18 -13
- data/scss/ie8.scss +23 -16
- data/scss/toolkit/_common.scss +126 -7
- data/scss/toolkit/{modules → components}/accordion.scss +3 -25
- data/scss/toolkit/{modules → components}/blackout.scss +0 -7
- data/scss/toolkit/{ui → components}/breadcrumbs.scss +26 -16
- data/scss/toolkit/{ui → components}/button-group.scss +1 -8
- data/scss/toolkit/{ui → components}/button.scss +0 -5
- data/scss/toolkit/components/carousel.scss +147 -0
- data/scss/toolkit/{ui → components}/dropdown.scss +30 -27
- data/scss/toolkit/{modules → components}/flyout.scss +0 -6
- data/scss/toolkit/{layout → components}/grid.scss +1 -1
- data/scss/toolkit/components/icon.scss +60 -0
- data/scss/toolkit/{layout → components}/input-group.scss +3 -1
- data/scss/toolkit/components/input.scss +112 -0
- data/scss/toolkit/components/label.scss +106 -0
- data/scss/toolkit/components/lazy-load.scss +12 -0
- data/scss/toolkit/{ui → components}/matrix.scss +0 -7
- data/scss/toolkit/{modules → components}/modal.scss +44 -44
- data/scss/toolkit/{ui/alert.scss → components/notice.scss} +13 -20
- data/scss/toolkit/{ui → components}/pagination.scss +0 -14
- data/scss/toolkit/{ui → components}/pin.scss +0 -5
- data/scss/toolkit/{modules → components}/popover.scss +4 -16
- data/scss/toolkit/{ui → components}/progress.scss +15 -12
- data/scss/toolkit/{modules → components}/showcase.scss +30 -60
- data/scss/toolkit/{layout → components}/table.scss +0 -0
- data/scss/toolkit/{modules → components}/tabs.scss +0 -16
- data/scss/toolkit/{modules → components}/tooltip.scss +1 -15
- data/scss/toolkit/{modules → components}/type-ahead.scss +1 -4
- data/scss/toolkit/effects/pill.scss +4 -2
- data/scss/toolkit/layout/base.scss +68 -30
- data/scss/toolkit/layout/code.scss +2 -3
- data/scss/toolkit/layout/form.scss +71 -25
- data/scss/toolkit/layout/typography.scss +8 -8
- data/scss/toolkit/mixins/_grid.scss +0 -8
- data/scss/toolkit/mixins/_layout.scss +3 -14
- data/scss/toolkit/mixins/_responsive.scss +0 -14
- data/scss/toolkit/themes/titon.scss +116 -98
- data/scss/toolkit.scss +26 -25
- data/version.md +1 -1
- metadata +30 -32
- data/scss/toolkit/_variables.scss +0 -63
- data/scss/toolkit/mixins/_themes.scss +0 -98
- data/scss/toolkit/modules/carousel.scss +0 -183
- data/scss/toolkit/themes/tomorrow-night.scss +0 -582
- data/scss/toolkit/ui/icon.scss +0 -22
- data/scss/toolkit/ui/label-badge.scss +0 -76
- 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
|
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
|
-
|
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--
|
105
|
-
|
106
|
-
bottom: 100%;
|
108
|
+
.dropdown.dropdown--pull {
|
109
|
+
bottom: 0;
|
107
110
|
}
|
@@ -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
|
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
|
-
|
40
|
-
|
41
|
-
|
42
|
-
right: -35px;
|
24
|
+
&.is-loading {
|
25
|
+
.modal-close { display: none; }
|
26
|
+
.modal-handle { background: $gray; }
|
43
27
|
}
|
28
|
+
}
|
44
29
|
|
45
|
-
|
46
|
-
|
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
|
-
|
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-
|
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-
|
93
|
+
.modal-handle {
|
94
94
|
opacity: 0;
|
95
95
|
@include transition(all $modal-transition);
|
96
96
|
}
|
97
97
|
|
98
|
-
&.show .modal-
|
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-
|
109
|
+
.modal-handle {
|
110
110
|
@include transform(scale(1.3));
|
111
111
|
}
|
112
112
|
|
113
|
-
&.show .modal-
|
113
|
+
&.show .modal-handle {
|
114
114
|
@include transform(scale(1));
|
115
115
|
}
|
116
116
|
}
|
117
117
|
|
118
118
|
&.from-below {
|
119
|
-
.modal-
|
119
|
+
.modal-handle {
|
120
120
|
@include transform(scale(0.7));
|
121
121
|
}
|
122
122
|
|
123
|
-
&.show .modal-
|
123
|
+
&.show .modal-handle {
|
124
124
|
@include transform(scale(1));
|
125
125
|
}
|
126
126
|
}
|
127
127
|
|
128
128
|
&.slide-in-top {
|
129
|
-
.modal-
|
129
|
+
.modal-handle {
|
130
130
|
@include transform(translateY(-50%));
|
131
131
|
}
|
132
132
|
|
133
|
-
&.show .modal-
|
133
|
+
&.show .modal-handle {
|
134
134
|
@include transform(translateY(0));
|
135
135
|
}
|
136
136
|
}
|
137
137
|
|
138
138
|
&.slide-in-bottom {
|
139
|
-
.modal-
|
139
|
+
.modal-handle {
|
140
140
|
@include transform(translateY(50%));
|
141
141
|
}
|
142
142
|
|
143
|
-
&.show .modal-
|
143
|
+
&.show .modal-handle {
|
144
144
|
@include transform(translateY(0));
|
145
145
|
}
|
146
146
|
}
|
147
147
|
|
148
148
|
&.slide-in-left {
|
149
|
-
.modal-
|
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-
|
154
|
+
&.show .modal-handle {
|
155
155
|
@include transform(translateX(0));
|
156
156
|
}
|
157
157
|
}
|
158
158
|
|
159
159
|
&.slide-in-right {
|
160
|
-
.modal-
|
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-
|
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-
|
223
|
+
.modal-handle {
|
224
224
|
@include transform-style(preserve-3d);
|
225
225
|
@include transform(rotateY(-70deg));
|
226
226
|
}
|
227
227
|
|
228
|
-
&.show .modal-
|
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-
|
236
|
+
.modal-handle {
|
237
237
|
@include transform-style(preserve-3d);
|
238
238
|
@include transform(rotateX(-70deg));
|
239
239
|
}
|
240
240
|
|
241
|
-
&.show .modal-
|
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">×</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
|
-
|
37
|
-
|
38
|
-
margin-left: $margin;
|
25
|
+
@include content-spacing;
|
26
|
+
}
|
39
27
|
|
40
|
-
|
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
|
-
|
35
|
+
& ~ p { margin: 0; }
|
36
|
+
&:hover { opacity: 1; }
|
44
37
|
}
|
45
38
|
|
46
|
-
.
|
39
|
+
.notice-title {
|
47
40
|
margin: 0 0 ($margin / 2) 0;
|
48
41
|
}
|