modularis 0.0.2 → 0.0.3
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 +8 -8
- data/demo/test/config.rb +26 -0
- data/lib/modularis/generators/install_generator.rb +1 -1
- data/lib/modularis/version.rb +1 -1
- data/templates/project/config.rb +32 -9
- metadata +3 -40
- data/scss/compagecss/components/_alert-boxes.scss +0 -106
- data/scss/compagecss/components/_block-grid.scss +0 -70
- data/scss/compagecss/components/_breadcrumbs.scss +0 -124
- data/scss/compagecss/components/_button-groups.scss +0 -88
- data/scss/compagecss/components/_buttons.scss +0 -226
- data/scss/compagecss/components/_clearing.scss +0 -217
- data/scss/compagecss/components/_custom-forms.scss +0 -246
- data/scss/compagecss/components/_dropdown-buttons.scss +0 -114
- data/scss/compagecss/components/_dropdown.scss +0 -149
- data/scss/compagecss/components/_flex-video.scss +0 -45
- data/scss/compagecss/components/_flexbox-grid.scss +0 -225
- data/scss/compagecss/components/_flip.scss +0 -105
- data/scss/compagecss/components/_forms.scss +0 -361
- data/scss/compagecss/components/_global.scss +0 -289
- data/scss/compagecss/components/_grid.scss +0 -184
- data/scss/compagecss/components/_inline-lists.scss +0 -52
- data/scss/compagecss/components/_joyride.scss +0 -210
- data/scss/compagecss/components/_keystrokes.scss +0 -56
- data/scss/compagecss/components/_labels.scss +0 -84
- data/scss/compagecss/components/_magellan.scss +0 -21
- data/scss/compagecss/components/_off-canvas.scss +0 -86
- data/scss/compagecss/components/_orbit.scss +0 -209
- data/scss/compagecss/components/_pagination.scss +0 -99
- data/scss/compagecss/components/_panels.scss +0 -76
- data/scss/compagecss/components/_pricing-tables.scss +0 -130
- data/scss/compagecss/components/_progress-bars.scss +0 -70
- data/scss/compagecss/components/_reveal.scss +0 -131
- data/scss/compagecss/components/_section.scss +0 -303
- data/scss/compagecss/components/_side-nav.scss +0 -68
- data/scss/compagecss/components/_split-buttons.scss +0 -166
- data/scss/compagecss/components/_sub-nav.scss +0 -67
- data/scss/compagecss/components/_switch.scss +0 -249
- data/scss/compagecss/components/_tables.scss +0 -80
- data/scss/compagecss/components/_thumbs.scss +0 -47
- data/scss/compagecss/components/_tooltips.scss +0 -113
- data/scss/compagecss/components/_top-bar.scss +0 -462
- data/scss/compagecss/components/_type.scss +0 -422
- data/scss/compagecss/components/_visibility.scss +0 -320
- /data/scss/compagecss/{_variables.scss → _settings.scss} +0 -0
@@ -1,226 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Button Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to build padding for buttons.
|
6
|
-
$button-med: emCalc(12px) !default;
|
7
|
-
$button-tny: emCalc(7px) !default;
|
8
|
-
$button-sml: emCalc(9px) !default;
|
9
|
-
$button-lrg: emCalc(16px) !default;
|
10
|
-
|
11
|
-
// We use this to control the display property.
|
12
|
-
$button-display: inline-block !default;
|
13
|
-
$button-margin-bottom: emCalc(20px) !default;
|
14
|
-
|
15
|
-
// We use these to control button text styles.
|
16
|
-
$button-font-family: inherit !default;
|
17
|
-
$button-font-color: #fff !default;
|
18
|
-
$button-font-color-alt: #333 !default;
|
19
|
-
$button-font-med: emCalc(16px) !default;
|
20
|
-
$button-font-tny: emCalc(11px) !default;
|
21
|
-
$button-font-sml: emCalc(13px) !default;
|
22
|
-
$button-font-lrg: emCalc(20px) !default;
|
23
|
-
$button-font-weight: bold !default;
|
24
|
-
$button-font-align: center !default;
|
25
|
-
|
26
|
-
// We use these to control various hover effects.
|
27
|
-
$button-function-factor: 10% !default;
|
28
|
-
|
29
|
-
// We use these to control button border styles.
|
30
|
-
$button-border-width: 1px !default;
|
31
|
-
$button-border-style: solid !default;
|
32
|
-
$button-border-color: darken($primary-color, $button-function-factor) !default;
|
33
|
-
|
34
|
-
// We use this to set the default radius used throughout the core.
|
35
|
-
$button-radius: $global-radius !default;
|
36
|
-
$button-round: $global-rounded !default;
|
37
|
-
|
38
|
-
// We use this to set default opacity for disabled buttons.
|
39
|
-
$button-disabled-opacity: 0.6 !default;
|
40
|
-
|
41
|
-
|
42
|
-
//
|
43
|
-
// Button Mixins
|
44
|
-
//
|
45
|
-
|
46
|
-
// We use this mixin to create a default button base.
|
47
|
-
@mixin button-base($style:true, $display:$button-display) {
|
48
|
-
@if $style {
|
49
|
-
border-style: $button-border-style;
|
50
|
-
border-width: $button-border-width;
|
51
|
-
cursor: pointer;
|
52
|
-
font-family: $button-font-family;
|
53
|
-
font-weight: $button-font-weight;
|
54
|
-
line-height: 1;
|
55
|
-
margin: 0 0 $button-margin-bottom;
|
56
|
-
position: relative;
|
57
|
-
text-decoration: none;
|
58
|
-
text-align: $button-font-align;
|
59
|
-
}
|
60
|
-
@if $display { display: $display; }
|
61
|
-
}
|
62
|
-
|
63
|
-
// We use this mixin to add button size styles
|
64
|
-
@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
|
65
|
-
|
66
|
-
// We control which padding styles come through,
|
67
|
-
// these can be turned off by setting $padding:false
|
68
|
-
@if $padding {
|
69
|
-
padding-top: $padding;
|
70
|
-
padding-#{$opposite-direction}: $padding * 2;
|
71
|
-
padding-bottom: $padding + emCalc(1px);
|
72
|
-
padding-#{$default-float}: $padding * 2;
|
73
|
-
|
74
|
-
// We control the font-size based on mixin input.
|
75
|
-
@if $padding == $button-med { font-size: $button-font-med; }
|
76
|
-
@else if $padding == $button-tny { font-size: $button-font-tny; }
|
77
|
-
@else if $padding == $button-sml { font-size: $button-font-sml; }
|
78
|
-
@else if $padding == $button-lrg { font-size: $button-font-lrg; }
|
79
|
-
@else { font-size: $padding - emCalc(2px); }
|
80
|
-
}
|
81
|
-
|
82
|
-
// We can set $full-width:true to remove side padding extend width.
|
83
|
-
@if $full-width {
|
84
|
-
// We still need to check if $padding is set.
|
85
|
-
@if $padding {
|
86
|
-
padding-top: $padding;
|
87
|
-
padding-bottom: $padding + emCalc(1px);
|
88
|
-
} @else if $padding == false {
|
89
|
-
padding-top:0;
|
90
|
-
padding-bottom:0;
|
91
|
-
}
|
92
|
-
padding-right: 0px;
|
93
|
-
padding-left: 0px;
|
94
|
-
width: 100%;
|
95
|
-
}
|
96
|
-
|
97
|
-
// <input>'s and <button>'s take on strange padding. We added this to help fix that.
|
98
|
-
@if $is-input == $button-lrg {
|
99
|
-
padding-top: $is-input + emCalc(.5px);
|
100
|
-
padding-bottom: $is-input + emCalc(.5px);
|
101
|
-
}
|
102
|
-
@else if $is-input {
|
103
|
-
padding-top: $is-input + emCalc(1px);
|
104
|
-
padding-bottom: $is-input;
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
// We use this mixin to add button color styles
|
109
|
-
@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
|
110
|
-
|
111
|
-
// We control which background styles are used,
|
112
|
-
// these can be removed by setting $bg:false
|
113
|
-
@if $bg {
|
114
|
-
// This find the lightness percentage of the background color.
|
115
|
-
$bg-lightness: lightness($bg);
|
116
|
-
|
117
|
-
background-color: $bg;
|
118
|
-
border-color: darken($bg, $button-function-factor);
|
119
|
-
&:hover,
|
120
|
-
&:focus { background-color: darken($bg, $button-function-factor); }
|
121
|
-
|
122
|
-
// We control the text color for you based on the background color.
|
123
|
-
@if $bg-lightness > 70% {
|
124
|
-
color: $button-font-color-alt;
|
125
|
-
&:hover,
|
126
|
-
&:focus { color: $button-font-color-alt; }
|
127
|
-
}
|
128
|
-
@else {
|
129
|
-
color: $button-font-color;
|
130
|
-
&:hover,
|
131
|
-
&:focus { color: $button-font-color; }
|
132
|
-
}
|
133
|
-
}
|
134
|
-
|
135
|
-
// We can set $disabled:true to create a disabled transparent button.
|
136
|
-
@if $disabled {
|
137
|
-
cursor: default;
|
138
|
-
opacity: $button-disabled-opacity;
|
139
|
-
-webkit-box-shadow: none;
|
140
|
-
box-shadow: none;
|
141
|
-
&:hover,
|
142
|
-
&:focus { background-color: $bg; }
|
143
|
-
}
|
144
|
-
|
145
|
-
// We can control how much button radius us used.
|
146
|
-
@if $radius == true { @include radius($button-radius); }
|
147
|
-
@else if $radius { @include radius($radius); }
|
148
|
-
|
149
|
-
}
|
150
|
-
|
151
|
-
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
|
152
|
-
@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
|
153
|
-
@include button-base;
|
154
|
-
@include button-size($padding, $full-width, $is-input);
|
155
|
-
@include button-style($bg, $radius, $disabled);
|
156
|
-
}
|
157
|
-
|
158
|
-
|
159
|
-
//
|
160
|
-
// Button Classes
|
161
|
-
//
|
162
|
-
|
163
|
-
// Only include these classes if the variable is true, otherwise they'll be left out.
|
164
|
-
@if $include-html-button-classes != false {
|
165
|
-
|
166
|
-
// Default styles applied outside of media query
|
167
|
-
button, .button {
|
168
|
-
@include button-base;
|
169
|
-
@include button-size;
|
170
|
-
@include button-style;
|
171
|
-
|
172
|
-
&.secondary { @include button-style($bg:$secondary-color); }
|
173
|
-
&.success { @include button-style($bg:$success-color); }
|
174
|
-
&.alert { @include button-style($bg:$alert-color); }
|
175
|
-
|
176
|
-
&.large { @include button-size($padding:$button-lrg); }
|
177
|
-
&.small { @include button-size($padding:$button-sml); }
|
178
|
-
&.tiny { @include button-size($padding:$button-tny); }
|
179
|
-
&.expand { @include button-size($padding:null,$full-width:true); }
|
180
|
-
|
181
|
-
&.left-align { text-align: left; text-indent: emCalc(12px); }
|
182
|
-
&.right-align { text-align: right; padding-right: emCalc(12px); }
|
183
|
-
|
184
|
-
&.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
|
185
|
-
&.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
|
186
|
-
&.success { @include button-style($bg:$success-color, $disabled:true); }
|
187
|
-
&.alert { @include button-style($bg:$alert-color, $disabled:true); }
|
188
|
-
}
|
189
|
-
|
190
|
-
}
|
191
|
-
|
192
|
-
button, .button {
|
193
|
-
@include button-size($padding:false, $is-input:$button-med);
|
194
|
-
&.tiny { @include button-size($padding:false, $is-input:$button-tny); }
|
195
|
-
&.small { @include button-size($padding:false, $is-input:$button-sml); }
|
196
|
-
&.large { @include button-size($padding:false, $is-input:$button-lrg); }
|
197
|
-
}
|
198
|
-
|
199
|
-
// Styles for any browser or device that support media queries
|
200
|
-
@media only screen {
|
201
|
-
|
202
|
-
button, .button {
|
203
|
-
@include inset-shadow();
|
204
|
-
@include single-transition(background-color);
|
205
|
-
|
206
|
-
&.large { @include button-size($padding:false, $full-width:false); }
|
207
|
-
&.small { @include button-size($padding:false, $full-width:false); }
|
208
|
-
&.tiny { @include button-size($padding:false, $full-width:false); }
|
209
|
-
|
210
|
-
&.radius { @include button-style($bg:false, $radius:true); }
|
211
|
-
&.round { @include button-style($bg:false, $radius:$button-round); }
|
212
|
-
}
|
213
|
-
|
214
|
-
}
|
215
|
-
|
216
|
-
// Additional styles for screens larger than 768px
|
217
|
-
@media #{$small} {
|
218
|
-
|
219
|
-
button, .button {
|
220
|
-
@include button-base($style:false, $display:inline-block);
|
221
|
-
@include button-size($padding:false, $full-width:false);
|
222
|
-
}
|
223
|
-
|
224
|
-
}
|
225
|
-
|
226
|
-
}
|
@@ -1,217 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Clearing Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to set the background colors for parts of Clearing.
|
6
|
-
$clearing-bg: #111 !default;
|
7
|
-
$clearing-caption-bg: $clearing-bg !default;
|
8
|
-
$clearing-carousel-bg: #111 !default;
|
9
|
-
$clearing-img-bg: $clearing-bg !default;
|
10
|
-
|
11
|
-
// We use these to style the close button
|
12
|
-
$clearing-close-color: #fff !default;
|
13
|
-
$clearing-close-size: 40px !default;
|
14
|
-
|
15
|
-
// We use these to style the arrows
|
16
|
-
$clearing-arrow-size: 16px !default;
|
17
|
-
$clearing-arrow-color: $clearing-close-color !default;
|
18
|
-
|
19
|
-
// We use these to style captions
|
20
|
-
$clearing-caption-font-color: #fff !default;
|
21
|
-
$clearing-caption-padding: 10px 30px !default;
|
22
|
-
|
23
|
-
// We use these to make the image and carousel height and style
|
24
|
-
$clearing-active-img-height: 75% !default;
|
25
|
-
$clearing-carousel-height: 150px !default;
|
26
|
-
$clearing-carousel-thumb-width: 175px !default;
|
27
|
-
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
|
28
|
-
|
29
|
-
|
30
|
-
// We decided to not create a mixin for Clearing because it relies
|
31
|
-
// on predefined classes and structure to work properly.
|
32
|
-
// The variables above should give enough control.
|
33
|
-
|
34
|
-
/* Clearing Styles */
|
35
|
-
[data-clearing] {
|
36
|
-
@include clearfix;
|
37
|
-
margin-bottom: 0;
|
38
|
-
list-style: none;
|
39
|
-
|
40
|
-
li {
|
41
|
-
float: $default-float;
|
42
|
-
margin-#{$opposite-direction}: 10px;
|
43
|
-
}
|
44
|
-
}
|
45
|
-
|
46
|
-
.clearing-blackout {
|
47
|
-
background: $clearing-bg;
|
48
|
-
position: fixed;
|
49
|
-
width: 100%;
|
50
|
-
height: 100%;
|
51
|
-
top: 0;
|
52
|
-
#{$default-float}: 0;
|
53
|
-
z-index: 998;
|
54
|
-
|
55
|
-
.clearing-close { display: block; }
|
56
|
-
}
|
57
|
-
|
58
|
-
.clearing-container {
|
59
|
-
position: relative;
|
60
|
-
z-index: 998;
|
61
|
-
height: 100%;
|
62
|
-
overflow: hidden;
|
63
|
-
margin: 0;
|
64
|
-
}
|
65
|
-
|
66
|
-
.visible-img {
|
67
|
-
height: 95%;
|
68
|
-
position: relative;
|
69
|
-
|
70
|
-
img {
|
71
|
-
position: absolute;
|
72
|
-
#{$default-float}: 50%;
|
73
|
-
top: 50%;
|
74
|
-
margin-#{$default-float}: -50%;
|
75
|
-
max-height: 100%;
|
76
|
-
max-width: 100%;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
.clearing-caption {
|
81
|
-
color: $clearing-caption-font-color;
|
82
|
-
line-height: 1.3;
|
83
|
-
margin-bottom: 0;
|
84
|
-
text-align: center;
|
85
|
-
bottom: 0;
|
86
|
-
background: $clearing-caption-bg;
|
87
|
-
width: 100%;
|
88
|
-
padding: $clearing-caption-padding;
|
89
|
-
position: absolute;
|
90
|
-
#{$default-float}: 0;
|
91
|
-
}
|
92
|
-
|
93
|
-
.clearing-close {
|
94
|
-
z-index: 999;
|
95
|
-
padding-#{$default-float}: 20px;
|
96
|
-
padding-top: 10px;
|
97
|
-
font-size: $clearing-close-size;
|
98
|
-
line-height: 1;
|
99
|
-
color: $clearing-close-color;
|
100
|
-
display: none;
|
101
|
-
|
102
|
-
&:hover,
|
103
|
-
&:focus { color: #ccc; }
|
104
|
-
}
|
105
|
-
|
106
|
-
.clearing-assembled .clearing-container { height: 100%;
|
107
|
-
.carousel > ul { display: none; }
|
108
|
-
}
|
109
|
-
|
110
|
-
|
111
|
-
// Large screen overrides
|
112
|
-
@media #{$small} {
|
113
|
-
.clearing-main-prev,
|
114
|
-
.clearing-main-next {
|
115
|
-
position: absolute;
|
116
|
-
height: 100%;
|
117
|
-
width: 40px;
|
118
|
-
top: 0;
|
119
|
-
& > span {
|
120
|
-
position: absolute;
|
121
|
-
top: 50%;
|
122
|
-
display: block;
|
123
|
-
width: 0;
|
124
|
-
height: 0;
|
125
|
-
border: solid $clearing-arrow-size;
|
126
|
-
}
|
127
|
-
}
|
128
|
-
.clearing-main-prev {
|
129
|
-
#{$default-float}: 0;
|
130
|
-
& > span {
|
131
|
-
#{$default-float}: 5px;
|
132
|
-
border-color: transparent;
|
133
|
-
border-#{$opposite-direction}-color: $clearing-arrow-color;
|
134
|
-
}
|
135
|
-
}
|
136
|
-
.clearing-main-next {
|
137
|
-
#{$opposite-direction}: 0;
|
138
|
-
& > span {
|
139
|
-
border-color: transparent;
|
140
|
-
border-#{$default-float}-color: $clearing-arrow-color;
|
141
|
-
}
|
142
|
-
}
|
143
|
-
|
144
|
-
.clearing-main-prev.disabled,
|
145
|
-
.clearing-main-next.disabled { opacity: 0.5; }
|
146
|
-
|
147
|
-
// If you want to show a lightbox, but only have a single image come through as the thumbnail
|
148
|
-
.clearing-feature ~ li { display: none; }
|
149
|
-
|
150
|
-
.clearing-assembled .clearing-container {
|
151
|
-
|
152
|
-
.carousel {
|
153
|
-
background: $clearing-carousel-bg;
|
154
|
-
height: $clearing-carousel-height;
|
155
|
-
margin-top: 5px;
|
156
|
-
|
157
|
-
& > ul {
|
158
|
-
display: block;
|
159
|
-
z-index: 999;
|
160
|
-
width: 200%;
|
161
|
-
height: 100%;
|
162
|
-
margin-#{$default-float}: 0;
|
163
|
-
position: relative;
|
164
|
-
#{$default-float}: 0;
|
165
|
-
|
166
|
-
li {
|
167
|
-
display: block;
|
168
|
-
width: $clearing-carousel-thumb-width;
|
169
|
-
height: inherit;
|
170
|
-
padding: 0;
|
171
|
-
float: $default-float;
|
172
|
-
overflow: hidden;
|
173
|
-
margin-#{$opposite-direction}: 1px;
|
174
|
-
position: relative;
|
175
|
-
cursor: pointer;
|
176
|
-
opacity: 0.4;
|
177
|
-
|
178
|
-
&.fix-height {
|
179
|
-
img {
|
180
|
-
min-height: 100%;
|
181
|
-
height: 100%;
|
182
|
-
max-width: none;
|
183
|
-
}
|
184
|
-
}
|
185
|
-
|
186
|
-
a.th {
|
187
|
-
border: none;
|
188
|
-
-webkit-box-shadow: none;
|
189
|
-
box-shadow: none;
|
190
|
-
display: block;
|
191
|
-
}
|
192
|
-
|
193
|
-
img {
|
194
|
-
cursor: pointer !important;
|
195
|
-
min-width: 100% !important;
|
196
|
-
}
|
197
|
-
|
198
|
-
&.visible { opacity: 1; }
|
199
|
-
}
|
200
|
-
}
|
201
|
-
}
|
202
|
-
|
203
|
-
.visible-img {
|
204
|
-
background: $clearing-img-bg;
|
205
|
-
overflow: hidden;
|
206
|
-
height: $clearing-active-img-height;
|
207
|
-
}
|
208
|
-
}
|
209
|
-
|
210
|
-
.clearing-close {
|
211
|
-
position: absolute;
|
212
|
-
top: 10px;
|
213
|
-
#{$opposite-direction}: 20px;
|
214
|
-
padding-#{$default-float}: 0;
|
215
|
-
padding-top: 0;
|
216
|
-
}
|
217
|
-
}
|
@@ -1,246 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Custom Form Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to control the basic form styles input styles
|
6
|
-
$custom-form-border-color: #ccc !default;
|
7
|
-
$custom-form-bg: #fff !default;
|
8
|
-
$custom-form-bg-disabled: #ddd !default;
|
9
|
-
$custom-form-check-color: #222 !default;
|
10
|
-
|
11
|
-
// We use these to style the custom select form element.
|
12
|
-
$custom-select-bg: #fff !default;
|
13
|
-
$custom-select-fade-to-color: #f3f3f3 !default;
|
14
|
-
$custom-select-border-color: #ddd !default;
|
15
|
-
$custom-select-triangle-color: #aaa !default;
|
16
|
-
$custom-select-triangle-color-open: #222 !default;
|
17
|
-
$custom-select-height: emCalc(13px) + ($form-spacing * 1.5) !default;
|
18
|
-
$custom-select-margin-bottom: emCalc(20px) !default;
|
19
|
-
$custom-select-font-color-selected: #141414 !default;
|
20
|
-
$custom-select-disabled-color: #888 !default;
|
21
|
-
|
22
|
-
// We use these to control the style of the custom select dropdown element.
|
23
|
-
$custom-dropdown-height: 200px !default;
|
24
|
-
$custom-dropdown-bg: #fff !default;
|
25
|
-
$custom-dropdown-border-color: darken(#fff, 20%) !default;
|
26
|
-
$custom-dropdown-border-width: 1px !default;
|
27
|
-
$custom-dropdown-border-style: solid !default;
|
28
|
-
$custom-dropdown-font-color: #555 !default;
|
29
|
-
$custom-dropdown-font-size: emCalc(14px) !default;
|
30
|
-
$custom-dropdown-color-selected: #eeeeee !default;
|
31
|
-
$custom-dropdown-font-color-selected: #000 !default;
|
32
|
-
$custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1) !default;
|
33
|
-
$custom-dropdown-offset-top: auto !default;
|
34
|
-
$custom-dropdown-list-padding: emCalc(4px) !default;
|
35
|
-
$custom-dropdown-default-float-padding: emCalc(6px) !default;
|
36
|
-
$custom-dropdown-opposite-padding: emCalc(38px) !default;
|
37
|
-
$custom-dropdown-list-item-min-height: emCalc(24px) !default;
|
38
|
-
$custom-dropdown-width-small: 134px !default;
|
39
|
-
$custom-dropdown-width-medium: 254px !default;
|
40
|
-
$custom-dropdown-width-large: 434px !default;
|
41
|
-
|
42
|
-
// We decided not to make a mixin for the custom forms because
|
43
|
-
// they rely on a very specific class naming structure.
|
44
|
-
// We may look at updating this in the future.
|
45
|
-
|
46
|
-
// Only include these classes if the variable is true, otherwise they'll be left out.
|
47
|
-
@if $include-html-button-classes != false {
|
48
|
-
|
49
|
-
/* Custom Checkbox and Radio Inputs */
|
50
|
-
form.custom {
|
51
|
-
|
52
|
-
.hidden-field {
|
53
|
-
margin-#{$default-float}: -99999px;
|
54
|
-
position: absolute;
|
55
|
-
visibility: hidden;
|
56
|
-
}
|
57
|
-
|
58
|
-
.custom {
|
59
|
-
display: inline-block;
|
60
|
-
width: 16px;
|
61
|
-
height: 16px;
|
62
|
-
position: relative;
|
63
|
-
top: 2px;
|
64
|
-
border: solid 1px $custom-form-border-color;
|
65
|
-
background: $custom-form-bg;
|
66
|
-
|
67
|
-
&.radio { @include radius(1000px); }
|
68
|
-
|
69
|
-
&.checkbox {
|
70
|
-
&:before {
|
71
|
-
content: "";
|
72
|
-
display: block;
|
73
|
-
line-height: 0.8;
|
74
|
-
height: 14px;
|
75
|
-
width: 14px;
|
76
|
-
text-align: center;
|
77
|
-
position: absolute;
|
78
|
-
top: 0;
|
79
|
-
#{$default-float}: 0;
|
80
|
-
font-size: 14px;
|
81
|
-
color: #fff;
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
&.radio.checked {
|
86
|
-
&:before {
|
87
|
-
content: "";
|
88
|
-
display: block;
|
89
|
-
width: 8px;
|
90
|
-
height: 8px;
|
91
|
-
@include radius(1000px);
|
92
|
-
background: $custom-form-check-color;
|
93
|
-
position: relative;
|
94
|
-
top: 3px;
|
95
|
-
#{$default-float}: 3px;
|
96
|
-
}
|
97
|
-
}
|
98
|
-
|
99
|
-
&.checkbox.checked {
|
100
|
-
&:before {
|
101
|
-
content: "\00d7";
|
102
|
-
color: $custom-form-check-color;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
}
|
106
|
-
}
|
107
|
-
|
108
|
-
/* Custom Select Options and Dropdowns */
|
109
|
-
form.custom {
|
110
|
-
.custom.dropdown {
|
111
|
-
display: block;
|
112
|
-
position: relative;
|
113
|
-
top: 0;
|
114
|
-
height: $custom-select-height;
|
115
|
-
margin-bottom: $custom-select-margin-bottom;
|
116
|
-
margin-top: 0px;
|
117
|
-
padding: 0px;
|
118
|
-
width: 100%;
|
119
|
-
background: $custom-dropdown-bg;
|
120
|
-
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
121
|
-
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
122
|
-
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
123
|
-
-webkit-box-shadow: none;
|
124
|
-
box-shadow: none;
|
125
|
-
font-size: $custom-dropdown-font-size;
|
126
|
-
vertical-align: top;
|
127
|
-
|
128
|
-
ul {
|
129
|
-
overflow-y: auto;
|
130
|
-
max-height: $custom-dropdown-height;
|
131
|
-
}
|
132
|
-
|
133
|
-
.current {
|
134
|
-
cursor:default;
|
135
|
-
white-space: nowrap;
|
136
|
-
line-height: $custom-select-height - emCalc(1px);
|
137
|
-
color: $input-font-color;
|
138
|
-
text-decoration: none;
|
139
|
-
overflow: hidden;
|
140
|
-
display: block;
|
141
|
-
margin-#{$default-float}: $form-spacing / 2;
|
142
|
-
margin-#{$opposite-direction}: $custom-select-height;
|
143
|
-
}
|
144
|
-
|
145
|
-
.selector {
|
146
|
-
cursor:default;
|
147
|
-
position: absolute;
|
148
|
-
width: $form-spacing * 2.5;
|
149
|
-
height: $custom-select-height;
|
150
|
-
display: block;
|
151
|
-
#{$opposite-direction}: 0;
|
152
|
-
top: 0;
|
153
|
-
&:after {
|
154
|
-
content: "";
|
155
|
-
display: block;
|
156
|
-
@include css-triangle(5px, $custom-select-triangle-color, top);
|
157
|
-
position: absolute;
|
158
|
-
#{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
|
159
|
-
top: 50%;
|
160
|
-
margin-top: -3px;
|
161
|
-
}
|
162
|
-
}
|
163
|
-
|
164
|
-
&:hover, &.open {
|
165
|
-
a.selector {
|
166
|
-
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
|
167
|
-
}
|
168
|
-
}
|
169
|
-
|
170
|
-
.disabled {
|
171
|
-
color: $custom-select-disabled-color;
|
172
|
-
&:hover {
|
173
|
-
background: transparent;
|
174
|
-
color: $custom-select-disabled-color;
|
175
|
-
&:after { display: none; }
|
176
|
-
}
|
177
|
-
}
|
178
|
-
|
179
|
-
&.open ul {
|
180
|
-
display: block;
|
181
|
-
z-index: 10;
|
182
|
-
min-width:100%;
|
183
|
-
@include box-sizing(content-box);
|
184
|
-
}
|
185
|
-
|
186
|
-
&.small { max-width: $custom-dropdown-width-small; }
|
187
|
-
&.medium { max-width: $custom-dropdown-width-medium; }
|
188
|
-
&.large { max-width: $custom-dropdown-width-large; }
|
189
|
-
&.expand { width: 100% !important; }
|
190
|
-
|
191
|
-
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
192
|
-
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
193
|
-
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
194
|
-
}
|
195
|
-
|
196
|
-
.custom.dropdown ul {
|
197
|
-
position: absolute;
|
198
|
-
width: auto;
|
199
|
-
display: none;
|
200
|
-
margin: 0;
|
201
|
-
#{$default-float}: -$input-border-width;
|
202
|
-
top: $custom-dropdown-offset-top;
|
203
|
-
-webkit-box-shadow: $custom-dropdown-shadow;
|
204
|
-
box-shadow: $custom-dropdown-shadow;
|
205
|
-
margin: 0;
|
206
|
-
padding: 0;
|
207
|
-
background: $custom-dropdown-bg;
|
208
|
-
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
209
|
-
font-size: $em-base;
|
210
|
-
|
211
|
-
li {
|
212
|
-
color: $custom-dropdown-font-color;
|
213
|
-
font-size: $custom-dropdown-font-size;
|
214
|
-
cursor: default;
|
215
|
-
padding-top: $custom-dropdown-list-padding;
|
216
|
-
padding-bottom: $custom-dropdown-list-padding;
|
217
|
-
padding-#{$default-float}: $custom-dropdown-default-float-padding;
|
218
|
-
padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
|
219
|
-
min-height: $custom-dropdown-list-item-min-height;
|
220
|
-
line-height: $custom-dropdown-list-item-min-height;
|
221
|
-
margin: 0;
|
222
|
-
white-space: nowrap;
|
223
|
-
list-style: none;
|
224
|
-
|
225
|
-
&.selected {
|
226
|
-
background: $custom-dropdown-color-selected;
|
227
|
-
color: $custom-dropdown-font-color-selected;
|
228
|
-
}
|
229
|
-
&:hover {
|
230
|
-
background-color: darken($custom-dropdown-color-selected, 4%);
|
231
|
-
color: $custom-dropdown-font-color-selected;
|
232
|
-
}
|
233
|
-
&.selected:hover {
|
234
|
-
background: $custom-dropdown-color-selected;
|
235
|
-
cursor: default;
|
236
|
-
color: $custom-dropdown-font-color-selected;
|
237
|
-
}
|
238
|
-
}
|
239
|
-
|
240
|
-
&.show { display: block; }
|
241
|
-
}
|
242
|
-
|
243
|
-
/* Custom input, disabled */
|
244
|
-
.custom.disabled { background-color: $custom-form-bg-disabled; }
|
245
|
-
}
|
246
|
-
}
|