magic_stylez 0.0.0.34 → 0.0.0.35
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 +4 -4
- data/lib/magic_stylez/version.rb +1 -1
- data/vendor/assets/stylesheets/corporate/_typo.scss +2 -0
- data/vendor/assets/stylesheets/corporate/_variables.scss +49 -0
- data/vendor/assets/stylesheets/magic/content/_box.scss +5 -5
- data/vendor/assets/stylesheets/magic/layout/_section.scss +78 -44
- data/vendor/assets/stylesheets/magic/lib/_text.scss +16 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 0c48ebc34cbdbc2a80b7cbba4df198811546871e
|
|
4
|
+
data.tar.gz: e236ae067acfb8e16001aa654526168a215f8f5d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 1c44c770a1e7099afcfa1afdedae5dcecdf4c851cabb624baebba94c41ac0cd63052dc73143cb3afe98b830750ccd5c66cc497b0a74a0073e7e5b70f8e341b4f
|
|
7
|
+
data.tar.gz: f9f30795b29dee4773fa911c77105de934820c1fc5aa8fbc4405f66b025bf6162c1779707d4563c043172dbc852da1afe04eeed32f65bd40292ab1de21cd1971
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -47,6 +47,55 @@ $border-radius-large: 6px !default;
|
|
|
47
47
|
$border-radius-small: 3px !default;
|
|
48
48
|
|
|
49
49
|
|
|
50
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
51
|
+
// Sections
|
|
52
|
+
//
|
|
53
|
+
|
|
54
|
+
// Padding
|
|
55
|
+
$section-padding: 50px !default;
|
|
56
|
+
$section-head-padding: 10px !default;
|
|
57
|
+
$section-compact-padding: 10px !default;
|
|
58
|
+
$section-flatted-padding: 30px !default;
|
|
59
|
+
$section-fat-padding: 80px !default;
|
|
60
|
+
$section-fatter-padding: 120px !default;
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
// Colors
|
|
65
|
+
$section-background: $main-bg !default;
|
|
66
|
+
$section-input-bg: $white !default;
|
|
67
|
+
|
|
68
|
+
$section-head-background: #fff !default;
|
|
69
|
+
$section-head-input-bg: $main-bg !default;
|
|
70
|
+
$section-head-color: $brand-color !default;
|
|
71
|
+
$section-head-small-color: $gray-light !default;
|
|
72
|
+
|
|
73
|
+
$section-dark-background: $dark-bg !default;
|
|
74
|
+
$section-dark-input-bg: $white !default;
|
|
75
|
+
|
|
76
|
+
$section-bright-background: $bright-bg !default;
|
|
77
|
+
$section-bright-input-bg: $main-bg !default;
|
|
78
|
+
|
|
79
|
+
$section-brand-background: $brand-bg !default;
|
|
80
|
+
$section-brand-input-bg: $white !default;
|
|
81
|
+
|
|
82
|
+
$section-soft-background: $soft-bg !default;
|
|
83
|
+
$section-soft-input-bg: $white !default;
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
$section-head-line-height: 30px !default;
|
|
87
|
+
$section-head-font-size: 20px !default;
|
|
88
|
+
|
|
89
|
+
// Reset margin of first and last childs, so section controls spacing
|
|
90
|
+
$section-reset-child-spacing: true !default;
|
|
91
|
+
$section-reset-row-child-spacing: true !default;
|
|
92
|
+
$section-reset-table-child-spacing: true !default;
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
50
99
|
//** Width of the `border` for generating carets that indicator dropdowns.
|
|
51
100
|
$caret-width-base: 4px !default;
|
|
52
101
|
//** Carets increase slightly in size for larger components.
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
.box {
|
|
7
7
|
margin: 0 0 20px; padding: 10px;
|
|
8
|
-
border: solid 1px
|
|
8
|
+
border: solid 1px $main-border-color;
|
|
9
9
|
@include border-radius(3px);
|
|
10
10
|
text-align: left;
|
|
11
11
|
background: #fff;
|
|
@@ -19,16 +19,16 @@
|
|
|
19
19
|
margin: 0 10px 0 -100px;
|
|
20
20
|
width: 100px;
|
|
21
21
|
float: left;
|
|
22
|
-
border: solid 1px
|
|
22
|
+
border: solid 1px $main-border-color;
|
|
23
23
|
}
|
|
24
24
|
& > .header {
|
|
25
25
|
padding: 5px 10px 5px;
|
|
26
|
-
border-bottom: solid 1px
|
|
26
|
+
border-bottom: solid 1px $main-border-color;
|
|
27
27
|
|
|
28
28
|
&, h1, h2, h3, h4, h5, h6, p, span, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|
29
29
|
margin: 0; padding: 0 5px 2px;
|
|
30
|
-
color:
|
|
31
|
-
line-height:
|
|
30
|
+
color: $brand-color;
|
|
31
|
+
line-height: 27px;
|
|
32
32
|
font-size: 18px;
|
|
33
33
|
}
|
|
34
34
|
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
.section {
|
|
2
2
|
display: block; position: relative;
|
|
3
3
|
margin: 0;
|
|
4
|
-
padding:
|
|
4
|
+
padding: $section-padding 0;
|
|
5
5
|
// background: $white;
|
|
6
|
-
background: $main-bg;
|
|
7
6
|
text-align: center;
|
|
8
7
|
z-index: 1;
|
|
9
8
|
font-size: $font-size-base;
|
|
10
9
|
.corset, .container { background: inherit; }
|
|
11
10
|
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
//
|
|
13
|
+
// Sections with shine
|
|
14
|
+
//
|
|
17
15
|
&.shine-top {
|
|
18
16
|
overflow: hidden;
|
|
19
17
|
&:before {
|
|
@@ -35,89 +33,97 @@
|
|
|
35
33
|
}
|
|
36
34
|
}
|
|
37
35
|
|
|
36
|
+
|
|
37
|
+
//
|
|
38
|
+
// Border Stylez
|
|
39
|
+
//
|
|
38
40
|
&.hard-top {
|
|
39
41
|
border-top: solid 1px $main-border-color;
|
|
40
42
|
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
41
43
|
}
|
|
44
|
+
&.hard-bottom {
|
|
45
|
+
border-bottom: solid 1px rgba(255,255,255,.75);
|
|
46
|
+
@include box-shadow( inset 0 -1px 1px 0 $main-border-color );
|
|
47
|
+
}
|
|
48
|
+
&.hard-top.hard-bottom {
|
|
49
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), inset 0 -1px 1px 0 $main-border-color );
|
|
50
|
+
}
|
|
42
51
|
|
|
43
52
|
&.dotted-top {
|
|
44
53
|
border-top: dotted 2px $gray-light;
|
|
45
54
|
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
46
55
|
}
|
|
56
|
+
&.dotted-bottom {
|
|
57
|
+
border-bottom: dotted 2px $gray-light;
|
|
58
|
+
@include box-shadow( 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
59
|
+
}
|
|
60
|
+
&.dotted-top, &.dotted-bottom {
|
|
61
|
+
@include box-shadow( inset 0 1px 1px 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(255,255,255,.75) );
|
|
62
|
+
}
|
|
47
63
|
|
|
48
64
|
|
|
49
|
-
|
|
65
|
+
//
|
|
66
|
+
// Section Sizes
|
|
67
|
+
//
|
|
68
|
+
&.compact { padding-top: $section-compact-padding; padding-bottom: $section-compact-padding; }
|
|
69
|
+
&.flatted, &.tight { padding-top: $section-flatted-padding; padding-bottom: $section-flatted-padding; }
|
|
50
70
|
|
|
51
|
-
&.
|
|
71
|
+
&.fat { padding-top: $section-fat-padding; padding-bottom: $section-fat-padding; }
|
|
72
|
+
&.fatter { padding-top: $section-fatter-padding; padding-bottom: $section-fatter-padding; }
|
|
52
73
|
|
|
53
|
-
|
|
74
|
+
&.flat { padding-top: 0; padding-bottom: 0; }
|
|
54
75
|
&.flat-top { padding-top: 0; }
|
|
55
76
|
&.flat-bottom { padding-bottom: 0; }
|
|
56
|
-
|
|
57
|
-
&.fat { padding-top: 80px; padding-bottom: 80px; }
|
|
58
|
-
&.fatter { padding-top: 120px; padding-bottom: 120px; }
|
|
59
77
|
|
|
60
|
-
|
|
61
|
-
|
|
78
|
+
|
|
79
|
+
//
|
|
80
|
+
// Section Colors
|
|
81
|
+
//
|
|
82
|
+
background: $section-background;
|
|
83
|
+
@include all_form_elements { background: $section-input-bg; }
|
|
62
84
|
|
|
63
85
|
&.dark {
|
|
64
|
-
background: $dark-
|
|
86
|
+
background: $section-dark-background;
|
|
65
87
|
.three-previews .preview { border-color: $main-border-color; }
|
|
66
|
-
@include all_form_elements { background: $
|
|
88
|
+
@include all_form_elements { background: $section-dark-input-bg; }
|
|
67
89
|
}
|
|
68
90
|
&.bright {
|
|
69
|
-
background: $bright-
|
|
70
|
-
@include all_form_elements { background: $
|
|
91
|
+
background: $section-bright-background;
|
|
92
|
+
@include all_form_elements { background: $section-bright-input-bg; }
|
|
71
93
|
}
|
|
72
94
|
&.brand {
|
|
73
|
-
background: $brand-
|
|
74
|
-
@include all_form_elements { background: $
|
|
95
|
+
background: $section-brand-background;
|
|
96
|
+
@include all_form_elements { background: $section-brand-input-bg; }
|
|
75
97
|
}
|
|
76
98
|
&.soft {
|
|
77
|
-
background: $soft-
|
|
78
|
-
@include all_form_elements { background: $
|
|
99
|
+
background: $section-soft-background;
|
|
100
|
+
@include all_form_elements { background: $section-soft-input-bg; }
|
|
79
101
|
}
|
|
80
102
|
&.blank { background: transparent; }
|
|
81
103
|
|
|
82
104
|
&.head {
|
|
83
105
|
z-index: 2;
|
|
84
|
-
background:
|
|
85
|
-
padding:
|
|
106
|
+
background: $section-head-background;
|
|
107
|
+
padding: $section-head-padding 0;
|
|
86
108
|
h1, h2, .h1, .h2 {
|
|
87
109
|
margin: 0; padding: 0;
|
|
88
|
-
line-height:
|
|
89
|
-
font-size:
|
|
110
|
+
line-height: $section-head-line-height;
|
|
111
|
+
font-size: $section-head-font-size;
|
|
90
112
|
color: $brand-color;
|
|
91
113
|
text-align: left;
|
|
92
|
-
small { color:
|
|
114
|
+
small { color: $section-head-small-color; }
|
|
93
115
|
}
|
|
116
|
+
@include all_form_elements { background: $section-head-input-bg; }
|
|
94
117
|
}
|
|
95
118
|
|
|
96
119
|
|
|
97
120
|
|
|
98
|
-
|
|
99
|
-
// kill margin of child elements, to avoid unwanted sizing
|
|
100
|
-
&, & > .corset, & > .container {
|
|
101
|
-
& > *, & > .row, & > .row > *, & > .row > * > *, & > .layout-table > * > *, & > .inline_table > * > * {
|
|
102
|
-
&:first-child { margin-top: 0; }
|
|
103
|
-
&:last-child { margin-bottom: 0; }
|
|
104
|
-
}
|
|
105
|
-
.row:first-child > * { margin-top: 0; padding-top: 0; }
|
|
106
|
-
.row:last-child > * { margin-bottom: 0; padding-bottom: 0; }
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
110
121
|
}
|
|
111
122
|
|
|
112
123
|
|
|
113
124
|
|
|
114
125
|
|
|
115
126
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
127
|
@media only screen and (min-width: 760px) {
|
|
122
128
|
|
|
123
129
|
|
|
@@ -127,6 +133,34 @@
|
|
|
127
133
|
@include horizontal-margin( auto );
|
|
128
134
|
width: 50%;
|
|
129
135
|
}
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
// kill margin of child elements, to avoid unwanted sizing
|
|
141
|
+
&, & > .corset, & > .container {
|
|
142
|
+
@if $section-reset-child-spacing == true {
|
|
143
|
+
& > * {
|
|
144
|
+
&:first-child { margin-top: 0; }
|
|
145
|
+
&:last-child { margin-bottom: 0; }
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
@if $section-reset-row-child-spacing == true {
|
|
149
|
+
& > *, & > .row, & > .row > *, & > .row > * > * {
|
|
150
|
+
&:first-child { margin-top: 0; }
|
|
151
|
+
&:last-child { margin-bottom: 0; }
|
|
152
|
+
}
|
|
153
|
+
& > .row:first-child > * { margin-top: 0; padding-top: 0; }
|
|
154
|
+
& > .row:last-child > * { margin-bottom: 0; padding-bottom: 0; }
|
|
155
|
+
@if $section-reset-table-child-spacing == true {
|
|
156
|
+
& > .layout-table > * > *, & > .inline_table > * > * {
|
|
157
|
+
&:first-child { margin-top: 0; }
|
|
158
|
+
&:last-child { margin-bottom: 0; }
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
|
|
130
164
|
}
|
|
131
165
|
|
|
132
166
|
}
|
|
@@ -38,4 +38,19 @@
|
|
|
38
38
|
0px -1px #{$blur} #{$color},
|
|
39
39
|
-1px 0px #{$blur} #{$color},
|
|
40
40
|
1px -1px #{$blur} #{$color};
|
|
41
|
-
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin text_tags {
|
|
44
|
+
h1, h2, h3, h4, h5, h6,
|
|
45
|
+
.h1, .h2, .h3, .h4, .h5, .h6,
|
|
46
|
+
p, span, a {
|
|
47
|
+
@content;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
@mixin text-tags {
|
|
51
|
+
h1, h2, h3, h4, h5, h6,
|
|
52
|
+
.h1, .h2, .h3, .h4, .h5, .h6,
|
|
53
|
+
p, span, a {
|
|
54
|
+
@content;
|
|
55
|
+
}
|
|
56
|
+
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: magic_stylez
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.0.
|
|
4
|
+
version: 0.0.0.35
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-
|
|
11
|
+
date: 2014-07-01 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|