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.
Files changed (45) hide show
  1. checksums.yaml +8 -8
  2. data/demo/test/config.rb +26 -0
  3. data/lib/modularis/generators/install_generator.rb +1 -1
  4. data/lib/modularis/version.rb +1 -1
  5. data/templates/project/config.rb +32 -9
  6. metadata +3 -40
  7. data/scss/compagecss/components/_alert-boxes.scss +0 -106
  8. data/scss/compagecss/components/_block-grid.scss +0 -70
  9. data/scss/compagecss/components/_breadcrumbs.scss +0 -124
  10. data/scss/compagecss/components/_button-groups.scss +0 -88
  11. data/scss/compagecss/components/_buttons.scss +0 -226
  12. data/scss/compagecss/components/_clearing.scss +0 -217
  13. data/scss/compagecss/components/_custom-forms.scss +0 -246
  14. data/scss/compagecss/components/_dropdown-buttons.scss +0 -114
  15. data/scss/compagecss/components/_dropdown.scss +0 -149
  16. data/scss/compagecss/components/_flex-video.scss +0 -45
  17. data/scss/compagecss/components/_flexbox-grid.scss +0 -225
  18. data/scss/compagecss/components/_flip.scss +0 -105
  19. data/scss/compagecss/components/_forms.scss +0 -361
  20. data/scss/compagecss/components/_global.scss +0 -289
  21. data/scss/compagecss/components/_grid.scss +0 -184
  22. data/scss/compagecss/components/_inline-lists.scss +0 -52
  23. data/scss/compagecss/components/_joyride.scss +0 -210
  24. data/scss/compagecss/components/_keystrokes.scss +0 -56
  25. data/scss/compagecss/components/_labels.scss +0 -84
  26. data/scss/compagecss/components/_magellan.scss +0 -21
  27. data/scss/compagecss/components/_off-canvas.scss +0 -86
  28. data/scss/compagecss/components/_orbit.scss +0 -209
  29. data/scss/compagecss/components/_pagination.scss +0 -99
  30. data/scss/compagecss/components/_panels.scss +0 -76
  31. data/scss/compagecss/components/_pricing-tables.scss +0 -130
  32. data/scss/compagecss/components/_progress-bars.scss +0 -70
  33. data/scss/compagecss/components/_reveal.scss +0 -131
  34. data/scss/compagecss/components/_section.scss +0 -303
  35. data/scss/compagecss/components/_side-nav.scss +0 -68
  36. data/scss/compagecss/components/_split-buttons.scss +0 -166
  37. data/scss/compagecss/components/_sub-nav.scss +0 -67
  38. data/scss/compagecss/components/_switch.scss +0 -249
  39. data/scss/compagecss/components/_tables.scss +0 -80
  40. data/scss/compagecss/components/_thumbs.scss +0 -47
  41. data/scss/compagecss/components/_tooltips.scss +0 -113
  42. data/scss/compagecss/components/_top-bar.scss +0 -462
  43. data/scss/compagecss/components/_type.scss +0 -422
  44. data/scss/compagecss/components/_visibility.scss +0 -320
  45. /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(); }