ellipsis-compass 1.0.4 → 1.0.5

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,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- OTI4ZWI0NThjNjM5OGIyNjk2ODA2ZWVmZjk0MjVhZjcwZTgwYTkzZA==
4
+ MjlmNTdiMGEyOWE4N2Y5MTNhZDRhODAwYmZhYjAyM2E1MjdhZDA5MA==
5
5
  data.tar.gz: !binary |-
6
- YjdlN2ZhY2ZhMzBkMGRiNGFjODY1ODFkZTdlNzkyOWUwYTFhYTI1Mg==
6
+ NjJiNTZjYzQ0YmU5ZWQxYWMyODZkMmMxNDEzZmIzMjk0MWQzYmQzMw==
7
7
  !binary "U0hBNTEy":
8
8
  metadata.gz: !binary |-
9
- OTRjYWJkNzE1MjIyMjBmMTI2Zjc1MTFiMTNiOTczNGM5YzU2YmUzNjNkMjJi
10
- ODcwYTU5NWUzNGJiNzlhYTUxZDI3Y2YwZWE0YzMxODM5MTdkN2MzYzM5NmI3
11
- ZjFiNDhkYzFiNmIxMTJmODkxMGMwMGY1MTk4MTY1YjEyM2M5ODk=
9
+ ZmM3NTE2OTYzZGM0NjQxOWIwYTNiNDJlMzgxZjM1ZDBmYzQ2NWQ2MzRiYTcz
10
+ OWQ4NDk0ODMyZTJlZTlkZjljMWIzM2FlYjQzZjljZWMxMTA1M2JmMDZhMDU4
11
+ Yzg3ZjE5NjZmZDBhNWRkNmI2NDI3NTVmNTIyMjU1NDZjYTMzOTY=
12
12
  data.tar.gz: !binary |-
13
- MDhiNDYyZGQxYmNmZjQ1MWNmMTRmMDYyMWY3ODcxYWY3YTE3NGNmOWIwZjgx
14
- ZDdkODI4ZGFjNzZkYzRjOGQ1Yjc3OTA2ZTE2ZjAyM2JjMzQ3ZTQ4OGMzZWMz
15
- NjgwN2Q0M2ZiMTlmMzQzZDE4Njk2N2NhYzZiNDVjZDA5ZDJhMWU=
13
+ MWM0MWQzMzFlNTlhNDIyZjY0MDZhNWRiZTkyODMxMTg0YjkwNjFhMWY3Yzkz
14
+ OTAxZWViOGNhODk2MGJjZmJiMGE3NTkwMWIwOTAwZWMwZGRmOGZhMThjZTYx
15
+ N2YyMTAzMzc0NGRkNTJjZmE3ZGZmZTczZWFkODBlNjM4NjVjNzc=
@@ -4,6 +4,7 @@ $black:#000 !default;
4
4
  $off-black: #222 !default;
5
5
  $dark-gray: #333 !default;
6
6
  $light-gray:#ddd !default;
7
+ $medium-gray:#666 !default;
7
8
  $zero: 0 !important !default;
8
9
 
9
10
  //core component colors
@@ -45,7 +46,30 @@ $grid-width: 1160px !default;
45
46
  $grid-column-gutter:30px !default;
46
47
  $grid-columns: 12 !default;
47
48
 
49
+ //semantic components
50
+ //error
51
+ $component-error-background: #f2dede !default;
52
+ $component-error-font-color: #bc5251 !default;
53
+ $component-error-border: #eed3d7 !default;
54
+ $component-error-text-shadow: none !default;
48
55
 
56
+ //info
57
+ $component-info-background: #d9edf7 !default;
58
+ $component-info-border: #bce8f1 !default;
59
+ $component-info-font-color: #3a87ad !default;
60
+ $component-info-text-shadow: none !default;
61
+
62
+ //warning
63
+ $component-warning-background: #fcf8e3 !default;
64
+ $component-warning-border: #fbeed5 !default;
65
+ $component-warning-font-color: #c09853 !default;
66
+ $component-warning-text-shadow: none !default;
67
+
68
+ //success
69
+ $component-success-background: #dff0d8 !default;
70
+ $component-success-border: #d6e9c6 !default;
71
+ $component-success-font-color: #468847 !default;
72
+ $component-success-text-shadow: none !default;
49
73
 
50
74
  //icons
51
75
  $global-icon-font-family:ellipsis !default;
@@ -2,7 +2,7 @@
2
2
  $include-component-gradient: true !default;
3
3
  $include-component-gradient-inset: true !default;
4
4
  $include-component-text-shadow: false !default;
5
- $include-component-box-shadow: true !default;
5
+ $include-component-box-shadow: false !default;
6
6
  $include-component-active-box-shadow: true !default;
7
7
  $include-component-animation: false !default;
8
8
  $component-animation: all 0.15s ease-in !default;
@@ -298,10 +298,10 @@ $touch-horizontal-constrain: true) {
298
298
  @if $touch-horizontal-constrain {
299
299
  @media #{$breakpoint-touch}{
300
300
  .row,grid-row {
301
- overflow: hidden;
301
+ overflow-x: hidden;
302
302
  &.overflow {
303
303
  /* re-enable on per row basis, if needed */
304
- overflow: visible;
304
+ overflow-x: visible;
305
305
  }
306
306
  }
307
307
  }
@@ -203,5 +203,9 @@
203
203
  @content;
204
204
  }
205
205
 
206
+ /* supports not for flex-wrap */
207
+ @supports not (flex-wrap: wrap) {
208
+ @content;
209
+ }
206
210
 
207
211
 
@@ -22,7 +22,7 @@
22
22
  display: inherit !important;
23
23
  }
24
24
 
25
- .hide-for-touch
25
+ .hide-for-touch,
26
26
  .hide-for-phone,
27
27
  .hide-for-small,
28
28
  .hide-for-tablet-down,
@@ -60,6 +60,9 @@ $cite-font-style: null) {
60
60
  $typography-blockquote-line-height: 1.6 !default;
61
61
  $typography-blockquote-margin: 1em 0 !default;
62
62
  $typography-blockquote-padding: 1em !default;
63
+ $typography-blockquote-link-decoration:underline !default;
64
+ $typography-blockquote-link-weight:normal !default;
65
+ $typography-blockquote-link-hover-opacity:.7 !default;
63
66
  $typography-cite-font-size: .8em !default;
64
67
  $typography-cite-font-color: lighten($global-font-color, 20%) !default;
65
68
  $typography-cite-font-style: normal !default;
@@ -250,6 +253,9 @@ $cite-font-style: null) {
250
253
  font-size: $typography-blockquote-font-size;
251
254
  font-style: $typography-blockquote-font-style;
252
255
  border: $typography-blockquote-border;
256
+ &.center{
257
+ text-align: center;
258
+ }
253
259
  cite {
254
260
  display: block;
255
261
  font-size: $typography-cite-font-size;
@@ -258,12 +264,19 @@ $cite-font-style: null) {
258
264
  &:before {
259
265
  content: "\2014 \0020";
260
266
  }
261
-
262
267
  }
263
268
  &.info{
264
269
  border-left:4px solid $component-info-font-color;
265
270
  background:$component-info-background;
266
271
  color:$component-info-font-color;
272
+ a{
273
+ color:$component-info-font-color;
274
+ text-decoration: $typography-blockquote-link-decoration;
275
+ font-weight:$typography-blockquote-link-weight;
276
+ &:hover{
277
+ opacity:$typography-blockquote-link-hover-opacity;
278
+ }
279
+ }
267
280
  }
268
281
  &.warning{
269
282
  border-left:4px solid $component-warning-font-color;
@@ -171,6 +171,9 @@ $cell-padding:null
171
171
  &.top{
172
172
  @include align-items(flex-start);
173
173
  }
174
+ &.bottom{
175
+ @include align-items(flex-end);
176
+ }
174
177
  &.space-around{
175
178
  @include justify-content(space-around);
176
179
  }
@@ -42,7 +42,6 @@ $li-stacked-padding:null
42
42
  &>li,&>menu-item{
43
43
  @include flexbox($alignment:center,$justification:flex-start);
44
44
  margin:$li-margin;
45
- //padding:$li-padding;
46
45
  height:100%;
47
46
  position:relative;
48
47
  &:hover,&:focus{
@@ -118,7 +117,7 @@ $li-stacked-padding:null
118
117
  margin:$li-margin;
119
118
  padding:$li-padding;
120
119
  height:100%;
121
- &>.ui-dropdown,ui-dropdown,ui-mega-dropdown{
120
+ &>.ui-dropdown,&>ui-dropdown,&>ui-mega-dropdown{
122
121
  display:none;
123
122
  }
124
123
  &>a{
@@ -127,6 +126,9 @@ $li-stacked-padding:null
127
126
  }
128
127
  &:hover,&:focus{
129
128
  cursor:pointer;
129
+ &>.ui-dropdown,&>ui-dropdown,&>ui-mega-dropdown{
130
+ display:block !important;
131
+ }
130
132
  @extend %#{$component}-background-hover !optional;
131
133
  &>a{
132
134
  @extend %#{$component}-font-hover !optional;
@@ -15,7 +15,7 @@ $brand-justification:null,
15
15
  $brand-alignment:null,
16
16
  $brand-min-width:null,
17
17
  $brand-padding:null,
18
- $section-justification:null,
18
+ $right-padding:null,
19
19
  $menu-justification:null) {
20
20
 
21
21
  $_ui-topbar-contained-to-grid: $grid-width - $grid-column-gutter;
@@ -39,6 +39,9 @@ $menu-justification:null) {
39
39
  max-height:$height;
40
40
  }
41
41
  .brand,ui-brand {
42
+ position:absolute;
43
+ left:0;
44
+ top:0;
42
45
  cursor:pointer;
43
46
  padding: $brand-padding;
44
47
  height:100%;
@@ -56,42 +59,46 @@ $menu-justification:null) {
56
59
  @include flexbox($justification: $brand-justification, $alignment: $brand-alignment);
57
60
  @extend %#{$component}-font !optional;
58
61
  font-size:$brand-font-size;
59
- &.left{
60
- position:absolute;
61
- left:0;
62
- top:0;
63
- }
62
+
64
63
  }
65
64
 
66
- * {
65
+ &>* {
67
66
  list-style: none;
68
- &.right,&.flex-end {
69
- margin-left:auto;
67
+ &.right{
68
+ position:absolute;
69
+ right:0;
70
+ top:0;
70
71
  height:100%;
71
- @include flexbox($justification: $menu-justification, $alignment: $alignment);
72
+ padding:$right-padding;
72
73
  }
73
- &.left,&.flex-start{
74
- margin-right:auto;
74
+ &.left{
75
+ position:absolute;
76
+ left:0;
77
+ top:0;
75
78
  height:100%;
76
- @include flexbox($justification: $menu-justification, $alignment:$alignment);
77
79
  }
80
+
78
81
  }
79
82
  & > section {
80
83
  height: $height;
81
84
  width: $_ui-topbar-contained-to-grid;
82
85
  position:relative;
83
86
  background:none;
84
- @include flexbox($justification: $section-justification, $alignment: $alignment);
85
- &.center {
86
- margin-left:auto;
87
- margin-right:auto;
88
- align-self:center;
89
- .ui-menu,ui-menu {
87
+ @include flexbox($justification:flex-start, $alignment: $alignment);
88
+ &>*{
89
+ &.right,&.flex-end {
90
+ margin-left:auto;
91
+ height:100%;
90
92
  @include flexbox($justification: $menu-justification, $alignment: $alignment);
91
- &.left,&.flex-start{
92
- margin-right:auto;
93
- }
94
93
  }
94
+ &.left,&.flex-start{
95
+ margin-right:auto;
96
+ height:100%;
97
+ @include flexbox($justification: $menu-justification, $alignment:$alignment);
98
+ }
99
+ }
100
+ &.center {
101
+ @include flexbox($justification:center, $alignment: $alignment);
95
102
  }
96
103
 
97
104
  }
@@ -128,7 +135,7 @@ $brand-justification:flex-start,
128
135
  $brand-alignment:center,
129
136
  $brand-min-width:6em,
130
137
  $brand-padding:0 0 0 1em,
131
- $section-justification:flex-start,
138
+ $right-padding:0 1em 0 0,
132
139
  $menu-justification:center,
133
140
  $touch-position: fixed,
134
141
  $touch-height: 60px,
@@ -143,14 +150,14 @@ $touch-brand-font-size:1.75em
143
150
  &.#{$class} {
144
151
  @include desktop-content() {
145
152
  @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
146
- $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$section-justification,$menu-justification);
153
+ $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$right-padding,$menu-justification);
147
154
  }
148
155
  @content
149
156
  }
150
157
  } @else {
151
158
  @include desktop-content() {
152
159
  @include _ui-topbar($component, $position, $padding, $height, $z-index, $brand-font-size, $line-height,
153
- $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$section-justification,$menu-justification);
160
+ $justification,$alignment,$brand-justification,$brand-alignment,$brand-min-width,$brand-padding,$right-padding,$menu-justification);
154
161
  }
155
162
  @content;
156
163
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ellipsis-compass
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.4
4
+ version: 1.0.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - S. Francis
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2014-08-16 00:00:00.000000000 Z
11
+ date: 2014-08-24 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description: Ellipsis is responsive HTML5 web component framework for modern browsers
14
14
  email: sfrancis@misinteractive.com