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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a2d3cc8ceca544e652ceb831a4bdfe8a6447519e
4
- data.tar.gz: 1ac0a6d173572712c14718d60cdb9b09753486c2
3
+ metadata.gz: 7662f2ccce8cfaa57cd2a841da826e52de08a589
4
+ data.tar.gz: 7d96bcdd91b00fc41c70cae5de0b04c268dfde50
5
5
  SHA512:
6
- metadata.gz: 7ceff80bc373a9516f8899add84dd94ae759fcf2fccadbf86b8ec2aee655b01798537ab0ff276d2f5d1af561f6ac49f87238d5c2d7b03a4dbc19a0754559c4bc
7
- data.tar.gz: 8fc10da9b8b5b9d8bc8928c6c146c6d0feeed5bf048fc86aa402554a18381b22eb7659bd79c29017d85c83f076ea47559ac1163e3b415568aae4fc0527b77e36
6
+ metadata.gz: 08cb8644536c326033e09e5e75f1c4e90d7056574065ef8dc00c5885f456e9e46ed2a6ee7e5b550a26acc50fb1e149a7655ec5505b3b7cd66295174af411ad9a
7
+ data.tar.gz: ed3ae039f4f90fc3500a7c554efe64792bce0dbe255f75452dd24e796c95a0d1b08e32c6cc182e757c09c1f792a7853903495424bed05d74d921228cf272244a
@@ -1,3 +1,3 @@
1
1
  module MagicStylez
2
- VERSION = "0.0.0.83"
2
+ VERSION = "0.0.0.84"
3
3
  end
@@ -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-small * $line-height-small)) !default; // ~20px
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: 12px 20px;
9
- font-size: 24px;
10
- line-height: 1.33;
11
- border-radius: round($border-radius-large * 1.2);
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-small, $line-height-small, $border-radius-small);
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-small, $line-height-small, $border-radius-small);
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
- @mixin no_wrap {
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
- @mixin text_tags {
107
- h1, h2, h3, h4, h5, h6,
108
- .h1, .h2, .h3, .h4, .h5, .h6,
109
- p, span, a {
110
- @content;
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
- @mixin text-tags {
114
- @include text_tags {
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.83
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-08-23 00:00:00.000000000 Z
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.4.5
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.