magic_stylez 0.0.0.83 → 0.0.0.84
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/_fonts.scss +6 -1
- data/vendor/assets/stylesheets/corporate/_variables.scss +7 -0
- data/vendor/assets/stylesheets/magic/content/_buttons.scss +12 -5
- data/vendor/assets/stylesheets/magic/content/_inputs.scss +14 -2
- data/vendor/assets/stylesheets/magic/lib/_helper.scss +0 -10
- data/vendor/assets/stylesheets/magic/lib/_text.scss +63 -28
- metadata +3 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7662f2ccce8cfaa57cd2a841da826e52de08a589
|
|
4
|
+
data.tar.gz: 7d96bcdd91b00fc41c70cae5de0b04c268dfde50
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 08cb8644536c326033e09e5e75f1c4e90d7056574065ef8dc00c5885f456e9e46ed2a6ee7e5b550a26acc50fb1e149a7655ec5505b3b7cd66295174af411ad9a
|
|
7
|
+
data.tar.gz: ed3ae039f4f90fc3500a7c554efe64792bce0dbe255f75452dd24e796c95a0d1b08e32c6cc182e757c09c1f792a7853903495424bed05d74d921228cf272244a
|
data/lib/magic_stylez/version.rb
CHANGED
|
@@ -55,8 +55,10 @@ $headings-font-family: $bigFont !default;
|
|
|
55
55
|
// F O N T - S I Z E S
|
|
56
56
|
//
|
|
57
57
|
$font-size-base: 15px !default;
|
|
58
|
+
$font-size-xl: ceil(($font-size-base * 1.5)) !default; // ~22px
|
|
58
59
|
$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
|
|
59
60
|
$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
|
|
61
|
+
$font-size-xs: ceil(($font-size-base * 0.75)) !default; // ~10px
|
|
60
62
|
|
|
61
63
|
$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
|
|
62
64
|
$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
|
|
@@ -78,14 +80,17 @@ $louder-factor: 1.75 !default;
|
|
|
78
80
|
//
|
|
79
81
|
//** Unit-less `line-height` for use in components like buttons.
|
|
80
82
|
$line-height-base: 1.428571429 !default; // 20/14
|
|
83
|
+
$line-height-xl: 1.2 !default;
|
|
81
84
|
$line-height-large: 1.33 !default;
|
|
82
85
|
$line-height-small: 1.5 !default;
|
|
86
|
+
$line-height-xs: 1.5 !default;
|
|
83
87
|
|
|
84
88
|
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
|
|
85
89
|
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
|
|
90
|
+
$line-height-computed-xl: floor(($font-size-xl * $line-height-xl)) !default; // ~20px
|
|
86
91
|
$line-height-computed-lg: floor(($font-size-large * $line-height-large)) !default; // ~20px
|
|
87
92
|
$line-height-computed-sm: floor(($font-size-small * $line-height-small)) !default; // ~20px
|
|
88
|
-
$line-height-computed-xs: floor(($font-size-
|
|
93
|
+
$line-height-computed-xs: floor(($font-size-xs * $line-height-xs)) !default; // ~20px
|
|
89
94
|
//== Headings
|
|
90
95
|
$headings-line-height: 1.1 !default;
|
|
91
96
|
|
|
@@ -33,6 +33,9 @@ $icon-font-svg-id: "glyphicons_halflingsregular" !default;
|
|
|
33
33
|
$padding-base-vertical: 6px !default;
|
|
34
34
|
$padding-base-horizontal: 12px !default;
|
|
35
35
|
|
|
36
|
+
$padding-xl-vertical: 15px !default;
|
|
37
|
+
$padding-xl-horizontal: 22px !default;
|
|
38
|
+
|
|
36
39
|
$padding-large-vertical: 10px !default;
|
|
37
40
|
$padding-large-horizontal: 16px !default;
|
|
38
41
|
|
|
@@ -43,8 +46,10 @@ $padding-xs-vertical: 1px !default;
|
|
|
43
46
|
$padding-xs-horizontal: 5px !default;
|
|
44
47
|
|
|
45
48
|
$border-radius-base: 4px !default;
|
|
49
|
+
$border-radius-xl: 8px !default;
|
|
46
50
|
$border-radius-large: 6px !default;
|
|
47
51
|
$border-radius-small: 3px !default;
|
|
52
|
+
$border-radius-xs: 3px !default;
|
|
48
53
|
|
|
49
54
|
|
|
50
55
|
// // // // // // // // // // // // // // // // // // // // // // // // // // // // // // // //
|
|
@@ -134,6 +139,8 @@ $input-height-large: (ceil($font-size-large * $line-height-large) +
|
|
|
134
139
|
//** Small `.form-control` height
|
|
135
140
|
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
|
|
136
141
|
$input-height-xs: (floor($font-size-small * $line-height-small) + ($padding-xs-vertical * 2) + 2) !default;
|
|
142
|
+
$input-height-xl: (ceil($font-size-xl * $line-height-xl) + ($padding-large-xl * 2) + 2) !default;
|
|
143
|
+
|
|
137
144
|
|
|
138
145
|
|
|
139
146
|
|
|
@@ -5,10 +5,10 @@
|
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
.btn-xl, .btn-group-xl > .btn {
|
|
8
|
-
padding:
|
|
9
|
-
font-size:
|
|
10
|
-
line-height:
|
|
11
|
-
border-radius:
|
|
8
|
+
padding: $padding-xl-vertical $padding-xl-horizontal;
|
|
9
|
+
font-size: $font-size-xl;
|
|
10
|
+
line-height: $line-height-xl;
|
|
11
|
+
border-radius: $border-radius-xl;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
|
|
@@ -39,7 +39,14 @@
|
|
|
39
39
|
@include btn_icn_width( $line-height-computed, $padding-base-vertical );
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
|
-
|
|
42
|
+
&.btn-xl > * {
|
|
43
|
+
padding: $padding-xl-vertical $padding-xl-horizontal;
|
|
44
|
+
font-size: $font-size-xl;
|
|
45
|
+
line-height: $line-height-xl;
|
|
46
|
+
&:first-child { @include border-left-radius( $border-radius-xl ); }
|
|
47
|
+
&:last-child { @include border-right-radius( $border-radius-xl ); }
|
|
48
|
+
&.icn { font-size: $font-size-xl * 1.1; @include btn_icn_width($line-height-computed-xl, $padding-xl-vertical);}
|
|
49
|
+
}
|
|
43
50
|
&.btn-lg > * {
|
|
44
51
|
padding: $padding-large-vertical $padding-large-horizontal;
|
|
45
52
|
// font-size: $font-size-large;
|
|
@@ -96,11 +96,13 @@
|
|
|
96
96
|
}
|
|
97
97
|
|
|
98
98
|
// Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
|
99
|
-
@include inpt-sizing('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-
|
|
99
|
+
@include inpt-sizing('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-xs, $border-radius-xs);
|
|
100
100
|
|
|
101
101
|
@include inpt-sizing('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
|
|
102
102
|
|
|
103
103
|
@include inpt-sizing('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
|
|
104
|
+
|
|
105
|
+
@include inpt-sizing('.input-xl', $input-height-xl, $padding-xl-vertical, $padding-xl-horizontal, $font-size-xl, $line-height-xl, $border-radius-xl);
|
|
104
106
|
|
|
105
107
|
|
|
106
108
|
|
|
@@ -128,6 +130,15 @@
|
|
|
128
130
|
|
|
129
131
|
|
|
130
132
|
|
|
133
|
+
.btn-xl, .btn-group-xl > .btn {
|
|
134
|
+
padding: 12px 20px;
|
|
135
|
+
font-size: 24px;
|
|
136
|
+
line-height: 1.33;
|
|
137
|
+
border-radius: round($border-radius-large * 1.2);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
131
142
|
// Reset height for `textarea`s
|
|
132
143
|
textarea.form-control {
|
|
133
144
|
height: auto;
|
|
@@ -147,7 +158,8 @@ textarea.form-control {
|
|
|
147
158
|
// Build on `.form-control` with modifier classes to decrease or increase the
|
|
148
159
|
// height and font-size of form controls.
|
|
149
160
|
|
|
150
|
-
@include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-
|
|
161
|
+
@include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-xs, $line-height-xs, $border-radius-xs);
|
|
162
|
+
@include input-size('.input-xl', $input-height-xl, $padding-xl-vertical, $padding-xl-horizontal, $font-size-xl, $line-height-xl, $border-radius-xl);
|
|
151
163
|
|
|
152
164
|
|
|
153
165
|
|
|
@@ -264,13 +264,3 @@
|
|
|
264
264
|
}
|
|
265
265
|
}
|
|
266
266
|
|
|
267
|
-
|
|
268
|
-
@mixin mobile_app_improvements {
|
|
269
|
-
// make it smooth and app-like on mobile (best in body!)
|
|
270
|
-
-webkit-font-smoothing: antialiased;
|
|
271
|
-
-webkit-touch-callout: none;
|
|
272
|
-
-webkit-user-select: none;
|
|
273
|
-
::-webkit-scrollbar { display: none; }
|
|
274
|
-
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
275
|
-
}
|
|
276
|
-
|
|
@@ -54,26 +54,7 @@
|
|
|
54
54
|
@mixin handwritten-font { @include handWrittenFont; }
|
|
55
55
|
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
text-overflow: ellipsis;
|
|
59
|
-
white-space: nowrap;
|
|
60
|
-
overflow: hidden;
|
|
61
|
-
}
|
|
62
|
-
@mixin no_word_break {
|
|
63
|
-
text-overflow: ellipsis;
|
|
64
|
-
white-space: nowrap;
|
|
65
|
-
overflow: hidden;
|
|
66
|
-
}
|
|
67
|
-
@mixin no-word-break { @include no_word_break; }
|
|
68
|
-
@mixin no-wrap { @include no_wrap; }
|
|
69
|
-
|
|
70
|
-
@mixin antialiased_text {
|
|
71
|
-
// make icons and fonts thinner in webkit (white icons on dark background)
|
|
72
|
-
text-shadow: 0 0 0 rgba(0,0,0,.01);
|
|
73
|
-
-webkit-font-smoothing: antialiased;
|
|
74
|
-
text-rendering: optimizelegibility;
|
|
75
|
-
}
|
|
76
|
-
|
|
57
|
+
// Shadows:
|
|
77
58
|
@mixin inset_font($white: 90, $black: 50) {
|
|
78
59
|
text-shadow: unquote( "1px 1px 0px rgba(255,255,255,.#{$white}),
|
|
79
60
|
0px 1px 0px rgba(255,255,255,.#{$white}),
|
|
@@ -103,15 +84,69 @@
|
|
|
103
84
|
1px -1px #{$blur} #{$color};
|
|
104
85
|
}
|
|
105
86
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
87
|
+
|
|
88
|
+
// General-Helpers:
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
// no line break in texts, when to long for box show "..."
|
|
92
|
+
@mixin noWrap {
|
|
93
|
+
white-space: nowrap;
|
|
94
|
+
overflow: hidden;
|
|
95
|
+
text-overflow: ellipsis;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@mixin no_wrap { @include noWrap; }
|
|
99
|
+
@mixin no_word_break { @include noWrap; }
|
|
100
|
+
@mixin no-word-break { @include noWrap; }
|
|
101
|
+
@mixin no-wrap { @include noWrap; }
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
// user formated text .. like pre tag
|
|
105
|
+
@mixin preText {
|
|
106
|
+
white-space: -moz-pre-wrap !important;
|
|
107
|
+
white-space: -pre-wrap;
|
|
108
|
+
white-space: -o-pre-wrap;
|
|
109
|
+
white-space: pre-wrap;
|
|
110
|
+
word-wrap: break-word;
|
|
112
111
|
}
|
|
113
|
-
|
|
114
|
-
|
|
112
|
+
|
|
113
|
+
@mixin pre_text { @include preText; }
|
|
114
|
+
@mixin pre-text { @include preText; }
|
|
115
|
+
@mixin user_input { @include preText; }
|
|
116
|
+
@mixin user-input { @include preText; }
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
// make icons and fonts thinner in webkit (white icons on dark background)
|
|
120
|
+
@mixin antialiasedText {
|
|
121
|
+
text-shadow: 0 0 0 rgba(0,0,0,.01);
|
|
122
|
+
-webkit-font-smoothing: antialiased;
|
|
123
|
+
text-rendering: optimizelegibility;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@mixin antialiased_text { @include noWrap; }
|
|
127
|
+
@mixin antialiased-text { @include noWrap; }
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
// make it smooth and app-like on mobile (best in body!)
|
|
131
|
+
@mixin mobileAppImprovements {
|
|
132
|
+
-webkit-font-smoothing: antialiased;
|
|
133
|
+
-webkit-touch-callout: none;
|
|
134
|
+
-webkit-user-select: none;
|
|
135
|
+
::-webkit-scrollbar { display: none; }
|
|
136
|
+
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
@mixin mobile_app_improvements { @include mobileAppImprovements; }
|
|
140
|
+
@mixin mobile-app-improvements { @include mobileAppImprovements; }
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
// add rules for all text elements
|
|
144
|
+
@mixin textTags {
|
|
145
|
+
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, span, a {
|
|
115
146
|
@content;
|
|
116
147
|
}
|
|
117
148
|
}
|
|
149
|
+
|
|
150
|
+
@mixin text_tags { @include textTags { @content; } }
|
|
151
|
+
@mixin text-tags { @include textTags { @content; } }
|
|
152
|
+
|
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.84
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Torsten Wetzel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-
|
|
11
|
+
date: 2015-09-30 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -444,7 +444,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
444
444
|
version: '0'
|
|
445
445
|
requirements: []
|
|
446
446
|
rubyforge_project:
|
|
447
|
-
rubygems_version: 2.
|
|
447
|
+
rubygems_version: 2.2.2
|
|
448
448
|
signing_key:
|
|
449
449
|
specification_version: 4
|
|
450
450
|
summary: A set of sass helper depending on bourbon and bootstrap-sass.
|