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 +8 -8
- data/stylesheets/ellipsis/base/_global.scss +24 -0
- data/stylesheets/ellipsis/component/_component.scss +1 -1
- data/stylesheets/ellipsis/grid/_grid.scss +2 -2
- data/stylesheets/ellipsis/helpers/_mixins.scss +4 -0
- data/stylesheets/ellipsis/helpers/_visibility.scss +1 -1
- data/stylesheets/ellipsis/typography/_typography.scss +14 -1
- data/stylesheets/ellipsis/ui/_container.scss +3 -0
- data/stylesheets/ellipsis/ui/_menu.scss +4 -2
- data/stylesheets/ellipsis/ui/_topbar.scss +32 -25
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
MjlmNTdiMGEyOWE4N2Y5MTNhZDRhODAwYmZhYjAyM2E1MjdhZDA5MA==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
NjJiNTZjYzQ0YmU5ZWQxYWMyODZkMmMxNDEzZmIzMjk0MWQzYmQzMw==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
ZmM3NTE2OTYzZGM0NjQxOWIwYTNiNDJlMzgxZjM1ZDBmYzQ2NWQ2MzRiYTcz
|
10
|
+
OWQ4NDk0ODMyZTJlZTlkZjljMWIzM2FlYjQzZjljZWMxMTA1M2JmMDZhMDU4
|
11
|
+
Yzg3ZjE5NjZmZDBhNWRkNmI2NDI3NTVmNTIyMjU1NDZjYTMzOTY=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
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:
|
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
|
}
|
@@ -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;
|
@@ -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
|
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
|
-
$
|
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
|
-
|
60
|
-
position:absolute;
|
61
|
-
left:0;
|
62
|
-
top:0;
|
63
|
-
}
|
62
|
+
|
64
63
|
}
|
65
64
|
|
66
|
-
|
65
|
+
&>* {
|
67
66
|
list-style: none;
|
68
|
-
&.right
|
69
|
-
|
67
|
+
&.right{
|
68
|
+
position:absolute;
|
69
|
+
right:0;
|
70
|
+
top:0;
|
70
71
|
height:100%;
|
71
|
-
|
72
|
+
padding:$right-padding;
|
72
73
|
}
|
73
|
-
&.left
|
74
|
-
|
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:
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
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
|
-
$
|
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,$
|
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,$
|
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
|
+
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-
|
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
|