magic_stylez 0.0.0.34 → 0.0.0.35
Sign up to get free protection for your applications and to get access to all the features.
- 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
|