ellipsis-compass 1.0.1

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.
Files changed (85) hide show
  1. checksums.yaml +15 -0
  2. data/lib/ellipsis-compass.rb +4 -0
  3. data/stylesheets/animation/_animate.scss +1206 -0
  4. data/stylesheets/animation/_animation.scss +121 -0
  5. data/stylesheets/animation/_animations.scss +771 -0
  6. data/stylesheets/animation/_transit.scss +425 -0
  7. data/stylesheets/animation/_transitions.scss +320 -0
  8. data/stylesheets/base/_breakpoints.scss +64 -0
  9. data/stylesheets/base/_document.scss +219 -0
  10. data/stylesheets/base/_global.scss +88 -0
  11. data/stylesheets/base/_normalize.scss +406 -0
  12. data/stylesheets/component/_component.scss +939 -0
  13. data/stylesheets/component/_ui.scss +955 -0
  14. data/stylesheets/flexbox/_flexbox.scss +305 -0
  15. data/stylesheets/font/_icons.scss +1492 -0
  16. data/stylesheets/font/_ubuntu.scss +38 -0
  17. data/stylesheets/form/_form.scss +836 -0
  18. data/stylesheets/grid/_grid.scss +312 -0
  19. data/stylesheets/helpers/_all.scss +8 -0
  20. data/stylesheets/helpers/_component.scss +177 -0
  21. data/stylesheets/helpers/_convenience.scss +277 -0
  22. data/stylesheets/helpers/_functions.scss +427 -0
  23. data/stylesheets/helpers/_grid.scss +39 -0
  24. data/stylesheets/helpers/_hardware-acceleration.scss +22 -0
  25. data/stylesheets/helpers/_mixins.scss +207 -0
  26. data/stylesheets/helpers/_touch.scss +107 -0
  27. data/stylesheets/helpers/_visibility.scss +138 -0
  28. data/stylesheets/image/_images.scss +19 -0
  29. data/stylesheets/imports/elements/_autosearch.scss +11 -0
  30. data/stylesheets/imports/elements/_badge.scss +23 -0
  31. data/stylesheets/imports/elements/_barchart.scss +254 -0
  32. data/stylesheets/imports/elements/_form.scss +8 -0
  33. data/stylesheets/imports/elements/_loginform.scss +6 -0
  34. data/stylesheets/imports/elements/_modellist.scss +14 -0
  35. data/stylesheets/imports/elements/_pluralize.scss +8 -0
  36. data/stylesheets/imports/elements/_signupform.scss +6 -0
  37. data/stylesheets/imports/elements/_slidenotification.scss +65 -0
  38. data/stylesheets/imports/elements/_stickyreveal.scss +44 -0
  39. data/stylesheets/imports/elements/_template.scss +7 -0
  40. data/stylesheets/imports/elements/_veneer.scss +36 -0
  41. data/stylesheets/shared/_shared.scss +282 -0
  42. data/stylesheets/touch/ui/_drawer.scss +41 -0
  43. data/stylesheets/touch/ui/_dropdown.scss +58 -0
  44. data/stylesheets/touch/ui/_menu.scss +131 -0
  45. data/stylesheets/touch/ui/_navbar.scss +44 -0
  46. data/stylesheets/touch/ui/_toggle.scss +127 -0
  47. data/stylesheets/touch/ui/_topbar.scss +48 -0
  48. data/stylesheets/typography/_typography.scss +746 -0
  49. data/stylesheets/ui/_autocomplete.scss +117 -0
  50. data/stylesheets/ui/_badge.scss +73 -0
  51. data/stylesheets/ui/_box.scss +78 -0
  52. data/stylesheets/ui/_breadcrumb.scss +64 -0
  53. data/stylesheets/ui/_button.scss +395 -0
  54. data/stylesheets/ui/_carousel.scss +284 -0
  55. data/stylesheets/ui/_collapsible.scss +61 -0
  56. data/stylesheets/ui/_container.scss +297 -0
  57. data/stylesheets/ui/_datepicker.scss +218 -0
  58. data/stylesheets/ui/_drawer.scss +96 -0
  59. data/stylesheets/ui/_dropdown.scss +394 -0
  60. data/stylesheets/ui/_file.scss +147 -0
  61. data/stylesheets/ui/_gallery.scss +219 -0
  62. data/stylesheets/ui/_label.scss +167 -0
  63. data/stylesheets/ui/_loading.scss +70 -0
  64. data/stylesheets/ui/_mediaobject.scss +108 -0
  65. data/stylesheets/ui/_menu.scss +287 -0
  66. data/stylesheets/ui/_menutab.scss +175 -0
  67. data/stylesheets/ui/_modal.scss +47 -0
  68. data/stylesheets/ui/_navbar.scss +315 -0
  69. data/stylesheets/ui/_notification.scss +154 -0
  70. data/stylesheets/ui/_pagination.scss +137 -0
  71. data/stylesheets/ui/_parallax.scss +233 -0
  72. data/stylesheets/ui/_popover.scss +3 -0
  73. data/stylesheets/ui/_rating.scss +106 -0
  74. data/stylesheets/ui/_sidebar.scss +110 -0
  75. data/stylesheets/ui/_slidingpanel.scss +57 -0
  76. data/stylesheets/ui/_social.scss +213 -0
  77. data/stylesheets/ui/_sticky.scss +9 -0
  78. data/stylesheets/ui/_table.scss +423 -0
  79. data/stylesheets/ui/_tabs.scss +242 -0
  80. data/stylesheets/ui/_toggle.scss +49 -0
  81. data/stylesheets/ui/_tooltip.scss +57 -0
  82. data/stylesheets/ui/_topbar.scss +210 -0
  83. data/stylesheets/ui/_tree.scss +3 -0
  84. data/stylesheets/ui/_window.scss +205 -0
  85. metadata +140 -0
@@ -0,0 +1,39 @@
1
+ /* Grid ---------------------------------------------------------------------------------------------------------------*/
2
+
3
+ @mixin helpers-grid() {
4
+
5
+ //contain to grid
6
+ .ui-contain-to-grid {
7
+ max-width: $grid-width - $grid-column-gutter;
8
+ margin: 0 auto;
9
+ }
10
+
11
+ //grid gutter bleed
12
+
13
+ .ui-gutter-bleed {
14
+
15
+ }
16
+
17
+ %ui-gutter-bleed {
18
+ margin-right: - $grid-column-gutter/2 !important;
19
+ margin-left: - $grid-column-gutter/2 !important;
20
+ }
21
+ %ui-gutter-bleed-right {
22
+ margin-right: - $grid-column-gutter/2 !important;
23
+ margin-left: 0 !important;
24
+ }
25
+ %ui-gutter-bleed-left {
26
+ margin-left: - $grid-column-gutter/2 !important;
27
+ margin-right: 0 !important;
28
+ }
29
+ @media #{$breakpoint-touch}{
30
+ .ui-gutter-bleed {
31
+ margin-right: - $grid-column-gutter/2 !important;
32
+ margin-left: - $grid-column-gutter/2 !important;
33
+ }
34
+ .ui-gutter-bleed-image{
35
+ margin:0 -100px 0 -100px;
36
+ }
37
+
38
+ }
39
+ }
@@ -0,0 +1,22 @@
1
+ /* Hardware Accleration -----------------------------------------------------------------------------------------------*/
2
+
3
+ @mixin helpers-hardware-acceleration() {
4
+
5
+ %ui-hardware-accelerate {
6
+ -webkit-transform: translate3d(0, 0, 0);
7
+
8
+ }
9
+
10
+ .ui-hardware-accelerated {
11
+ -webkit-transform: translate3d(0, 0, 0);
12
+ }
13
+
14
+ .ui-backface-visibility {
15
+ -webkit-backface-visibility: hidden;
16
+ }
17
+
18
+ .ui-perspective {
19
+ -webkit-perspective: 1000;
20
+ }
21
+
22
+ }
@@ -0,0 +1,207 @@
1
+ @mixin clearfix() { *zoom:1;
2
+ &:before, &:after { content: " "; display: table; }
3
+ &:after { clear: both; }
4
+ }
5
+
6
+ @mixin mobile-clearfix() {
7
+ @include respondTo(smallScreen) { &:before, &:after { content: " "; display: table; }
8
+ &:after { clear: both; }
9
+ &:last-child { float: none; }
10
+ }
11
+ }
12
+
13
+ @mixin gutter-bleed(){
14
+ margin-right: - $grid-column-gutter/2 !important;
15
+ margin-left: - $grid-column-gutter/2 !important;
16
+ }
17
+
18
+ @mixin gutter-bleed-padding(){
19
+ margin-right: - $grid-column-gutter/2 !important;
20
+ margin-left: - $grid-column-gutter/2 !important;
21
+ padding-right: $grid-column-gutter/2 !important;
22
+ padding-left: $grid-column-gutter/2 !important;
23
+ }
24
+
25
+ @mixin dotted-border-bottom(){
26
+ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left bottom repeat-x;
27
+
28
+ }
29
+
30
+ @mixin dotted-border-top(){
31
+ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABBAAAAAAZp70QAAAABGdBTUEAALGPC%2FxhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAJ0Uk5TAA%2FmLNCpAAAAAmJLR0QADzoyPqMAAAAJcEhZcwAAAEgAAABIAEbJaz4AAAALSURBVAjXY5j%2FHwACQAGfMSJZswAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxMy0wMS0xMlQxNjozMToyMi0wODowMBl4csUAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTMtMDEtMTJUMTY6MzE6MjItMDg6MDBoJcp5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg%3D%3D) left top repeat-x;
32
+
33
+ }
34
+
35
+ @mixin constrain-to-grid(){
36
+ margin:0 auto;
37
+ max-width:$grid-width - $grid-column-gutter;
38
+ }
39
+
40
+ @mixin nav-index($index:1){
41
+ -webkit-nav-index:$index;
42
+ -moz-nav-index:$index;
43
+ -o-nav-index:$index;
44
+ -ms-nav-index:$index;
45
+ nav-index:$index;
46
+ }
47
+
48
+ //modified background-image mixin that supports IE 10/11
49
+ @mixin mod-background-image($image){
50
+ @include background-image($image); // Compass default version, for everything but IE.
51
+ background-image: -ms-#{$image}; // Vendor prefixes for IE
52
+ }
53
+
54
+ @mixin linear-gradient($list){
55
+ @include background-image(linear-gradient(top, $list));
56
+ }
57
+
58
+ @mixin touch-content(){
59
+ @media #{$breakpoint-touch}{
60
+ @content;
61
+ }
62
+ }
63
+
64
+ @mixin tablet-content(){
65
+ @media #{$breakpoint-tablet}{
66
+ @content;
67
+ }
68
+ }
69
+
70
+ @mixin tablet-portrait-content(){
71
+ @media #{$breakpoint-tablet-portrait}{
72
+ @content;
73
+ }
74
+ }
75
+
76
+ @mixin tablet-landscape-content(){
77
+ @media #{$breakpoint-tablet-landscape}{
78
+ @content;
79
+ }
80
+ }
81
+
82
+ @mixin phone-content(){
83
+ @media #{$breakpoint-phone}{
84
+ @content;
85
+ }
86
+ }
87
+
88
+ @mixin phone-portrait-content(){
89
+ @media #{$breakpoint-phone-portrait}{
90
+ @content;
91
+ }
92
+ }
93
+
94
+ @mixin phone-landscape-content(){
95
+ @media #{$breakpoint-phone-landscape}{
96
+ @content;
97
+ }
98
+ }
99
+
100
+ @mixin desktop-content(){
101
+ @media #{$breakpoint-desktop}{
102
+ @content;
103
+ }
104
+ }
105
+
106
+ @mixin tablet-up-content(){
107
+ @media #{$breakpoint-grid-tablet}{
108
+ @content;
109
+ }
110
+ }
111
+
112
+ @mixin tablet-small-content(){
113
+ @media #{$breakpoint-small-tablet}{
114
+ @content;
115
+ }
116
+ }
117
+
118
+
119
+ @mixin grid-contain-content(){
120
+ @media #{$breakpoint-grid-contain}{
121
+ @content;
122
+ }
123
+ }
124
+
125
+ @mixin portrait-content(){
126
+ @media #{$breakpoint-portrait}{
127
+ @content;
128
+ }
129
+ }
130
+
131
+ @mixin landscape-content(){
132
+ @media #{$breakpoint-landscape}{
133
+ @content;
134
+ }
135
+ }
136
+
137
+ @mixin media-breakpoint($width:null){
138
+ @media only screen and (max-width: #{$width}){
139
+ @content;
140
+ }
141
+ }
142
+
143
+ @mixin tab-focus(){
144
+ outline: $global-outline !important;
145
+ @include touch-content(){
146
+ outline: $global-touch-outline !important;
147
+ }
148
+ }
149
+
150
+ @mixin disable-focus(){
151
+ outline:0;
152
+ -moz-user-focus: ignore;
153
+ }
154
+
155
+ @mixin expand-panel($label:null){
156
+ margin-top:30px;
157
+ @include gutter-bleed();
158
+ min-height:30px;
159
+ @include dotted-border-bottom();
160
+ position:relative;
161
+ height:auto;
162
+ &:before{
163
+ position:absolute;
164
+ content:'#{$label}';
165
+ font-size:20px;
166
+ font-family: inherit;
167
+ color:#333;
168
+ top:-10px;
169
+ left:5px + $grid-column-gutter/2;
170
+
171
+ }
172
+ &:after{
173
+ font-family:bounc3;
174
+ position:absolute;
175
+ right:20px;
176
+ top:-10px;
177
+ content:'\e0df';
178
+ font-size:16px;
179
+ color:#333;
180
+ }
181
+ }
182
+
183
+ /* icon shortcut */
184
+ @mixin span-icon(){
185
+ span[class*='icon-'] {
186
+ @content;
187
+ }
188
+ }
189
+
190
+ /* flexbox shortcut mixins */
191
+ @mixin flexbox($alignment:flex-start,$justification:flex-start){
192
+ @include display-flex();
193
+ @include justify-content($justification);
194
+ @include align-items($alignment);
195
+ @content;
196
+ }
197
+
198
+ @mixin flexbox-column($alignment:flex-start,$justification:flex-start){
199
+ @include display-flex();
200
+ @include flex-direction(column);
201
+ @include justify-content($justification);
202
+ @include align-items($alignment);
203
+ @content;
204
+ }
205
+
206
+
207
+
@@ -0,0 +1,107 @@
1
+ /* Touch --------------------------------------------------------------------------------------------------------------*/
2
+
3
+ @mixin helpers-touch() {
4
+
5
+ @media #{$breakpoint-touch}{
6
+ //bleeds content elements across the grid gutter; i.e., 100% screen width on touch devices
7
+
8
+ %touch-gutter-bleed {
9
+ margin-right: - $grid-column-gutter/2 !important;
10
+ margin-left: - $grid-column-gutter/2 !important;
11
+
12
+ }
13
+ //-mobile boilerplate-----------------------------------------------------------------
14
+
15
+ /* Prevent callout */
16
+
17
+ .nocallout {
18
+ -webkit-touch-callout: none;
19
+ }
20
+
21
+ .pressed {
22
+ background-color: rgba(0, 0, 0, 0.7);
23
+ }
24
+
25
+ /* A hack for HTML5 contenteditable attribute on mobile */
26
+
27
+ textarea[contenteditable] {
28
+ -webkit-appearance: none;
29
+ }
30
+
31
+ /* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
32
+ they have been set as display: none */
33
+
34
+ .gifhidden {
35
+ position: absolute;
36
+ bottom: -100%;
37
+ }
38
+
39
+ /*
40
+ * Image replacement
41
+ */
42
+
43
+ .ir {
44
+ background-color: transparent;
45
+ background-repeat: no-repeat;
46
+ border: 0;
47
+ direction: ltr;
48
+ display: block;
49
+ overflow: hidden;
50
+ text-align: left;
51
+ text-indent: -999em;
52
+ }
53
+
54
+ .ir br {
55
+ display: none;
56
+ }
57
+
58
+ /*
59
+ * Hide from both screenreaders and browsers: h5bp.com/u
60
+ */
61
+
62
+ .hide {
63
+ display: none !important;
64
+ visibility: hidden;
65
+ }
66
+
67
+ /*
68
+ * Hide only visually, but have it available for screenreaders: h5bp.com/v
69
+ */
70
+
71
+ .visuallyhidden {
72
+ border: 0;
73
+ clip: rect(0 0 0 0);
74
+ height: 1px;
75
+ margin: -1px;
76
+ overflow: hidden;
77
+ padding: 0;
78
+ position: absolute;
79
+ width: 1px;
80
+ }
81
+
82
+ /*
83
+ * Extends the .visuallyhidden class to allow the element to be focusable
84
+ * when navigated to via the keyboard: h5bp.com/p
85
+ */
86
+
87
+ .visuallyhidden.focusable:active,
88
+ .visuallyhidden.focusable:focus {
89
+ clip: auto;
90
+ height: auto;
91
+ margin: 0;
92
+ overflow: visible;
93
+ position: static;
94
+ width: auto;
95
+ }
96
+
97
+ /*
98
+ * Hide visually and from screenreaders, but maintain layout
99
+ */
100
+
101
+ .invisible {
102
+ visibility: hidden;
103
+ }
104
+
105
+ }
106
+
107
+ }
@@ -0,0 +1,138 @@
1
+ @mixin helpers-visibility(){
2
+ .hide-for-desktop,
3
+ .hide-for-large,
4
+ .show-for-phone,
5
+ .show-for-small,
6
+ .hide-for-tablet-up,
7
+ .hide-for-medium-up
8
+ .show-for-tablet-down,
9
+ .show-for-medium-down,
10
+ .show-for-tablet,
11
+ .show-for-medium,
12
+ .show-for-touch {
13
+ display: none !important
14
+ }
15
+
16
+ .show-for-tablet,
17
+ .show-for-medium,
18
+ .show-for-tablet-up,
19
+ .show-for-medium-up
20
+ .show-for-desktop,
21
+ .show-for-large{
22
+ display: inherit !important;
23
+ }
24
+
25
+ .hide-for-touch
26
+ .hide-for-phone,
27
+ .hide-for-small,
28
+ .hide-for-tablet-down,
29
+ .hide-for-medium-down{
30
+ display: inherit !important;
31
+ }
32
+
33
+
34
+ @media #{$breakpoint-phone}{
35
+ .show-for-phone,
36
+ .show-for-small,
37
+ .show-for-tablet-down,
38
+ .show-for-medium-down{
39
+ display: inherit !important;
40
+ }
41
+
42
+ .hide-for-tablet-down,
43
+ .hide-for-medium-down,
44
+ .show-for-tablet,
45
+ .show-for-medium,
46
+ .show-for-tablet-up,
47
+ .show-for-medium-up,
48
+ .show-for-desktop,
49
+ .show-for-large{
50
+ display: none !important;
51
+ }
52
+
53
+ .hide-for-tablet,
54
+ .hide-for-medium,
55
+ .hide-for-tablet-up,
56
+ .hide-for-medium-up,
57
+ .hide-for-desktop,
58
+ .hide-for-large{
59
+ display: inherit !important;
60
+ }
61
+
62
+ .hide-for-phone,
63
+ .hide-for-small{
64
+ display: none !important;
65
+ }
66
+
67
+ .show-for-touch{
68
+ display: inherit !important;
69
+ }
70
+ .hide-for-touch{
71
+ display: none !important;
72
+ }
73
+ }
74
+
75
+ @media #{$breakpoint-tablet}{
76
+ .show-for-phone,
77
+ .show-for-small,
78
+ .show-for-tablet-down,
79
+ .show-for-medium-down{
80
+ display:none !important;
81
+ }
82
+
83
+ .hide-for-phone,
84
+ .hide-for-small,
85
+ .show-for-tablet,
86
+ .show-for-medium,
87
+ .show-for-tablet-up,
88
+ .show-for-medium-up{
89
+ display: inherit !important;
90
+ }
91
+
92
+ .show-for-desktop,
93
+ .show-for-large{
94
+ display: none !important;
95
+ }
96
+
97
+ .hide-for-tablet,
98
+ .hide-for-medium,
99
+ .hide-for-tablet-up,
100
+ .hide-for-medium-up,
101
+ .hide-for-tablet-down,
102
+ .hide-for-medium-down,{
103
+ display:none !important;
104
+ }
105
+ .hide-for-desktop,
106
+ .hide-for-large{
107
+ display: inherit !important;
108
+ }
109
+ .show-for-touch{
110
+ display: inherit !important;
111
+ }
112
+ .hide-for-touch{
113
+ display: none !important;
114
+ }
115
+ }
116
+
117
+ @media #{$breakpoint-portrait}{
118
+ .show-for-portrait,
119
+ .hide-for-landscape{
120
+ display:inherit;
121
+ }
122
+ .show-for-landscape,
123
+ .hide-for-portrait{
124
+ display:none;
125
+ }
126
+ }
127
+ @media #{$breakpoint-landscape}{
128
+ .show-for-portrait,
129
+ .hide-for-landscape{
130
+ display:none;
131
+ }
132
+ .show-for-landscape,
133
+ .hide-for-portrait{
134
+ display:inherit;
135
+ }
136
+ }
137
+
138
+ }