themepile-abstractio 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/.gitignore +28 -0
- data/.rbenv-version +1 -0
- data/CONTRIBUTING.md +53 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +136 -0
- data/Rakefile +2 -0
- data/abstractio.gemspec +18 -0
- data/js/foundation/foundation.alerts.js +50 -0
- data/js/foundation/foundation.clearing.js +516 -0
- data/js/foundation/foundation.cookie.js +74 -0
- data/js/foundation/foundation.dropdown.js +159 -0
- data/js/foundation/foundation.forms.js +516 -0
- data/js/foundation/foundation.joyride.js +842 -0
- data/js/foundation/foundation.js +403 -0
- data/js/foundation/foundation.magellan.js +130 -0
- data/js/foundation/foundation.orbit.js +373 -0
- data/js/foundation/foundation.placeholder.js +159 -0
- data/js/foundation/foundation.reveal.js +276 -0
- data/js/foundation/foundation.section.js +409 -0
- data/js/foundation/foundation.tooltips.js +206 -0
- data/js/foundation/foundation.topbar.js +252 -0
- data/js/foundation/index.js +16 -0
- data/js/vendor/custom.modernizr.js +4 -0
- data/js/vendor/jquery.js +9597 -0
- data/js/vendor/zepto.js +1884 -0
- data/lib/abstractio.rb +17 -0
- data/lib/abstractio/engine.rb +20 -0
- data/lib/abstractio/generators/USAGE +15 -0
- data/lib/abstractio/generators/install_generator.rb +54 -0
- data/lib/abstractio/generators/templates/application.html.erb +46 -0
- data/lib/abstractio/generators/templates/application.html.haml +31 -0
- data/lib/abstractio/generators/templates/application.html.slim +28 -0
- data/lib/abstractio/version.rb +3 -0
- data/lib/themepile-abstractio.rb +17 -0
- data/scss/abstractio.scss +46 -0
- data/scss/abstractio/_variables.scss +1224 -0
- data/scss/abstractio/components/_alert-boxes.scss +107 -0
- data/scss/abstractio/components/_block-grid.scss +68 -0
- data/scss/abstractio/components/_breadcrumbs.scss +125 -0
- data/scss/abstractio/components/_button-groups.scss +89 -0
- data/scss/abstractio/components/_buttons.scss +227 -0
- data/scss/abstractio/components/_clearing.scss +224 -0
- data/scss/abstractio/components/_custom-forms.scss +263 -0
- data/scss/abstractio/components/_dropdown-buttons.scss +115 -0
- data/scss/abstractio/components/_dropdown.scss +150 -0
- data/scss/abstractio/components/_flex-video.scss +46 -0
- data/scss/abstractio/components/_forms.scss +362 -0
- data/scss/abstractio/components/_global.scss +280 -0
- data/scss/abstractio/components/_grid.scss +186 -0
- data/scss/abstractio/components/_inline-lists.scss +53 -0
- data/scss/abstractio/components/_joyride.scss +215 -0
- data/scss/abstractio/components/_keystrokes.scss +57 -0
- data/scss/abstractio/components/_labels.scss +85 -0
- data/scss/abstractio/components/_magellan.scss +23 -0
- data/scss/abstractio/components/_orbit.scss +213 -0
- data/scss/abstractio/components/_pagination.scss +100 -0
- data/scss/abstractio/components/_panels.scss +77 -0
- data/scss/abstractio/components/_pricing-tables.scss +131 -0
- data/scss/abstractio/components/_progress-bars.scss +71 -0
- data/scss/abstractio/components/_reveal.scss +132 -0
- data/scss/abstractio/components/_section.scss +318 -0
- data/scss/abstractio/components/_side-nav.scss +69 -0
- data/scss/abstractio/components/_split-buttons.scss +167 -0
- data/scss/abstractio/components/_sub-nav.scss +68 -0
- data/scss/abstractio/components/_switch.scss +251 -0
- data/scss/abstractio/components/_tables.scss +84 -0
- data/scss/abstractio/components/_thumbs.scss +48 -0
- data/scss/abstractio/components/_tooltips.scss +117 -0
- data/scss/abstractio/components/_top-bar.scss +495 -0
- data/scss/abstractio/components/_type.scss +426 -0
- data/scss/abstractio/components/_visibility.scss +322 -0
- data/scss/normalize.scss +402 -0
- data/templates/project/.gitignore +44 -0
- data/templates/project/MIT-LICENSE.txt +20 -0
- data/templates/project/config.rb +26 -0
- data/templates/project/humans.txt +8 -0
- data/templates/project/index.html +124 -0
- data/templates/project/manifest.rb +45 -0
- data/templates/project/robots.txt +4 -0
- data/templates/project/scss/app.scss +48 -0
- data/templates/upgrade/manifest.rb +34 -0
- metadata +153 -0
@@ -0,0 +1,115 @@
|
|
1
|
+
//
|
2
|
+
// Dropdown Button Variables
|
3
|
+
//
|
4
|
+
$include-html-button-classes: $include-html-classes !default;
|
5
|
+
|
6
|
+
// We use these to set the color of the pip in dropdown buttons
|
7
|
+
$dropdown-button-pip-color: #fff !default;
|
8
|
+
$dropdown-button-pip-color-alt: #333 !default;
|
9
|
+
|
10
|
+
// We use these to style tiny dropdown buttons
|
11
|
+
$dropdown-button-padding-tny: $button-tny * 5 !default;
|
12
|
+
$dropdown-button-pip-size-tny: $button-tny !default;
|
13
|
+
$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
|
14
|
+
$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
|
15
|
+
|
16
|
+
// We use these to style small dropdown buttons
|
17
|
+
$dropdown-button-padding-sml: $button-sml * 5 !default;
|
18
|
+
$dropdown-button-pip-size-sml: $button-sml !default;
|
19
|
+
$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
|
20
|
+
$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
|
21
|
+
|
22
|
+
// We use these to style medium dropdown buttons
|
23
|
+
$dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
|
24
|
+
$dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
|
25
|
+
$dropdown-button-pip-opposite-med: $button-med * 2 !default;
|
26
|
+
$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
|
27
|
+
|
28
|
+
// We use these to style large dropdown buttons
|
29
|
+
$dropdown-button-padding-lrg: $button-lrg * 4 !default;
|
30
|
+
$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
31
|
+
$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
|
32
|
+
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
|
33
|
+
|
34
|
+
//
|
35
|
+
// Dropdown Button Mixin
|
36
|
+
//
|
37
|
+
|
38
|
+
// We use this mixin to build off of the button mixin and add dropdown button styles
|
39
|
+
@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
|
40
|
+
|
41
|
+
// We add in base styles, but they can be negated by setting to 'false'.
|
42
|
+
@if $base-style {
|
43
|
+
position: relative;
|
44
|
+
|
45
|
+
// This creates the base styles for the triangle pip
|
46
|
+
&:before {
|
47
|
+
position: absolute;
|
48
|
+
content: "";
|
49
|
+
width: 0;
|
50
|
+
height: 0;
|
51
|
+
display: block;
|
52
|
+
border-style: solid;
|
53
|
+
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
54
|
+
top: 50%;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
// If we're dealing with tiny buttons, use these styles
|
59
|
+
@if $padding == tiny {
|
60
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
61
|
+
&:before {
|
62
|
+
border-width: $dropdown-button-pip-size-tny;
|
63
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
64
|
+
margin-top: $dropdown-button-pip-top-tny;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
// If we're dealing with small buttons, use these styles
|
69
|
+
@if $padding == small {
|
70
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
71
|
+
&:before {
|
72
|
+
border-width: $dropdown-button-pip-size-sml;
|
73
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
74
|
+
margin-top: $dropdown-button-pip-top-sml;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
// If we're dealing with default (medium) buttons, use these styles
|
79
|
+
@if $padding == medium {
|
80
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
81
|
+
&:before {
|
82
|
+
border-width: $dropdown-button-pip-size-med;
|
83
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
84
|
+
margin-top: $dropdown-button-pip-top-med;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
88
|
+
// If we're dealing with large buttons, use these styles
|
89
|
+
@if $padding == large {
|
90
|
+
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
91
|
+
&:before {
|
92
|
+
border-width: $dropdown-button-pip-size-lrg;
|
93
|
+
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
94
|
+
margin-top: $dropdown-button-pip-top-lrg;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
99
|
+
@if $pip-color {
|
100
|
+
&:before { border-color: $pip-color transparent transparent transparent; }
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
|
105
|
+
@if $include-html-button-classes {
|
106
|
+
|
107
|
+
/* Dropdown Button */
|
108
|
+
.dropdown.button { @include dropdown-button;
|
109
|
+
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
110
|
+
&.small { @include dropdown-button(small,$base-style:false); }
|
111
|
+
&.large { @include dropdown-button(large,$base-style:false); }
|
112
|
+
&.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
113
|
+
}
|
114
|
+
|
115
|
+
}
|
@@ -0,0 +1,150 @@
|
|
1
|
+
//
|
2
|
+
// Dropdown Variables
|
3
|
+
//
|
4
|
+
$include-html-button-classes: $include-html-classes !default;
|
5
|
+
|
6
|
+
// We use these to controls height and width styles.
|
7
|
+
$f-dropdown-max-width: 200px !default;
|
8
|
+
$f-dropdown-height: auto !default;
|
9
|
+
$f-dropdown-max-height: none !default;
|
10
|
+
$f-dropdown-margin-top: 2px !default;
|
11
|
+
|
12
|
+
// We use this to control the background color
|
13
|
+
$f-dropdown-bg: #fff !default;
|
14
|
+
|
15
|
+
// We use this to set the border styles for dropdowns.
|
16
|
+
$f-dropdown-border-style: solid !default;
|
17
|
+
$f-dropdown-border-width: 1px !default;
|
18
|
+
$f-dropdown-border-color: darken(#fff, 20%) !default;
|
19
|
+
|
20
|
+
// We use these to style the triangle pip.
|
21
|
+
$f-dropdown-triangle-size: 6px !default;
|
22
|
+
$f-dropdown-triangle-color: #fff !default;
|
23
|
+
$f-dropdown-triangle-side-offset: 10px !default;
|
24
|
+
|
25
|
+
// We use these to control styles for the list elements.
|
26
|
+
$f-dropdown-list-style: none !default;
|
27
|
+
$f-dropdown-font-color: #555 !default;
|
28
|
+
$f-dropdown-font-size: emCalc(14px) !default;
|
29
|
+
$f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
|
30
|
+
$f-dropdown-line-height: emCalc(18px) !default;
|
31
|
+
$f-dropdown-list-hover-bg: #eeeeee !default;
|
32
|
+
$dropdown-mobile-default-float: 0 !default;
|
33
|
+
|
34
|
+
// We use this to control the styles for when the dropdown has custom content.
|
35
|
+
$f-dropdown-content-padding: emCalc(20px) !default;
|
36
|
+
|
37
|
+
//
|
38
|
+
// Dropdown Mixins
|
39
|
+
//
|
40
|
+
|
41
|
+
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
42
|
+
|
43
|
+
// We use this to style the dropdown container element.
|
44
|
+
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
45
|
+
position: absolute;
|
46
|
+
top: -9999px;
|
47
|
+
list-style: $f-dropdown-list-style;
|
48
|
+
|
49
|
+
*:first-child { margin-top: 0; }
|
50
|
+
*:last-child { margin-bottom: 0; }
|
51
|
+
|
52
|
+
@if $content == list {
|
53
|
+
width: 100%;
|
54
|
+
max-height: $f-dropdown-max-height;
|
55
|
+
height: $f-dropdown-height;
|
56
|
+
background: $f-dropdown-bg;
|
57
|
+
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
58
|
+
font-size: $em-base;
|
59
|
+
z-index: 99;
|
60
|
+
}
|
61
|
+
@else if $content == content {
|
62
|
+
padding: $f-dropdown-content-padding;
|
63
|
+
width: 100%;
|
64
|
+
height: $f-dropdown-height;
|
65
|
+
max-height: $f-dropdown-max-height;
|
66
|
+
background: $f-dropdown-bg;
|
67
|
+
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
68
|
+
font-size: $em-base;
|
69
|
+
z-index: 99;
|
70
|
+
}
|
71
|
+
|
72
|
+
@if $triangle {
|
73
|
+
margin-top: $f-dropdown-margin-top;
|
74
|
+
|
75
|
+
&:before {
|
76
|
+
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
77
|
+
position: absolute;
|
78
|
+
top: -($f-dropdown-triangle-size * 2);
|
79
|
+
#{$default-float}: $f-dropdown-triangle-side-offset;
|
80
|
+
z-index: 99;
|
81
|
+
}
|
82
|
+
&:after {
|
83
|
+
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
|
84
|
+
position: absolute;
|
85
|
+
top: -(($f-dropdown-triangle-size + 1) * 2);
|
86
|
+
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
87
|
+
z-index: 98;
|
88
|
+
}
|
89
|
+
|
90
|
+
&.right:before {
|
91
|
+
left: auto;
|
92
|
+
right: $f-dropdown-triangle-side-offset;
|
93
|
+
}
|
94
|
+
&.right:after {
|
95
|
+
left: auto;
|
96
|
+
right: $f-dropdown-triangle-side-offset - 1;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
@if $max-width { max-width: $max-width; }
|
101
|
+
@else { max-width: $f-dropdown-max-width; }
|
102
|
+
|
103
|
+
}
|
104
|
+
|
105
|
+
// We use this to style the list elements or content inside the dropdown.
|
106
|
+
@mixin dropdown-style {
|
107
|
+
font-size: $f-dropdown-font-size;
|
108
|
+
cursor: pointer;
|
109
|
+
|
110
|
+
line-height: $f-dropdown-line-height;
|
111
|
+
margin: 0;
|
112
|
+
|
113
|
+
&:hover,
|
114
|
+
&:focus { background: $f-dropdown-list-hover-bg; }
|
115
|
+
|
116
|
+
a {
|
117
|
+
display: block;
|
118
|
+
padding: $f-dropdown-list-padding;
|
119
|
+
color: $f-dropdown-font-color;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
|
124
|
+
@if $include-html-button-classes != false {
|
125
|
+
|
126
|
+
@media only screen and (max-width: 767px) {
|
127
|
+
.f-dropdown {
|
128
|
+
max-width: 100%;
|
129
|
+
#{$default-float}: $dropdown-mobile-default-float;
|
130
|
+
}
|
131
|
+
}
|
132
|
+
|
133
|
+
/* Foundation Dropdowns */
|
134
|
+
.f-dropdown {
|
135
|
+
@include dropdown-container(content);
|
136
|
+
// max-width: none;
|
137
|
+
|
138
|
+
li { @include dropdown-style; }
|
139
|
+
|
140
|
+
// You can also put custom content in these dropdowns
|
141
|
+
&.content { @include dropdown-container(content, $triangle:false); }
|
142
|
+
|
143
|
+
// Sizes
|
144
|
+
&.tiny { max-width: 200px; }
|
145
|
+
&.small { max-width: 300px; }
|
146
|
+
&.medium { max-width: 500px; }
|
147
|
+
&.large { max-width: 800px; }
|
148
|
+
}
|
149
|
+
|
150
|
+
}
|
@@ -0,0 +1,46 @@
|
|
1
|
+
//
|
2
|
+
// Flex Video Variables
|
3
|
+
//
|
4
|
+
$include-html-media-classes: $include-html-classes !default;
|
5
|
+
|
6
|
+
// We use these to control video container padding and margins
|
7
|
+
$flex-video-padding-top: emCalc(25px) !default;
|
8
|
+
$flex-video-padding-bottom: 67.5% !default;
|
9
|
+
$flex-video-margin-bottom: emCalc(16px) !default;
|
10
|
+
|
11
|
+
// We use this to control widescreen bottom padding
|
12
|
+
$flex-video-widescreen-padding-bottom: 57.25% !default;
|
13
|
+
|
14
|
+
//
|
15
|
+
// Flex Video Mixins
|
16
|
+
//
|
17
|
+
|
18
|
+
@mixin flex-video-container {
|
19
|
+
position: relative;
|
20
|
+
padding-top: $flex-video-padding-top;
|
21
|
+
padding-bottom: $flex-video-padding-bottom;
|
22
|
+
height: 0;
|
23
|
+
margin-bottom: $flex-video-margin-bottom;
|
24
|
+
overflow: hidden;
|
25
|
+
|
26
|
+
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
|
27
|
+
&.vimeo { padding-top: 0; }
|
28
|
+
|
29
|
+
iframe,
|
30
|
+
object,
|
31
|
+
embed,
|
32
|
+
video {
|
33
|
+
position: absolute;
|
34
|
+
top: 0;
|
35
|
+
#{$default-float}: 0;
|
36
|
+
width: 100%;
|
37
|
+
height: 100%;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
@if $include-html-media-classes != false {
|
42
|
+
|
43
|
+
/* Flex Video */
|
44
|
+
.flex-video { @include flex-video-container; }
|
45
|
+
|
46
|
+
}
|
@@ -0,0 +1,362 @@
|
|
1
|
+
//
|
2
|
+
// Form Variables
|
3
|
+
//
|
4
|
+
$include-html-form-classes: $include-html-classes !default;
|
5
|
+
|
6
|
+
// We use this to set the base for lots of form spacing and positioning styles
|
7
|
+
$form-spacing: emCalc(16px) !default;
|
8
|
+
|
9
|
+
// We use these to style the labels in different ways
|
10
|
+
$form-label-pointer: pointer !default;
|
11
|
+
$form-label-font-size: emCalc(14px) !default;
|
12
|
+
$form-label-font-weight: 500 !default;
|
13
|
+
$form-label-font-color: lighten(#000, 30%) !default;
|
14
|
+
$form-label-bottom-margin: emCalc(3px) !default;
|
15
|
+
$input-font-family: inherit !default;
|
16
|
+
$input-font-color: rgba(0,0,0,0.75) !default;
|
17
|
+
$input-font-size: emCalc(14px) !default;
|
18
|
+
$input-bg-color: #fff !default;
|
19
|
+
$input-focus-bg-color: darken(#fff, 2%) !default;
|
20
|
+
$input-border-color: darken(#fff, 20%) !default;
|
21
|
+
$input-focus-border-color: darken(#fff, 40%) !default;
|
22
|
+
$input-border-style: solid !default;
|
23
|
+
$input-border-width: 1px !default;
|
24
|
+
$input-disabled-bg: #ddd !default;
|
25
|
+
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
|
26
|
+
$input-include-glowing-effect: true !default;
|
27
|
+
|
28
|
+
// We use these to style the fieldset border and spacing.
|
29
|
+
$fieldset-border-style: solid !default;
|
30
|
+
$fieldset-border-width: 1px !default;
|
31
|
+
$fieldset-border-color: #ddd !default;
|
32
|
+
$fieldset-padding: emCalc(20px) !default;
|
33
|
+
$fieldset-margin: emCalc(18px) 0 !default;
|
34
|
+
|
35
|
+
// We use these to style the legends when you use them
|
36
|
+
$legend-bg: #fff !default;
|
37
|
+
$legend-font-weight: bold !default;
|
38
|
+
$legend-padding: 0 emCalc(3px) !default;
|
39
|
+
|
40
|
+
// We use these to style the prefix and postfix input elements
|
41
|
+
$input-prefix-bg: darken(#fff, 5%) !default;
|
42
|
+
$input-prefix-border-color: darken(#fff, 20%) !default;
|
43
|
+
$input-prefix-border-size: 1px !default;
|
44
|
+
$input-prefix-border-type: solid !default;
|
45
|
+
$input-prefix-overflow: hidden !default;
|
46
|
+
$input-prefix-font-color: #333 !default;
|
47
|
+
$input-prefix-font-color-alt: #fff !default;
|
48
|
+
|
49
|
+
// We use these to style the error states for inputs and labels
|
50
|
+
$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
|
51
|
+
$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
|
52
|
+
$input-error-message-font-size: emCalc(12px) !default;
|
53
|
+
$input-error-message-font-weight: bold !default;
|
54
|
+
$input-error-message-font-color: #fff !default;
|
55
|
+
$input-error-message-font-color-alt: #333 !default;
|
56
|
+
|
57
|
+
//We use this to style the glowing effect of inputs when focused
|
58
|
+
$glowing-effect-fade-time: 0.45s !default;
|
59
|
+
$glowing-effect-color: $input-focus-border-color !default;
|
60
|
+
|
61
|
+
//
|
62
|
+
// Form Mixins
|
63
|
+
//
|
64
|
+
|
65
|
+
// We use this mixin to give us form styles for rows inside of forms
|
66
|
+
@mixin form-row-base {
|
67
|
+
.row { margin: 0 ((-$form-spacing) / 2);
|
68
|
+
|
69
|
+
.column,
|
70
|
+
.columns { padding: 0 $form-spacing / 2; }
|
71
|
+
|
72
|
+
// Use this to collapse the margins of a form row
|
73
|
+
&.collapse { margin: 0;
|
74
|
+
|
75
|
+
.column,
|
76
|
+
.columns { padding: 0; }
|
77
|
+
|
78
|
+
}
|
79
|
+
}
|
80
|
+
input.column,
|
81
|
+
input.columns,
|
82
|
+
textarea.column,
|
83
|
+
textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
|
84
|
+
}
|
85
|
+
|
86
|
+
// We use this mixin to give all basic form elements their style
|
87
|
+
@mixin form-element() {
|
88
|
+
background-color: $input-bg-color;
|
89
|
+
font-family: $input-font-family;
|
90
|
+
border: $input-border-width $input-border-style $input-border-color;
|
91
|
+
-webkit-box-shadow: $input-box-shadow;
|
92
|
+
box-shadow: $input-box-shadow;
|
93
|
+
color: $input-font-color;
|
94
|
+
display: block;
|
95
|
+
font-size: $input-font-size;
|
96
|
+
margin: 0 0 $form-spacing 0;
|
97
|
+
padding: $form-spacing / 2;
|
98
|
+
height: emCalc(13px) + ($form-spacing * 1.5);
|
99
|
+
width: 100%;
|
100
|
+
@include box-sizing(border-box);
|
101
|
+
@if $input-include-glowing-effect {
|
102
|
+
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
|
103
|
+
}
|
104
|
+
// Basic focus styles
|
105
|
+
&:focus {
|
106
|
+
background: $input-focus-bg-color;
|
107
|
+
border-color: $input-focus-border-color;
|
108
|
+
outline: none;
|
109
|
+
}
|
110
|
+
|
111
|
+
// Disabled background input background color
|
112
|
+
&[disabled] { background-color: $input-disabled-bg; }
|
113
|
+
}
|
114
|
+
|
115
|
+
// We use this mixin to create form labels
|
116
|
+
@mixin form-label($alignment:false, $base-style:true) {
|
117
|
+
|
118
|
+
// Control whether or not the base styles come through.
|
119
|
+
@if $base-style {
|
120
|
+
font-size: $form-label-font-size;
|
121
|
+
color: $form-label-font-color;
|
122
|
+
cursor: $form-label-pointer;
|
123
|
+
display: block;
|
124
|
+
font-weight: $form-label-font-weight;
|
125
|
+
margin-bottom: $form-label-bottom-margin;
|
126
|
+
}
|
127
|
+
|
128
|
+
// Alignment options
|
129
|
+
@if $alignment == right {
|
130
|
+
float: none;
|
131
|
+
text-align: right;
|
132
|
+
}
|
133
|
+
@else if $alignment == inline {
|
134
|
+
margin: 0 0 $form-spacing 0;
|
135
|
+
padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
|
136
|
+
}
|
137
|
+
}
|
138
|
+
|
139
|
+
// We use this mixin to create postfix/prefix form Labels
|
140
|
+
@mixin prefix-postfix-base {
|
141
|
+
display: block;
|
142
|
+
position: relative;
|
143
|
+
z-index: 2;
|
144
|
+
text-align: center;
|
145
|
+
width: 100%;
|
146
|
+
padding-top: 0;
|
147
|
+
padding-bottom: 0;
|
148
|
+
border-style: $input-prefix-border-type;
|
149
|
+
border-width: $input-prefix-border-size;
|
150
|
+
overflow: $input-prefix-overflow;
|
151
|
+
font-size: $form-label-font-size;
|
152
|
+
height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
153
|
+
line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
154
|
+
}
|
155
|
+
|
156
|
+
// We use this mixin to create prefix label styles
|
157
|
+
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
158
|
+
|
159
|
+
@if $bg {
|
160
|
+
$bg-lightness: lightness($bg);
|
161
|
+
background: $bg;
|
162
|
+
border-color: darken($bg, 10%);
|
163
|
+
border-#{$opposite-direction}: none;
|
164
|
+
|
165
|
+
// Control the font color based on background brightness
|
166
|
+
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
167
|
+
@else { color: $input-prefix-font-color-alt; }
|
168
|
+
}
|
169
|
+
|
170
|
+
@if $is-button {
|
171
|
+
padding-#{$default-float}: 0;
|
172
|
+
padding-#{$opposite-direction}: 0;
|
173
|
+
padding-top: 0;
|
174
|
+
padding-bottom: 0;
|
175
|
+
text-align: center;
|
176
|
+
line-height: emCalc(34px);
|
177
|
+
}
|
178
|
+
|
179
|
+
}
|
180
|
+
|
181
|
+
// We use this mixin to create postfix label styles
|
182
|
+
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
183
|
+
|
184
|
+
@if $bg {
|
185
|
+
$bg-lightness: lightness($bg);
|
186
|
+
background: $bg;
|
187
|
+
border-color: darken($bg, 15%);
|
188
|
+
border-#{$default-float}: none;
|
189
|
+
|
190
|
+
// Control the font color based on background brightness
|
191
|
+
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
192
|
+
@else { color: $input-prefix-font-color-alt; }
|
193
|
+
}
|
194
|
+
|
195
|
+
@if $is-button {
|
196
|
+
padding-#{$default-float}: 0;
|
197
|
+
padding-#{$opposite-direction}: 0;
|
198
|
+
padding-top: 0;
|
199
|
+
padding-bottom: 0;
|
200
|
+
text-align: center;
|
201
|
+
line-height: emCalc(34px);
|
202
|
+
}
|
203
|
+
|
204
|
+
}
|
205
|
+
|
206
|
+
// We use this mixin to style fieldsets
|
207
|
+
@mixin fieldset {
|
208
|
+
border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
|
209
|
+
padding: $fieldset-padding;
|
210
|
+
margin: $fieldset-margin;
|
211
|
+
|
212
|
+
// and legend styles
|
213
|
+
legend {
|
214
|
+
font-weight: $legend-font-weight;
|
215
|
+
background: $legend-bg;
|
216
|
+
padding: $legend-padding;
|
217
|
+
margin: 0;
|
218
|
+
margin-#{$default-float}: emCalc(-3px);
|
219
|
+
}
|
220
|
+
}
|
221
|
+
|
222
|
+
// We use this mixin to control border and background color of error inputs
|
223
|
+
@mixin form-error-color($color:$alert-color) {
|
224
|
+
border-color: $color;
|
225
|
+
background-color: rgba($color, 0.1);
|
226
|
+
|
227
|
+
// Go back to normal on focus
|
228
|
+
&:focus {
|
229
|
+
background: $input-focus-bg-color;
|
230
|
+
border-color: $input-focus-border-color;
|
231
|
+
}
|
232
|
+
}
|
233
|
+
|
234
|
+
// We use this simple mixin to style labels for error inputs
|
235
|
+
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
236
|
+
|
237
|
+
// We use this mixin to create error message styles
|
238
|
+
@mixin form-error-message($bg:$alert-color) {
|
239
|
+
display: block;
|
240
|
+
padding: $input-error-message-padding;
|
241
|
+
margin-top: $input-error-message-top;
|
242
|
+
margin-bottom: $form-spacing;
|
243
|
+
font-size: $input-error-message-font-size;
|
244
|
+
font-weight: $input-error-message-font-weight;
|
245
|
+
|
246
|
+
// We can control the text color based on the brightness of the background.
|
247
|
+
$bg-lightness: lightness($bg);
|
248
|
+
background: $bg;
|
249
|
+
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
|
250
|
+
@else { color: $input-error-message-font-color-alt; }
|
251
|
+
}
|
252
|
+
|
253
|
+
// Only include these classes if the variable is true, otherwise they'll be left out.
|
254
|
+
@if $include-html-form-classes != false {
|
255
|
+
/* Standard Forms */
|
256
|
+
form { margin: 0 0 $form-spacing; }
|
257
|
+
|
258
|
+
/* Using forms within rows, we need to set some defaults */
|
259
|
+
form .row { @include form-row-base; }
|
260
|
+
|
261
|
+
/* Label Styles */
|
262
|
+
label { @include form-label;
|
263
|
+
&.right { @include form-label(right,false); }
|
264
|
+
&.inline { @include form-label(inline,false); }
|
265
|
+
}
|
266
|
+
|
267
|
+
/* Attach elements to the beginning or end of an input */
|
268
|
+
.prefix,
|
269
|
+
.postfix { @include prefix-postfix-base; }
|
270
|
+
|
271
|
+
/* Adjust padding, alignment and radius if pre/post element is a button */
|
272
|
+
.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
|
273
|
+
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
274
|
+
|
275
|
+
.prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
|
276
|
+
.postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
|
277
|
+
.prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
|
278
|
+
.postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
|
279
|
+
|
280
|
+
/* Separate prefix and postfix styles when on span so buttons keep their own */
|
281
|
+
span.prefix { @include prefix();
|
282
|
+
&.radius { @include radius(0); @include side-radius(left, $global-radius); }
|
283
|
+
}
|
284
|
+
span.postfix { @include postfix();
|
285
|
+
&.radius { @include radius(0); @include side-radius(right, $global-radius); }
|
286
|
+
}
|
287
|
+
|
288
|
+
/* Input groups will automatically style first and last elements of the group */
|
289
|
+
.input-group {
|
290
|
+
&.radius {
|
291
|
+
&>*:first-child, &>*:first-child * {
|
292
|
+
@include side-radius($default-float, $global-radius);
|
293
|
+
}
|
294
|
+
&>*:last-child, &>*:last-child * {
|
295
|
+
@include side-radius($opposite-direction, $global-radius);
|
296
|
+
}
|
297
|
+
}
|
298
|
+
&.round {
|
299
|
+
&>*:first-child, &>*:first-child * {
|
300
|
+
@include side-radius($default-float, $button-round);
|
301
|
+
}
|
302
|
+
&>*:last-child, &>*:last-child * {
|
303
|
+
@include side-radius($opposite-direction, $button-round);
|
304
|
+
}
|
305
|
+
}
|
306
|
+
}
|
307
|
+
|
308
|
+
/* We use this to get basic styling on all basic form elements */
|
309
|
+
input[type="text"],
|
310
|
+
input[type="password"],
|
311
|
+
input[type="date"],
|
312
|
+
input[type="datetime"],
|
313
|
+
input[type="datetime-local"],
|
314
|
+
input[type="month"],
|
315
|
+
input[type="week"],
|
316
|
+
input[type="email"],
|
317
|
+
input[type="number"],
|
318
|
+
input[type="search"],
|
319
|
+
input[type="tel"],
|
320
|
+
input[type="time"],
|
321
|
+
input[type="url"],
|
322
|
+
textarea {
|
323
|
+
@include form-element;
|
324
|
+
@if not $input-include-glowing-effect {
|
325
|
+
@include single-transition(all, 0.15s, linear);
|
326
|
+
}
|
327
|
+
}
|
328
|
+
|
329
|
+
/* Adjust margin for form elements below */
|
330
|
+
input[type="file"],
|
331
|
+
input[type="checkbox"],
|
332
|
+
input[type="radio"],
|
333
|
+
select {
|
334
|
+
margin: 0 0 $form-spacing 0;
|
335
|
+
}
|
336
|
+
|
337
|
+
/* Normalize file input width */
|
338
|
+
input[type="file"] {
|
339
|
+
width:100%;
|
340
|
+
}
|
341
|
+
|
342
|
+
/* We add basic fieldset styling */
|
343
|
+
fieldset {
|
344
|
+
@include fieldset;
|
345
|
+
}
|
346
|
+
|
347
|
+
/* Error Handling */
|
348
|
+
.error input,
|
349
|
+
input.error,
|
350
|
+
.error textarea,
|
351
|
+
textarea.error {
|
352
|
+
@include form-error-color;
|
353
|
+
}
|
354
|
+
|
355
|
+
.error label,
|
356
|
+
label.error { @include form-label-error-color; }
|
357
|
+
|
358
|
+
.error small,
|
359
|
+
small.error {
|
360
|
+
@include form-error-message;
|
361
|
+
}
|
362
|
+
}
|