pusher_chameleon 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.ruby-version +1 -0
- data/Gemfile +3 -0
- data/Gemfile.lock +23 -0
- data/README.md +8 -0
- data/docs/.gitignore +4 -0
- data/docs/Gemfile +10 -0
- data/docs/Gemfile.lock +72 -0
- data/docs/README.md +15 -0
- data/docs/Rakefile +40 -0
- data/docs/_config.production.yml +18 -0
- data/docs/_config.yml +40 -0
- data/docs/_includes/footer.html +38 -0
- data/docs/_includes/head.html +15 -0
- data/docs/_includes/header.html +27 -0
- data/docs/_includes/icon-github.html +1 -0
- data/docs/_includes/icon-github.svg +3 -0
- data/docs/_includes/logo-pusher.svg +4 -0
- data/docs/_includes/sidebar.html +33 -0
- data/docs/_layouts/default.html +53 -0
- data/docs/_layouts/page.html +14 -0
- data/docs/_layouts/post.html +15 -0
- data/docs/_plugins/chameleon_version.rb +11 -0
- data/docs/_plugins/copy_images_directory.rb +22 -0
- data/docs/_plugins/ext.rb +2 -0
- data/docs/_posts/2016-03-16-getting-started.md +28 -0
- data/docs/_posts/2016-03-16-introduction.md +24 -0
- data/docs/_posts/2016-03-17-buttons.md +61 -0
- data/docs/_posts/2016-03-17-colors.md +139 -0
- data/docs/_posts/2016-03-17-flex.md +24 -0
- data/docs/_posts/2016-03-17-forms.md +66 -0
- data/docs/_posts/2016-03-17-visibility.md +28 -0
- data/docs/_posts/2016-04-04-typography.md +111 -0
- data/docs/_posts/2016-04-05-syntax-highlighting.md +28 -0
- data/docs/_posts/2016-05-08-alerts.md +50 -0
- data/docs/_posts/2016-05-12-labels.md +22 -0
- data/docs/_posts/2016-05-13-tooltips.md +33 -0
- data/docs/_sass/_base.scss +36 -0
- data/docs/_sass/_chameleon_imports.scss +20 -0
- data/docs/_sass/_layout.scss +136 -0
- data/docs/_sass/_typography.scss +41 -0
- data/docs/_sass/layout/_aside.scss +151 -0
- data/docs/about.md +15 -0
- data/docs/autoprefixer.yml +4 -0
- data/docs/css/main.scss +11 -0
- data/docs/feed.xml +30 -0
- data/docs/fonts/Realtime-Text/realtime_text_black.eot +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_black.svg +249 -0
- data/docs/fonts/Realtime-Text/realtime_text_black.ttf +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_black.woff +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_black.woff2 +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_bold.eot +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_bold.svg +249 -0
- data/docs/fonts/Realtime-Text/realtime_text_bold.ttf +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_bold.woff +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_bold.woff2 +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_light.eot +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_light.svg +249 -0
- data/docs/fonts/Realtime-Text/realtime_text_light.ttf +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_light.woff +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_light.woff2 +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_regular.eot +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_regular.svg +249 -0
- data/docs/fonts/Realtime-Text/realtime_text_regular.ttf +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_regular.woff +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_regular.woff2 +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_semibold.eot +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_semibold.svg +249 -0
- data/docs/fonts/Realtime-Text/realtime_text_semibold.ttf +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_semibold.woff +0 -0
- data/docs/fonts/Realtime-Text/realtime_text_semibold.woff2 +0 -0
- data/docs/index.html +23 -0
- data/images/ui_icons/alert_beta.svg +3 -0
- data/images/ui_icons/alert_info.svg +3 -0
- data/images/ui_icons/alert_tick.svg +6 -0
- data/images/ui_icons/alert_warning.svg +6 -0
- data/images/ui_icons/chevron_down.svg +3 -0
- data/images/ui_icons/github--active.svg +6 -0
- data/images/ui_icons/github.svg +6 -0
- data/images/ui_icons/google--active.svg +6 -0
- data/images/ui_icons/google.svg +10 -0
- data/images/ui_icons/plus.svg +3 -0
- data/javascripts/chameleon/code_box.js +14 -0
- data/javascripts/chameleon/pusher_featurette.js +52 -0
- data/javascripts/chameleon/pusher_text_cycler.js +60 -0
- data/lib/pusher_chameleon/engine.rb +13 -0
- data/lib/pusher_chameleon/version.rb +8 -0
- data/lib/pusher_chameleon.rb +71 -0
- data/package.json +24 -0
- data/pusher_chameleon.gemspec +21 -0
- data/stylesheets/.gitkeep +0 -0
- data/stylesheets/_base.scss +400 -0
- data/stylesheets/_global.scss +96 -0
- data/stylesheets/chameleon.scss +30 -0
- data/stylesheets/components/_alert.scss +102 -0
- data/stylesheets/components/_code_box.scss +84 -0
- data/stylesheets/components/_flex_aligners.scss +38 -0
- data/stylesheets/components/_label.scss +41 -0
- data/stylesheets/components/_signpost.scss +150 -0
- data/stylesheets/components/_spacers.scss +11 -0
- data/stylesheets/components/_statistic.scss +62 -0
- data/stylesheets/components/_tooltip.scss +65 -0
- data/stylesheets/components/_visibility.scss +117 -0
- data/stylesheets/forms/_base.scss +47 -0
- data/stylesheets/forms/_buttons.scss +242 -0
- data/stylesheets/forms/_checkbox.scss +31 -0
- data/stylesheets/forms/_field.scss +11 -0
- data/stylesheets/forms/_fieldset.scss +18 -0
- data/stylesheets/forms/_forms.scss +21 -0
- data/stylesheets/forms/_input.scss +14 -0
- data/stylesheets/forms/_range.scss +110 -0
- data/stylesheets/forms/_select.scss +15 -0
- data/stylesheets/forms/_textarea.scss +11 -0
- data/stylesheets/grid/_classes.scss +152 -0
- data/stylesheets/grid/_column.scss +126 -0
- data/stylesheets/grid/_flex-grid.scss +268 -0
- data/stylesheets/grid/_grid.scss +60 -0
- data/stylesheets/grid/_gutter.scss +34 -0
- data/stylesheets/grid/_layout.scss +51 -0
- data/stylesheets/grid/_position.scss +73 -0
- data/stylesheets/grid/_row.scss +95 -0
- data/stylesheets/grid/_size.scss +24 -0
- data/stylesheets/typography/_base.scss +60 -0
- data/stylesheets/typography/_helpers.scss +66 -0
- data/stylesheets/typography/_import.scss +54 -0
- data/stylesheets/typography/_syntax_highlighting.scss +168 -0
- data/stylesheets/typography/_syntax_highlighting_dark.scss +73 -0
- data/stylesheets/typography/_syntax_highlighting_light.scss +73 -0
- data/stylesheets/typography/_titles.scss +69 -0
- data/stylesheets/typography/_typography.scss +12 -0
- data/stylesheets/util/_breakpoint.scss +273 -0
- data/stylesheets/util/_color.scss +42 -0
- data/stylesheets/util/_flex.scss +68 -0
- data/stylesheets/util/_mixins.scss +233 -0
- data/stylesheets/util/_selector.scss +40 -0
- data/stylesheets/util/_unit.scss +90 -0
- data/stylesheets/util/_url_helper.scss +30 -0
- data/stylesheets/util/_util.scss +13 -0
- data/stylesheets/util/_value.scss +107 -0
- metadata +224 -0
@@ -0,0 +1,102 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Alerts
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-alert {
|
6
|
+
.alert {
|
7
|
+
background-color: #fff;
|
8
|
+
border-radius: $border-radius;
|
9
|
+
border-style: solid;
|
10
|
+
border-width: 1px;
|
11
|
+
display: block;
|
12
|
+
margin: rem-calc(10px) 0;
|
13
|
+
max-width: 100%;
|
14
|
+
padding: 12px 30px 12px 60px;
|
15
|
+
text-align: left;
|
16
|
+
width: auto;
|
17
|
+
line-height: 1.4em;
|
18
|
+
position: relative;
|
19
|
+
|
20
|
+
&:before {
|
21
|
+
background-repeat: no-repeat;
|
22
|
+
content: "";
|
23
|
+
height: 18px;
|
24
|
+
left: 12px;
|
25
|
+
position: absolute;
|
26
|
+
top: 50%;
|
27
|
+
transform: translateY(-50%);
|
28
|
+
width: 18px;
|
29
|
+
}
|
30
|
+
|
31
|
+
&__title {
|
32
|
+
font-size: rem-calc(14px);
|
33
|
+
display: block;
|
34
|
+
color: inherit;
|
35
|
+
}
|
36
|
+
|
37
|
+
&__copy {
|
38
|
+
font-size: rem-calc(14px);
|
39
|
+
color: inherit;
|
40
|
+
|
41
|
+
ul {
|
42
|
+
margin-left: 16px;
|
43
|
+
|
44
|
+
li {
|
45
|
+
font-size: rem-calc(14px) !important;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
}
|
50
|
+
|
51
|
+
&__icon,
|
52
|
+
&__icon svg {
|
53
|
+
display: inline;
|
54
|
+
vertical-align: bottom;
|
55
|
+
}
|
56
|
+
|
57
|
+
&__icon {
|
58
|
+
margin-right: 1em;
|
59
|
+
}
|
60
|
+
|
61
|
+
&--danger,
|
62
|
+
&--error {
|
63
|
+
border-color: lighten($color-danger, 40%);
|
64
|
+
color: $color-danger;
|
65
|
+
box-shadow: inset 40px 0 0 0 $color-danger;
|
66
|
+
|
67
|
+
&:before {
|
68
|
+
background-image: file-url('ui_icons/alert_warning.svg');
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
&--success {
|
73
|
+
color: darken($color-success, 5%);
|
74
|
+
border-color: lighten($color-success, 40%);
|
75
|
+
box-shadow: inset 40px 0 0 0 $color-success;
|
76
|
+
|
77
|
+
&:before {
|
78
|
+
background-image: file-url('ui_icons/alert_tick.svg');
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
&--beta {
|
83
|
+
color: darken($color-beta, 5%);
|
84
|
+
border-color: lighten($color-beta, 20%);
|
85
|
+
box-shadow: inset 40px 0 0 0 $color-beta;
|
86
|
+
|
87
|
+
&:before {
|
88
|
+
background-image: file-url('ui_icons/alert_beta.svg');
|
89
|
+
}
|
90
|
+
}
|
91
|
+
|
92
|
+
&--information {
|
93
|
+
border-color: $color-smoke;
|
94
|
+
color: $color-information;
|
95
|
+
box-shadow: inset 40px 0 0 0 $color-information;
|
96
|
+
|
97
|
+
&:before {
|
98
|
+
background-image: file-url('ui_icons/alert_info.svg');
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
@@ -0,0 +1,84 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Code Box
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-code-box {
|
6
|
+
$_code-box-nav-bg: #3b4a59;
|
7
|
+
|
8
|
+
.c-code {
|
9
|
+
width: 100%;
|
10
|
+
position: relative;
|
11
|
+
margin-bottom: 20px;
|
12
|
+
overflow: hidden;
|
13
|
+
|
14
|
+
@media #{$medium-up} {
|
15
|
+
margin-bottom: 0;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
.c-code__nav {
|
20
|
+
width: 100%;
|
21
|
+
height: 30px;
|
22
|
+
background-color: darken($_code-box-nav-bg, 5%);
|
23
|
+
overflow-x: auto;
|
24
|
+
overflow-y: hidden;
|
25
|
+
|
26
|
+
@media #{$medium-up} {
|
27
|
+
height: 30px;
|
28
|
+
}
|
29
|
+
|
30
|
+
&::-webkit-scrollbar {
|
31
|
+
display: none;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
.c-code__nav__list {
|
36
|
+
display: flex;
|
37
|
+
list-style: none;
|
38
|
+
width: 100%;
|
39
|
+
margin: 0;
|
40
|
+
padding: 0;
|
41
|
+
|
42
|
+
li {
|
43
|
+
@extend %font-family-secondary;
|
44
|
+
color: #fff;
|
45
|
+
font-size: rem-calc(12px);
|
46
|
+
font-weight: 500;
|
47
|
+
text-align: center;
|
48
|
+
text-shadow: 0 0 1px rgba(0, 0, 0, .05);
|
49
|
+
width: auto;
|
50
|
+
float: left;
|
51
|
+
height: 30px;
|
52
|
+
padding: 8px 10px;
|
53
|
+
border-left: 1px solid lighten($_code-box-nav-bg, 5%);
|
54
|
+
cursor: pointer;
|
55
|
+
|
56
|
+
&:hover {
|
57
|
+
background-color: darken($_code-box-nav-bg, 5%);
|
58
|
+
}
|
59
|
+
|
60
|
+
&.current {
|
61
|
+
background-color: darken($_code-box-nav-bg, 10%);
|
62
|
+
border-top: 2px solid $color-developer;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
&__title {
|
67
|
+
background-color: darken($_code-box-nav-bg, 5%);
|
68
|
+
cursor: normal;
|
69
|
+
}
|
70
|
+
}
|
71
|
+
|
72
|
+
.c-code__content {
|
73
|
+
background: $_code-box-nav-bg;
|
74
|
+
|
75
|
+
&__container {
|
76
|
+
display: none;
|
77
|
+
font-size: 15px;
|
78
|
+
|
79
|
+
&.current {
|
80
|
+
display: block;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@mixin CHAMELEON-flex-aligners {
|
2
|
+
// // Horizontal alignment using justify-content
|
3
|
+
// @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
|
4
|
+
// .align-#{$hdir} {
|
5
|
+
// @include flex-align($x: $hdir);
|
6
|
+
// }
|
7
|
+
// }
|
8
|
+
|
9
|
+
// // Vertical alignment using align-items and align-self
|
10
|
+
// @each $vdir, $prop in $-zf-flex-align {
|
11
|
+
// .align-#{$vdir} {
|
12
|
+
// @include flex-align($y: $vdir);
|
13
|
+
// }
|
14
|
+
|
15
|
+
// .align-self-#{$vdir} {
|
16
|
+
// @include flex-align-self($y: $vdir);
|
17
|
+
// }
|
18
|
+
// }
|
19
|
+
|
20
|
+
// // Source ordering
|
21
|
+
// @include -zf-each-breakpoint {
|
22
|
+
// @for $i from 1 through 6 {
|
23
|
+
// .#{$-zf-size} {
|
24
|
+
// @include flex-order($i);
|
25
|
+
// }
|
26
|
+
// }
|
27
|
+
// }
|
28
|
+
|
29
|
+
.u-vertical-align {
|
30
|
+
display: flex;
|
31
|
+
align-items: center;
|
32
|
+
}
|
33
|
+
|
34
|
+
.u-horizontal-align {
|
35
|
+
display: flex;
|
36
|
+
justify-content: center;
|
37
|
+
}
|
38
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Labels
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-labels {
|
6
|
+
.label {
|
7
|
+
@extend %font-family-primary;
|
8
|
+
border-radius: 0;
|
9
|
+
color: #fff;
|
10
|
+
display: inline-block;
|
11
|
+
font-size: rem-calc(11px);
|
12
|
+
font-weight: 700;
|
13
|
+
height: 21px;
|
14
|
+
letter-spacing: 0;
|
15
|
+
line-height: 1.1em;
|
16
|
+
padding: 4px 14px;
|
17
|
+
text-align: center;
|
18
|
+
text-transform: uppercase;
|
19
|
+
width: auto;
|
20
|
+
|
21
|
+
&--success {
|
22
|
+
background-color: $color-success;
|
23
|
+
}
|
24
|
+
|
25
|
+
&--warning {
|
26
|
+
background-color: $color-warning;
|
27
|
+
}
|
28
|
+
|
29
|
+
&--danger {
|
30
|
+
background-color: $color-danger;
|
31
|
+
}
|
32
|
+
|
33
|
+
&--information {
|
34
|
+
background-color: $color-information;
|
35
|
+
}
|
36
|
+
|
37
|
+
&--beta {
|
38
|
+
background-color: $color-beta;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
@@ -0,0 +1,150 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Signpost
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-signpost {
|
6
|
+
.signpost {
|
7
|
+
position: relative;
|
8
|
+
width: 100%;
|
9
|
+
}
|
10
|
+
|
11
|
+
.signpost__left,
|
12
|
+
.signpost__right {
|
13
|
+
position: relative;
|
14
|
+
display: flex;
|
15
|
+
align-items: center;
|
16
|
+
padding: 40px 20px;
|
17
|
+
|
18
|
+
> div {
|
19
|
+
flex: 1;
|
20
|
+
width: 0;
|
21
|
+
}
|
22
|
+
|
23
|
+
@media #{$large-up} {
|
24
|
+
height: 400px;
|
25
|
+
}
|
26
|
+
|
27
|
+
}
|
28
|
+
|
29
|
+
.signpost--no-flex {
|
30
|
+
.c-signpost__left,
|
31
|
+
.c-signpost__right {
|
32
|
+
display: block;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
.signpost__left:before,
|
37
|
+
.signpost__right:after {
|
38
|
+
position: absolute;
|
39
|
+
top: 0;
|
40
|
+
width: 70px;
|
41
|
+
height: 100%;
|
42
|
+
content: "";
|
43
|
+
display: none;
|
44
|
+
|
45
|
+
@media #{$large-up} {
|
46
|
+
display: block;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
.signpost__left {
|
51
|
+
z-index: 4;
|
52
|
+
|
53
|
+
@media #{$large-up} {
|
54
|
+
transform: translate3d(15px, -10px, 0);
|
55
|
+
padding: 50px 70px 50px 0;
|
56
|
+
margin-left: initial;
|
57
|
+
}
|
58
|
+
|
59
|
+
&:before {
|
60
|
+
transform: translateX(-70px);
|
61
|
+
background: inherit;
|
62
|
+
left: 0;
|
63
|
+
}
|
64
|
+
|
65
|
+
&:after {
|
66
|
+
display: none;
|
67
|
+
width: 0;
|
68
|
+
height: 0;
|
69
|
+
border-style: solid;
|
70
|
+
border-width: 20px 30px 0 0;
|
71
|
+
content: "";
|
72
|
+
bottom: -20px;
|
73
|
+
right: 0;
|
74
|
+
position: absolute;
|
75
|
+
|
76
|
+
@media #{$large-up} {
|
77
|
+
display: inline;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
.signpost__right {
|
83
|
+
z-index: 3;
|
84
|
+
|
85
|
+
@media #{$large-up} {
|
86
|
+
transform: translate3d(-15px, 10px, 0);
|
87
|
+
padding: 50px 200px 50px 90px !important;
|
88
|
+
}
|
89
|
+
|
90
|
+
|
91
|
+
&:after {
|
92
|
+
background: inherit;
|
93
|
+
right: 0;
|
94
|
+
transform: translateX(70px);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
.signpost__square {
|
99
|
+
@media #{$large-up} {
|
100
|
+
padding: 50px 20px 50px 90px !important;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
.signpost__enterprise {
|
105
|
+
background-color: $color-white;
|
106
|
+
|
107
|
+
&:after {
|
108
|
+
border-color: darken($color-white, 16%) transparent transparent transparent;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
.signpost__color-white {
|
113
|
+
background-color: $color-white;
|
114
|
+
|
115
|
+
&:after {
|
116
|
+
border-color: darken($color-white, 16%) transparent transparent transparent;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
.signpost__color-developer {
|
121
|
+
background-color: $color-developer;
|
122
|
+
|
123
|
+
&:after {
|
124
|
+
border-color: darken($color-developer, 15%) transparent transparent transparent;
|
125
|
+
background-position: calc(100% + 78px) center;
|
126
|
+
background-size: cover;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
|
130
|
+
.signpost__color-primary {
|
131
|
+
background-color: $color-primary;
|
132
|
+
|
133
|
+
&:after {
|
134
|
+
border-color: darken($color-primary, 16%) transparent transparent transparent;
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
.signpost__signup {
|
139
|
+
background: $color-primary file-url('pattern_1_faded.png') no-repeat left center;
|
140
|
+
background-color: $color-primary;
|
141
|
+
|
142
|
+
&:before {
|
143
|
+
background-position: 20% center;
|
144
|
+
}
|
145
|
+
|
146
|
+
&:after {
|
147
|
+
border-color: darken($color-primary, 10%) transparent transparent;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
}
|
@@ -0,0 +1,62 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Stat Box
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-statistic {
|
6
|
+
.c-statistic {
|
7
|
+
position: relative;
|
8
|
+
width: 100%;
|
9
|
+
padding: 20px 0;
|
10
|
+
|
11
|
+
@media #{$medium-up} {
|
12
|
+
padding: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
&__subtitle {
|
16
|
+
@extend %font-family-secondary;
|
17
|
+
}
|
18
|
+
|
19
|
+
&__stat,
|
20
|
+
&__copy {
|
21
|
+
@extend %font-family-primary;
|
22
|
+
}
|
23
|
+
|
24
|
+
|
25
|
+
&__subtitle,
|
26
|
+
&__copy {
|
27
|
+
font-size: rem-calc(12px);
|
28
|
+
color: #fff;
|
29
|
+
display: block;
|
30
|
+
|
31
|
+
@media #{$medium-up} {
|
32
|
+
font-size: rem-calc(14px);
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
&__stat,
|
37
|
+
&__copy {
|
38
|
+
display: inline-block;
|
39
|
+
}
|
40
|
+
|
41
|
+
&__subtitle {
|
42
|
+
display: block;
|
43
|
+
}
|
44
|
+
|
45
|
+
&__stat {
|
46
|
+
color: $color-primary !important;
|
47
|
+
font-size: rem-calc(44px);
|
48
|
+
font-weight: 400;
|
49
|
+
letter-spacing: -3px;
|
50
|
+
|
51
|
+
@media #{$medium-up} {
|
52
|
+
font-size: rem-calc(64px);
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
&__copy {
|
57
|
+
font-weight: 600;
|
58
|
+
line-height: 1.1em;
|
59
|
+
padding-left: 10px;
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
@@ -0,0 +1,65 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Tooltips
|
3
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
4
|
+
|
5
|
+
@mixin CHAMELEON-tooltips {
|
6
|
+
.tooltip {
|
7
|
+
position: relative;
|
8
|
+
|
9
|
+
&:before,
|
10
|
+
&:after {
|
11
|
+
z-index: 600;
|
12
|
+
}
|
13
|
+
|
14
|
+
&:before {
|
15
|
+
background-color: $color-black;
|
16
|
+
border-radius: 3px;
|
17
|
+
color: #fff;
|
18
|
+
content: attr(data-tooltip-title);
|
19
|
+
display: none;
|
20
|
+
font-size: 11px;
|
21
|
+
font-weight: 500;
|
22
|
+
left: 50%;
|
23
|
+
line-height: 1.4;
|
24
|
+
margin-top: 5px;
|
25
|
+
padding: 7px 9px;
|
26
|
+
position: absolute;
|
27
|
+
top: 100%;
|
28
|
+
max-width: 400px;
|
29
|
+
transform-origin: 50% 50%;
|
30
|
+
transform: translateX(-50%);
|
31
|
+
text-align: left;
|
32
|
+
min-width: 120px;
|
33
|
+
}
|
34
|
+
|
35
|
+
&:after {
|
36
|
+
border: 5px solid transparent;
|
37
|
+
border-bottom-color: $color-black;
|
38
|
+
content: "";
|
39
|
+
display: none;
|
40
|
+
left: 50%;
|
41
|
+
margin-left: -5px;
|
42
|
+
margin-top: -5px;
|
43
|
+
position: absolute;
|
44
|
+
top: 100%;
|
45
|
+
}
|
46
|
+
|
47
|
+
&:hover {
|
48
|
+
&:after,
|
49
|
+
&:before {
|
50
|
+
display: block;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
&--light {
|
55
|
+
&:before {
|
56
|
+
background-color: #fff;
|
57
|
+
color: $color-black;
|
58
|
+
}
|
59
|
+
|
60
|
+
&:after {
|
61
|
+
border-bottom-color: #fff;
|
62
|
+
}
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
@@ -0,0 +1,117 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
/// Hide an element by default, only displaying it above a certain screen size.
|
6
|
+
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
|
7
|
+
@mixin show-for($size) {
|
8
|
+
$size: map-get($breakpoints, $size);
|
9
|
+
$size: -zf-bp-to-em($size) - (1 / 16);
|
10
|
+
|
11
|
+
@include breakpoint($size down) {
|
12
|
+
display: none !important;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
/// Hide an element by default, only displaying it within a certain breakpoint.
|
17
|
+
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
|
18
|
+
@mixin show-for-only($size) {
|
19
|
+
$lower-bound-size: map-get($breakpoints, $size);
|
20
|
+
$upper-bound-size: -zf-map-next($breakpoints, $size);
|
21
|
+
|
22
|
+
// more often than not this will be correct, just one time round the loop it won't so set in scope here
|
23
|
+
$lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
|
24
|
+
// test actual lower-bound-size, if 0 set it to 0em
|
25
|
+
@if strip-unit($lower-bound-size) == 0 {
|
26
|
+
$lower-bound: -zf-bp-to-em($lower-bound-size);
|
27
|
+
}
|
28
|
+
|
29
|
+
@if $upper-bound-size == null {
|
30
|
+
@media screen and (max-width: $lower-bound) {
|
31
|
+
display: none !important;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
@else {
|
35
|
+
$upper-bound: -zf-bp-to-em($upper-bound-size);
|
36
|
+
|
37
|
+
@media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
|
38
|
+
display: none !important;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
}
|
42
|
+
|
43
|
+
|
44
|
+
/// Show an element by default, and hide it above a certain screen size.
|
45
|
+
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
|
46
|
+
@mixin hide-for($size) {
|
47
|
+
@include breakpoint($size) {
|
48
|
+
display: none !important;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
/// Show an element by default, and hide it above a certain screen size.
|
53
|
+
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
|
54
|
+
@mixin hide-for-only($size) {
|
55
|
+
@include breakpoint($size only) {
|
56
|
+
display: none !important;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
@mixin CHAMELEON-visibility-classes {
|
61
|
+
// Basic hiding classes
|
62
|
+
.hide {
|
63
|
+
display: none !important;
|
64
|
+
}
|
65
|
+
|
66
|
+
.invisible {
|
67
|
+
visibility: hidden;
|
68
|
+
}
|
69
|
+
|
70
|
+
// Responsive visibility classes
|
71
|
+
@each $size in $breakpoint-classes {
|
72
|
+
@if $size != small {
|
73
|
+
.hide-for-#{$size} {
|
74
|
+
@include hide-for($size);
|
75
|
+
}
|
76
|
+
|
77
|
+
.show-for-#{$size} {
|
78
|
+
@include show-for($size);
|
79
|
+
}
|
80
|
+
}
|
81
|
+
|
82
|
+
.hide-for-#{$size}-only {
|
83
|
+
@include hide-for-only($size);
|
84
|
+
}
|
85
|
+
|
86
|
+
.show-for-#{$size}-only {
|
87
|
+
@include show-for-only($size);
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
// Landscape and portrait visibility
|
92
|
+
.show-for-landscape,
|
93
|
+
.hide-for-portrait {
|
94
|
+
display: block !important;
|
95
|
+
|
96
|
+
@include breakpoint(landscape) {
|
97
|
+
display: block !important;
|
98
|
+
}
|
99
|
+
|
100
|
+
@include breakpoint(portrait) {
|
101
|
+
display: none !important;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
.hide-for-landscape,
|
106
|
+
.show-for-portrait {
|
107
|
+
display: none !important;
|
108
|
+
|
109
|
+
@include breakpoint(landscape) {
|
110
|
+
display: none !important;
|
111
|
+
}
|
112
|
+
|
113
|
+
@include breakpoint(portrait) {
|
114
|
+
display: block !important;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
2
|
+
// Base Input Styles
|
3
|
+
// ================
|
4
|
+
// These are the very basic input styles.
|
5
|
+
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
6
|
+
|
7
|
+
@mixin base-input() {
|
8
|
+
@extend %font-family-secondary;
|
9
|
+
background: transparent;
|
10
|
+
border-radius: $border-radius;
|
11
|
+
border: 1px solid $color-smoke;
|
12
|
+
color: $color-black;
|
13
|
+
font-size: rem-calc(15px);
|
14
|
+
font-weight: 400;
|
15
|
+
height: 40px;
|
16
|
+
line-height: 2em;
|
17
|
+
padding: 4px 20px;
|
18
|
+
transition: border 200ms ease-in-out;
|
19
|
+
width: 100%;
|
20
|
+
text-transform: none;
|
21
|
+
appearance: none !important;
|
22
|
+
-webkit-appearance: none !important;
|
23
|
+
|
24
|
+
&:focus {
|
25
|
+
border: 1px solid $color-primary;
|
26
|
+
outline: 0;
|
27
|
+
}
|
28
|
+
|
29
|
+
&.error {
|
30
|
+
border-color: $color-danger;
|
31
|
+
border-width: 1px;
|
32
|
+
}
|
33
|
+
|
34
|
+
&.valid {
|
35
|
+
border-color: $color-success;
|
36
|
+
border-width: 1px;
|
37
|
+
}
|
38
|
+
|
39
|
+
&.input--light {
|
40
|
+
border: 1px solid rgba(#ddd, .2);
|
41
|
+
color: #fff;
|
42
|
+
|
43
|
+
&:focus {
|
44
|
+
border: 1px solid $color-primary;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|