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,114 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Dropdown Button Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to set the color of the pip in dropdown buttons
|
6
|
-
$dropdown-button-pip-color: #fff !default;
|
7
|
-
$dropdown-button-pip-color-alt: #333 !default;
|
8
|
-
|
9
|
-
// We use these to style tiny dropdown buttons
|
10
|
-
$dropdown-button-padding-tny: $button-tny * 5 !default;
|
11
|
-
$dropdown-button-pip-size-tny: $button-tny !default;
|
12
|
-
$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
|
13
|
-
$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
|
14
|
-
|
15
|
-
// We use these to style small dropdown buttons
|
16
|
-
$dropdown-button-padding-sml: $button-sml * 5 !default;
|
17
|
-
$dropdown-button-pip-size-sml: $button-sml !default;
|
18
|
-
$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
|
19
|
-
$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
|
20
|
-
|
21
|
-
// We use these to style medium dropdown buttons
|
22
|
-
$dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
|
23
|
-
$dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
|
24
|
-
$dropdown-button-pip-opposite-med: $button-med * 2 !default;
|
25
|
-
$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
|
26
|
-
|
27
|
-
// We use these to style large dropdown buttons
|
28
|
-
$dropdown-button-padding-lrg: $button-lrg * 4 !default;
|
29
|
-
$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
30
|
-
$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
|
31
|
-
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
|
32
|
-
|
33
|
-
//
|
34
|
-
// Dropdown Button Mixin
|
35
|
-
//
|
36
|
-
|
37
|
-
// We use this mixin to build off of the button mixin and add dropdown button styles
|
38
|
-
@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
|
39
|
-
|
40
|
-
// We add in base styles, but they can be negated by setting to 'false'.
|
41
|
-
@if $base-style {
|
42
|
-
position: relative;
|
43
|
-
|
44
|
-
// This creates the base styles for the triangle pip
|
45
|
-
&:before {
|
46
|
-
position: absolute;
|
47
|
-
content: "";
|
48
|
-
width: 0;
|
49
|
-
height: 0;
|
50
|
-
display: block;
|
51
|
-
border-style: solid;
|
52
|
-
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
53
|
-
top: 50%;
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
// If we're dealing with tiny buttons, use these styles
|
58
|
-
@if $padding == tiny {
|
59
|
-
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
60
|
-
&:before {
|
61
|
-
border-width: $dropdown-button-pip-size-tny;
|
62
|
-
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
63
|
-
margin-top: $dropdown-button-pip-top-tny;
|
64
|
-
}
|
65
|
-
}
|
66
|
-
|
67
|
-
// If we're dealing with small buttons, use these styles
|
68
|
-
@if $padding == small {
|
69
|
-
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
70
|
-
&:before {
|
71
|
-
border-width: $dropdown-button-pip-size-sml;
|
72
|
-
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
73
|
-
margin-top: $dropdown-button-pip-top-sml;
|
74
|
-
}
|
75
|
-
}
|
76
|
-
|
77
|
-
// If we're dealing with default (medium) buttons, use these styles
|
78
|
-
@if $padding == medium {
|
79
|
-
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
80
|
-
&:before {
|
81
|
-
border-width: $dropdown-button-pip-size-med;
|
82
|
-
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
83
|
-
margin-top: $dropdown-button-pip-top-med;
|
84
|
-
}
|
85
|
-
}
|
86
|
-
|
87
|
-
// If we're dealing with large buttons, use these styles
|
88
|
-
@if $padding == large {
|
89
|
-
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
90
|
-
&:before {
|
91
|
-
border-width: $dropdown-button-pip-size-lrg;
|
92
|
-
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
93
|
-
margin-top: $dropdown-button-pip-top-lrg;
|
94
|
-
}
|
95
|
-
}
|
96
|
-
|
97
|
-
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
98
|
-
@if $pip-color {
|
99
|
-
&:before { border-color: $pip-color transparent transparent transparent; }
|
100
|
-
}
|
101
|
-
}
|
102
|
-
|
103
|
-
|
104
|
-
@if $include-html-button-classes != false {
|
105
|
-
|
106
|
-
/* Dropdown Button */
|
107
|
-
.dropdown.button { @include dropdown-button;
|
108
|
-
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
109
|
-
&.small { @include dropdown-button(small,$base-style:false); }
|
110
|
-
&.large { @include dropdown-button(large,$base-style:false); }
|
111
|
-
&.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
112
|
-
}
|
113
|
-
|
114
|
-
}
|
@@ -1,149 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Dropdown Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to controls height and width styles.
|
6
|
-
$f-dropdown-max-width: 200px !default;
|
7
|
-
$f-dropdown-height: auto !default;
|
8
|
-
$f-dropdown-max-height: none !default;
|
9
|
-
$f-dropdown-margin-top: 2px !default;
|
10
|
-
|
11
|
-
// We use this to control the background color
|
12
|
-
$f-dropdown-bg: #fff !default;
|
13
|
-
|
14
|
-
// We use this to set the border styles for dropdowns.
|
15
|
-
$f-dropdown-border-style: solid !default;
|
16
|
-
$f-dropdown-border-width: 1px !default;
|
17
|
-
$f-dropdown-border-color: darken(#fff, 20%) !default;
|
18
|
-
|
19
|
-
// We use these to style the triangle pip.
|
20
|
-
$f-dropdown-triangle-size: 6px !default;
|
21
|
-
$f-dropdown-triangle-color: #fff !default;
|
22
|
-
$f-dropdown-triangle-side-offset: 10px !default;
|
23
|
-
|
24
|
-
// We use these to control styles for the list elements.
|
25
|
-
$f-dropdown-list-style: none !default;
|
26
|
-
$f-dropdown-font-color: #555 !default;
|
27
|
-
$f-dropdown-font-size: emCalc(14px) !default;
|
28
|
-
$f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
|
29
|
-
$f-dropdown-line-height: emCalc(18px) !default;
|
30
|
-
$f-dropdown-list-hover-bg: #eeeeee !default;
|
31
|
-
$dropdown-mobile-default-float: 0 !default;
|
32
|
-
|
33
|
-
// We use this to control the styles for when the dropdown has custom content.
|
34
|
-
$f-dropdown-content-padding: emCalc(20px) !default;
|
35
|
-
|
36
|
-
//
|
37
|
-
// Dropdown Mixins
|
38
|
-
//
|
39
|
-
|
40
|
-
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
41
|
-
|
42
|
-
// We use this to style the dropdown container element.
|
43
|
-
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
44
|
-
position: absolute;
|
45
|
-
top: -9999px;
|
46
|
-
list-style: $f-dropdown-list-style;
|
47
|
-
|
48
|
-
*:first-child { margin-top: 0; }
|
49
|
-
*:last-child { margin-bottom: 0; }
|
50
|
-
|
51
|
-
@if $content == list {
|
52
|
-
width: 100%;
|
53
|
-
max-height: $f-dropdown-max-height;
|
54
|
-
height: $f-dropdown-height;
|
55
|
-
background: $f-dropdown-bg;
|
56
|
-
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
57
|
-
font-size: $em-base;
|
58
|
-
z-index: 99;
|
59
|
-
}
|
60
|
-
@else if $content == content {
|
61
|
-
padding: $f-dropdown-content-padding;
|
62
|
-
width: 100%;
|
63
|
-
height: $f-dropdown-height;
|
64
|
-
max-height: $f-dropdown-max-height;
|
65
|
-
background: $f-dropdown-bg;
|
66
|
-
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
67
|
-
font-size: $em-base;
|
68
|
-
z-index: 99;
|
69
|
-
}
|
70
|
-
|
71
|
-
@if $triangle {
|
72
|
-
margin-top: $f-dropdown-margin-top;
|
73
|
-
|
74
|
-
&:before {
|
75
|
-
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
76
|
-
position: absolute;
|
77
|
-
top: -($f-dropdown-triangle-size * 2);
|
78
|
-
#{$default-float}: $f-dropdown-triangle-side-offset;
|
79
|
-
z-index: 99;
|
80
|
-
}
|
81
|
-
&:after {
|
82
|
-
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
|
83
|
-
position: absolute;
|
84
|
-
top: -(($f-dropdown-triangle-size + 1) * 2);
|
85
|
-
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
86
|
-
z-index: 98;
|
87
|
-
}
|
88
|
-
|
89
|
-
&.right:before {
|
90
|
-
left: auto;
|
91
|
-
right: $f-dropdown-triangle-side-offset;
|
92
|
-
}
|
93
|
-
&.right:after {
|
94
|
-
left: auto;
|
95
|
-
right: $f-dropdown-triangle-side-offset - 1;
|
96
|
-
}
|
97
|
-
}
|
98
|
-
|
99
|
-
@if $max-width { max-width: $max-width; }
|
100
|
-
@else { max-width: $f-dropdown-max-width; }
|
101
|
-
|
102
|
-
}
|
103
|
-
|
104
|
-
// We use this to style the list elements or content inside the dropdown.
|
105
|
-
@mixin dropdown-style {
|
106
|
-
font-size: $f-dropdown-font-size;
|
107
|
-
cursor: pointer;
|
108
|
-
|
109
|
-
line-height: $f-dropdown-line-height;
|
110
|
-
margin: 0;
|
111
|
-
|
112
|
-
&:hover,
|
113
|
-
&:focus { background: $f-dropdown-list-hover-bg; }
|
114
|
-
|
115
|
-
a {
|
116
|
-
display: block;
|
117
|
-
padding: $f-dropdown-list-padding;
|
118
|
-
color: $f-dropdown-font-color;
|
119
|
-
}
|
120
|
-
}
|
121
|
-
|
122
|
-
|
123
|
-
@if $include-html-nav-classes != false {
|
124
|
-
|
125
|
-
@media only screen and (max-width: 767px) {
|
126
|
-
.f-dropdown {
|
127
|
-
max-width: 100%;
|
128
|
-
#{$default-float}: $dropdown-mobile-default-float;
|
129
|
-
}
|
130
|
-
}
|
131
|
-
|
132
|
-
/* Modularis Dropdowns */
|
133
|
-
.f-dropdown {
|
134
|
-
@include dropdown-container(content);
|
135
|
-
// max-width: none;
|
136
|
-
|
137
|
-
li { @include dropdown-style; }
|
138
|
-
|
139
|
-
// You can also put custom content in these dropdowns
|
140
|
-
&.content { @include dropdown-container(content, $triangle:false); }
|
141
|
-
|
142
|
-
// Sizes
|
143
|
-
&.tiny { max-width: 200px; }
|
144
|
-
&.small { max-width: 300px; }
|
145
|
-
&.medium { max-width: 500px; }
|
146
|
-
&.large { max-width: 800px; }
|
147
|
-
}
|
148
|
-
|
149
|
-
}
|
@@ -1,45 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Flex Video Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use these to control video container padding and margins
|
6
|
-
$flex-video-padding-top: emCalc(25px) !default;
|
7
|
-
$flex-video-padding-bottom: 67.5% !default;
|
8
|
-
$flex-video-margin-bottom: emCalc(16px) !default;
|
9
|
-
|
10
|
-
// We use this to control widescreen bottom padding
|
11
|
-
$flex-video-widescreen-padding-bottom: 57.25% !default;
|
12
|
-
|
13
|
-
//
|
14
|
-
// Flex Video Mixins
|
15
|
-
//
|
16
|
-
|
17
|
-
@mixin flex-video-container {
|
18
|
-
position: relative;
|
19
|
-
padding-top: $flex-video-padding-top;
|
20
|
-
padding-bottom: $flex-video-padding-bottom;
|
21
|
-
height: 0;
|
22
|
-
margin-bottom: $flex-video-margin-bottom;
|
23
|
-
overflow: hidden;
|
24
|
-
|
25
|
-
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
|
26
|
-
&.vimeo { padding-top: 0; }
|
27
|
-
|
28
|
-
iframe,
|
29
|
-
object,
|
30
|
-
embed,
|
31
|
-
video {
|
32
|
-
position: absolute;
|
33
|
-
top: 0;
|
34
|
-
#{$default-float}: 0;
|
35
|
-
width: 100%;
|
36
|
-
height: 100%;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
@if $include-html-media-classes != false {
|
41
|
-
|
42
|
-
/* Flex Video */
|
43
|
-
.flex-video { @include flex-video-container; }
|
44
|
-
|
45
|
-
}
|
@@ -1,225 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Grid Variables
|
3
|
-
//
|
4
|
-
$row-width: emCalc(1000px) !default;
|
5
|
-
$column-gutter: emCalc(30px) !default;
|
6
|
-
$total-columns: 12 !default;
|
7
|
-
|
8
|
-
//
|
9
|
-
// Grid Function
|
10
|
-
//
|
11
|
-
|
12
|
-
@function gridCalc($colNumber, $totalColumns) {
|
13
|
-
@return percentage(($colNumber / $totalColumns));
|
14
|
-
}
|
15
|
-
|
16
|
-
//
|
17
|
-
// Grid Mixins
|
18
|
-
//
|
19
|
-
|
20
|
-
// For creating container, nested, and collapsed rows.
|
21
|
-
@mixin grid-row($behavior: false, $direction: standard) {
|
22
|
-
|
23
|
-
display: -ms-flexbox;
|
24
|
-
-ms-box-orient: horizontal;
|
25
|
-
|
26
|
-
display: -webkit-flex;
|
27
|
-
display: -moz-flex;
|
28
|
-
display: -ms-flex;
|
29
|
-
display: flex;
|
30
|
-
|
31
|
-
-webkit-flex-flow: row wrap;
|
32
|
-
-moz-flex-flow: row wrap;
|
33
|
-
-ms-flex-flow: row wrap;
|
34
|
-
flex-flow: row wrap;
|
35
|
-
|
36
|
-
// use @include grid-row($direction: reverse); to order columns in reverse
|
37
|
-
// use @include grid-row($direction: stack); to order columns vertically
|
38
|
-
// use @include grid-row($direction: reverse-stack); to order columns vertically in reverse
|
39
|
-
@if $direction == reverse {
|
40
|
-
-webkit-flex-direction: row-reverse;
|
41
|
-
flex-direction: row-reverse;
|
42
|
-
} @else if $direction == stack {
|
43
|
-
-webkit-flex-direction: column;
|
44
|
-
flex-direction: column;
|
45
|
-
} @else if $direction == reverse-stack {
|
46
|
-
-webkit-flex-direction: column-reverse;
|
47
|
-
flex-direction: column-reverse;
|
48
|
-
}
|
49
|
-
|
50
|
-
// use @include grid-row(nest); to include a nested row
|
51
|
-
@if $behavior == nest {
|
52
|
-
width: auto;
|
53
|
-
margin-#{$default-float}: -($column-gutter/2);
|
54
|
-
margin-#{$opposite-direction}: -($column-gutter/2);
|
55
|
-
margin-top: 0;
|
56
|
-
margin-bottom: 0;
|
57
|
-
max-width: none;
|
58
|
-
}
|
59
|
-
|
60
|
-
// use @include grid-row(collapse); to collapsed a container row margins
|
61
|
-
@else if $behavior == collapse {
|
62
|
-
width: 100%;
|
63
|
-
margin: 0;
|
64
|
-
max-width: $row-width;
|
65
|
-
}
|
66
|
-
|
67
|
-
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
68
|
-
@else if $behavior == nest-collapse {
|
69
|
-
width: auto;
|
70
|
-
margin: 0;
|
71
|
-
max-width: none;
|
72
|
-
}
|
73
|
-
|
74
|
-
// use @include grid-row; to use a container row
|
75
|
-
@else {
|
76
|
-
width: 100%;
|
77
|
-
margin-#{$default-float}: auto;
|
78
|
-
margin-#{$opposite-direction}: auto;
|
79
|
-
margin-top: 0;
|
80
|
-
margin-bottom: 0;
|
81
|
-
max-width: $row-width;
|
82
|
-
}
|
83
|
-
|
84
|
-
// Clearfix for all rows
|
85
|
-
// @include clearfix();
|
86
|
-
|
87
|
-
}
|
88
|
-
|
89
|
-
|
90
|
-
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
91
|
-
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
|
92
|
-
|
93
|
-
position: relative;
|
94
|
-
|
95
|
-
// If collapsed, get rid of gutter padding
|
96
|
-
@if $collapse {
|
97
|
-
padding-left: 0;
|
98
|
-
padding-right: 0;
|
99
|
-
}
|
100
|
-
|
101
|
-
// Gutter padding whenever a column isn't set to collapse
|
102
|
-
// (use $collapse:null to do nothing)
|
103
|
-
@else if $collapse == false {
|
104
|
-
padding-left: $column-gutter / 2;
|
105
|
-
padding-right: $column-gutter / 2;
|
106
|
-
}
|
107
|
-
|
108
|
-
// If a column number is given, calculate width
|
109
|
-
@if $columns {
|
110
|
-
width: gridCalc($columns, $total-columns);
|
111
|
-
|
112
|
-
// If last column, float naturally instead of to the right, jms: NA for flexbox
|
113
|
-
// @if $last-column { float: $opposite-direction; }
|
114
|
-
}
|
115
|
-
|
116
|
-
// If offset, calculate appropriate margins
|
117
|
-
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
118
|
-
|
119
|
-
// Source Ordering, adds left/right depending on which you use.
|
120
|
-
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
121
|
-
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
122
|
-
|
123
|
-
// If centered, get rid of float and add appropriate margins
|
124
|
-
@if $center {
|
125
|
-
margin-#{$default-float}: auto;
|
126
|
-
margin-#{$opposite-direction}: auto;
|
127
|
-
// float: none !important;
|
128
|
-
}
|
129
|
-
|
130
|
-
// jms: NA for flexbox
|
131
|
-
// @if $float {
|
132
|
-
// @if $float == left or $float == true { float: $default-float; }
|
133
|
-
// @else if $float == right { float: $opposite-direction; }
|
134
|
-
// @else { float: none; }
|
135
|
-
// }
|
136
|
-
|
137
|
-
}
|
138
|
-
|
139
|
-
|
140
|
-
/* Grid HTML Classes */
|
141
|
-
@if $include-html-grid-classes != false {
|
142
|
-
|
143
|
-
.row {
|
144
|
-
@include grid-row;
|
145
|
-
|
146
|
-
&.flip { @include grid-row($direction:reverse); }
|
147
|
-
&.stack { @include grid-row($direction:stack);
|
148
|
-
&.flip { @include grid-row($direction:reverse-stack); }
|
149
|
-
}
|
150
|
-
|
151
|
-
&.collapse {
|
152
|
-
.column,
|
153
|
-
.columns { @include grid-column($collapse:true); }
|
154
|
-
}
|
155
|
-
|
156
|
-
.row { @include grid-row($behavior:nest);
|
157
|
-
&.collapse { @include grid-row($behavior:nest-collapse); }
|
158
|
-
}
|
159
|
-
}
|
160
|
-
|
161
|
-
.column,
|
162
|
-
.columns { @include grid-column($columns:$total-columns); }
|
163
|
-
|
164
|
-
@media only screen {
|
165
|
-
|
166
|
-
.column,
|
167
|
-
.columns { @include grid-column($columns:false); }
|
168
|
-
|
169
|
-
@for $i from 1 through $total-columns {
|
170
|
-
.small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
171
|
-
}
|
172
|
-
|
173
|
-
@for $i from 1 through $total-columns {
|
174
|
-
.row.stack .small#{-$i} { @include grid-column($columns: 12); }
|
175
|
-
}
|
176
|
-
|
177
|
-
@for $i from 1 through $total-columns - 2 {
|
178
|
-
.small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
179
|
-
}
|
180
|
-
|
181
|
-
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
182
|
-
[class*="column"] + [class*="column"].end { float: $default-float; }
|
183
|
-
|
184
|
-
.column.small-centered,
|
185
|
-
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
186
|
-
}
|
187
|
-
|
188
|
-
/* Styles for screens that are atleast 768px; */
|
189
|
-
@media #{$small} {
|
190
|
-
|
191
|
-
@for $i from 1 through $total-columns {
|
192
|
-
.large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
193
|
-
}
|
194
|
-
|
195
|
-
@for $i from 1 through $total-columns {
|
196
|
-
.row.stack .large#{-$i} { @include grid-column($columns: 12); }
|
197
|
-
}
|
198
|
-
|
199
|
-
@for $i from 1 through $total-columns - 1 {
|
200
|
-
.row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
201
|
-
}
|
202
|
-
|
203
|
-
@for $i from 1 through $total-columns - 1 {
|
204
|
-
.push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
205
|
-
.pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
206
|
-
}
|
207
|
-
|
208
|
-
@for $i from 1 through $total-columns - 1 {
|
209
|
-
.small-push#{-$i} { #{$default-float}: inherit; }
|
210
|
-
.small-pull#{-$i} { #{$opposite-direction}: inherit; }
|
211
|
-
}
|
212
|
-
|
213
|
-
.column.small-centered,
|
214
|
-
.columns.small-centered {
|
215
|
-
margin-#{$default-float}: 0;
|
216
|
-
margin-#{$opposite-direction}: 0;
|
217
|
-
float: none !important;
|
218
|
-
}
|
219
|
-
|
220
|
-
.column.large-centered,
|
221
|
-
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
222
|
-
|
223
|
-
}
|
224
|
-
|
225
|
-
}
|
@@ -1,105 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Cards Mixin
|
3
|
-
//
|
4
|
-
|
5
|
-
@mixin flip-object ($perspective: 5000, $ratioX: false, $ratioY: false, $clip-back: false, $flip-axis: y, $container: ".container", $front: ".front", $back: ".back", $flip-target: "a.flip-this") {
|
6
|
-
|
7
|
-
position: relative;
|
8
|
-
padding: 0; margin: 0;
|
9
|
-
|
10
|
-
$y-flip: 1;
|
11
|
-
$x-flip: 0;
|
12
|
-
|
13
|
-
@if $flip-axis == x {
|
14
|
-
$y-flip: 0;
|
15
|
-
$x-flip: 1;
|
16
|
-
}
|
17
|
-
|
18
|
-
-webkit-perspective: $perspective;
|
19
|
-
perspective: $perspective;
|
20
|
-
|
21
|
-
#{$container} {
|
22
|
-
|
23
|
-
-webkit-transform-style: preserve-3d;
|
24
|
-
transform-style: preserve-3d;
|
25
|
-
-webkit-transition: 0.6s;
|
26
|
-
transition: 0.6s;
|
27
|
-
|
28
|
-
#{$front}, #{$back} {
|
29
|
-
width: 100%;
|
30
|
-
|
31
|
-
-webkit-backface-visibility: hidden;
|
32
|
-
backface-visibility: hidden;
|
33
|
-
|
34
|
-
.row, .column, .columns {
|
35
|
-
-webkit-backface-visibility: hidden;
|
36
|
-
backface-visibility: hidden;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
#{$front} {
|
41
|
-
z-index: 2;
|
42
|
-
}
|
43
|
-
|
44
|
-
#{$back} {
|
45
|
-
position: absolute;
|
46
|
-
height: 100%;
|
47
|
-
left: 0; top: 0;
|
48
|
-
|
49
|
-
@if $clip-back {
|
50
|
-
overflow-y: scroll;
|
51
|
-
}
|
52
|
-
|
53
|
-
@if $flip-axis == y {
|
54
|
-
-webkit-transform: rotateY(180deg);
|
55
|
-
transform: rotateY(180deg);
|
56
|
-
} @else if $flip-axis == x {
|
57
|
-
-webkit-transform: rotateX(180deg);
|
58
|
-
transform: rotateX(180deg);
|
59
|
-
}
|
60
|
-
}
|
61
|
-
|
62
|
-
//Ratio detection and settings
|
63
|
-
@if ($ratioX != false) and ($ratioY != false) {
|
64
|
-
|
65
|
-
width: 100%; height: 0;
|
66
|
-
padding-bottom: percentage($ratioY / $ratioX);
|
67
|
-
|
68
|
-
}
|
69
|
-
|
70
|
-
//Detect a link to flip back and forth, or flip on hover
|
71
|
-
@if $flip-target {
|
72
|
-
&.active {
|
73
|
-
-webkit-transform: rotate3d($x-flip,$y-flip,0,180deg);
|
74
|
-
transform: rotate3d($x-flip,$y-flip,0,180deg);
|
75
|
-
}
|
76
|
-
} @else {
|
77
|
-
&:hover {
|
78
|
-
-webkit-transform: rotate3d($x-flip,$y-flip,0,180deg);
|
79
|
-
transform: rotate3d($x-flip,$y-flip,0,180deg);
|
80
|
-
}
|
81
|
-
}
|
82
|
-
|
83
|
-
}
|
84
|
-
}
|
85
|
-
|
86
|
-
@mixin flip-card-style($padding: 1em, $border-color: #eee, $border-width: 1px, $container: ".container", $front: ".front", $back: ".back") {
|
87
|
-
|
88
|
-
#{$container} {
|
89
|
-
|
90
|
-
border: solid $border-width $border-color;
|
91
|
-
|
92
|
-
#{$front}, #{$back} { padding: $padding; }
|
93
|
-
|
94
|
-
}
|
95
|
-
|
96
|
-
}
|
97
|
-
|
98
|
-
|
99
|
-
//
|
100
|
-
// Default CSS Classes
|
101
|
-
//
|
102
|
-
|
103
|
-
.flip { @include flip-object(); }
|
104
|
-
.card { @include flip-object($flip-target: false, $clip-back: true); @include flip-card-style(); }
|
105
|
-
.card.square { @include flip-object($flip-target: false, $clip-back: true, $ratioX: 1, $ratioY: 1); @include flip-card-style(); }
|