vhx-quartz 0.7.7 → 0.8.0

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.
@@ -0,0 +1,150 @@
1
+ /* .....................................
2
+ Fonts
3
+ ..................................... */
4
+ /* .....................................
5
+ Sets
6
+ ..................................... */
7
+ /* .....................................
8
+ Media Query Ranges
9
+ ..................................... */
10
+ /* .....................................
11
+ Colors - Grays
12
+ ..................................... */
13
+ /* .....................................
14
+ Colors - Teals
15
+ ..................................... */
16
+ /* .....................................
17
+ Colors - Red
18
+ ..................................... */
19
+ /* .....................................
20
+ Colors - Navy
21
+ ..................................... */
22
+ /* .....................................
23
+ Colors - Brand Palette
24
+ ..................................... */
25
+ /* .....................................
26
+ Colors - External Palette
27
+ ..................................... */
28
+ /* helper function for margin and padding
29
+ ......................................*/
30
+ /*.....................................
31
+ Admin Radio
32
+ ......................................*/
33
+ .form .radio-gray,
34
+ .form .radio-teal {
35
+ position: relative;
36
+ display: inline-block;
37
+ width: 100%;
38
+ list-style: none;
39
+ margin-left: 0;
40
+ color: #5E7887;
41
+ font-size: 14px;
42
+ background: transparent;
43
+ user-select: none;
44
+ /* radio
45
+ ...................................*/
46
+ /* label unchecked
47
+ ...................................*/
48
+ /* label checked
49
+ ...................................*/
50
+ /* stacked radio
51
+ ...................................*/
52
+ /* color styles
53
+ ...................................*/ }
54
+ .form .radio-gray input[type="radio"],
55
+ .form .radio-teal input[type="radio"] {
56
+ display: none; }
57
+ .form .radio-gray li,
58
+ .form .radio-teal li {
59
+ display: inline-block;
60
+ margin-right: 10px; }
61
+ .form .radio-gray li:after,
62
+ .form .radio-teal li:after {
63
+ clear: both; }
64
+ .form .radio-gray li:before, .form .radio-gray li:after,
65
+ .form .radio-teal li:before,
66
+ .form .radio-teal li:after {
67
+ content: " ";
68
+ display: table; }
69
+ .form .radio-gray label,
70
+ .form .radio-teal label {
71
+ display: block;
72
+ height: 20px;
73
+ line-height: 20px;
74
+ margin: 0px;
75
+ float: left;
76
+ box-sizing: border-box; }
77
+ .form .radio-gray label .radio--icon,
78
+ .form .radio-teal label .radio--icon {
79
+ position: relative;
80
+ display: inline-block;
81
+ width: 20px;
82
+ height: 20px;
83
+ margin-right: 5px;
84
+ float: left;
85
+ border: 1px solid #5E7887;
86
+ box-shadow: none;
87
+ box-sizing: border-box;
88
+ border-radius: 20px;
89
+ transition: box-shadow .2s ease, color .2s ease; }
90
+ .form .radio-gray label .radio--icon .circle-top,
91
+ .form .radio-teal label .radio--icon .circle-top {
92
+ opacity: 0;
93
+ transition: opacity .2s ease;
94
+ display: block;
95
+ height: 5px;
96
+ overflow: hidden;
97
+ position: absolute;
98
+ top: 4px;
99
+ left: 4px; }
100
+ .form .radio-gray label .radio--icon .circle-top span,
101
+ .form .radio-teal label .radio--icon .circle-top span {
102
+ display: block;
103
+ width: 10px;
104
+ height: 10px;
105
+ background: #869AA5;
106
+ border-radius: 10px; }
107
+ .form .radio-gray label .radio--icon .circle-bottom,
108
+ .form .radio-teal label .radio--icon .circle-bottom {
109
+ opacity: 0;
110
+ transition: opacity .2s ease;
111
+ display: block;
112
+ height: 5px;
113
+ overflow: hidden;
114
+ position: absolute;
115
+ bottom: 4px;
116
+ left: 4px; }
117
+ .form .radio-gray label .radio--icon .circle-bottom span,
118
+ .form .radio-teal label .radio--icon .circle-bottom span {
119
+ position: relative;
120
+ top: -5px;
121
+ display: block;
122
+ width: 10px;
123
+ height: 10px;
124
+ background: #5E7887;
125
+ border-radius: 10px; }
126
+ .form .radio-gray label .radio--label,
127
+ .form .radio-teal label .radio--label {
128
+ display: block;
129
+ float: left;
130
+ height: 20px; }
131
+ .form .radio-gray input[type="radio"]:checked + label .radio--icon .circle-top, .form .radio-gray input[type="radio"]:checked + label .radio--icon .circle-bottom,
132
+ .form .radio-teal input[type="radio"]:checked + label .radio--icon .circle-top,
133
+ .form .radio-teal input[type="radio"]:checked + label .radio--icon .circle-bottom {
134
+ opacity: 1;
135
+ transition: opacity .2s ease; }
136
+ .form .radio-gray.radio--stacked,
137
+ .form .radio-teal.radio--stacked {
138
+ display: block;
139
+ height: auto; }
140
+ .form .radio-gray.radio--stacked li,
141
+ .form .radio-teal.radio--stacked li {
142
+ display: block;
143
+ margin-right: 0px;
144
+ margin-bottom: 10px; }
145
+ .form .radio-gray.radio-teal .circle-top span,
146
+ .form .radio-teal.radio-teal .circle-top span {
147
+ background: #22B9B0 !important; }
148
+ .form .radio-gray.radio-teal .circle-bottom span,
149
+ .form .radio-teal.radio-teal .circle-bottom span {
150
+ background: #149A97 !important; }
@@ -0,0 +1,128 @@
1
+ /* .....................................
2
+ Fonts
3
+ ..................................... */
4
+ /* .....................................
5
+ Sets
6
+ ..................................... */
7
+ /* .....................................
8
+ Media Query Ranges
9
+ ..................................... */
10
+ /* .....................................
11
+ Colors - Grays
12
+ ..................................... */
13
+ /* .....................................
14
+ Colors - Teals
15
+ ..................................... */
16
+ /* .....................................
17
+ Colors - Red
18
+ ..................................... */
19
+ /* .....................................
20
+ Colors - Navy
21
+ ..................................... */
22
+ /* .....................................
23
+ Colors - Brand Palette
24
+ ..................................... */
25
+ /* .....................................
26
+ Colors - External Palette
27
+ ..................................... */
28
+ /* helper function for margin and padding
29
+ ......................................*/
30
+ .c-select--input-container:after {
31
+ background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2223%22%20height%3D%2223%22%20viewBox%3D%220%200%2023%2023%22%3E%3Cpath%20d%3D%22M21.8%2019.5L17.4%2015c-.6.9-1.5%201.7-2.4%202.4l4.5%204.4c1.4%201.6%203.8-.8%202.3-2.3z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2017.4c4.4-3%205.2-9.4%201.8-13.4C13.8.5%208.6-.3%204.7%202.3.9%204.7-.4%209.9%201.7%2014c2.2%204.4%207.7%206.2%2012.1%204.1.4-.2.8-.5%201.2-.7zm-5.2-1.7C6.7%2015.7%204%2013%204%209.8%204%206.7%206.7%204%209.8%204c3.2%200%205.8%202.7%205.8%205.8.1%203.2-2.6%205.9-5.8%205.9z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9.8%202.2c4.2%200%207.7%203.4%207.7%207.7%200%201.5-.5%203.1-1.4%204.3-.5.7-1%201.3-1.7%201.8l-.3.2c-1.2.9-2.8%201.3-4.3%201.3-4.2%200-7.7-3.4-7.7-7.7.1-4.2%203.5-7.6%207.7-7.6m0-1.5C4.7.7.6%204.8.6%209.9s4.1%209.2%209.2%209.2c1.8%200%203.7-.6%205.2-1.6.9-.6%201.7-1.4%202.3-2.4%201.1-1.5%201.6-3.3%201.6-5.2.1-5.1-4-9.2-9.1-9.2z%22%20fill%3D%22%23375667%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
32
+ background-repeat: no-repeat; }
33
+
34
+ /*
35
+ Mithril Chosen-like Dropdown w/ Search styles
36
+ See app/assets/javascripts/_shared/components/select/select.ui.js for markup
37
+ */
38
+ .c-select--container {
39
+ position: relative; }
40
+
41
+ .c-select--dropdown {
42
+ position: absolute;
43
+ max-height: 282px;
44
+ top: 55px;
45
+ left: 0;
46
+ width: 100%;
47
+ background-color: #fff;
48
+ background: #ffffff;
49
+ z-index: 2147483600;
50
+ border: 1px solid #D7DDE1;
51
+ border-radius: 5px;
52
+ display: none; }
53
+ .c-select--dropdown.is-open {
54
+ display: block; }
55
+ .c-select--dropdown:after, .c-select--dropdown:before {
56
+ bottom: 100%;
57
+ right: 22px;
58
+ border: solid transparent;
59
+ content: " ";
60
+ height: 0;
61
+ width: 0;
62
+ position: absolute;
63
+ pointer-events: none; }
64
+ .c-select--dropdown:after {
65
+ border-color: rgba(255, 255, 255, 0);
66
+ border-bottom-color: #ffffff;
67
+ border-width: 9px;
68
+ margin-right: -10px; }
69
+ .c-select--dropdown:before {
70
+ border-color: rgba(255, 255, 255, 0);
71
+ border-bottom-color: #D7DDE1;
72
+ border-width: 10px;
73
+ margin-right: -11px; }
74
+
75
+ .c-select--input-container {
76
+ position: absolute;
77
+ width: 100%;
78
+ border-radius: 5px;
79
+ z-index: 2;
80
+ background: #fff; }
81
+ .c-select--input-container:after {
82
+ position: absolute;
83
+ top: 50%;
84
+ right: 24px;
85
+ width: 20px;
86
+ height: 20px;
87
+ margin-top: -10px;
88
+ content: ' ';
89
+ display: block;
90
+ background-position: 97% 50%;
91
+ background-size: 15px; }
92
+
93
+ .c-select--container.has-search .c-select--dropdown {
94
+ min-height: 150px; }
95
+ .c-select--container.has-search .c-select--options {
96
+ margin-top: 70px; }
97
+
98
+ .c-select--options {
99
+ margin-top: 15px;
100
+ margin-bottom: 15px;
101
+ overflow-y: auto;
102
+ max-height: 210px; }
103
+ .c-select--options.is-loading {
104
+ background-position: center center;
105
+ background-size: 40px;
106
+ background-repeat: no-repeat;
107
+ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%20%20viewBox%3D%220%200%2040%2040%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20opacity%3D%220.2%22%20fill%3D%22%237a878e%22%20d%3D%22M20.201%2C5.169c-8.254%2C0-14.946%2C6.692-14.946%2C14.946c0%2C8.255%2C6.692%2C14.946%2C14.946%2C14.946%0D%0A%20%20s14.946-6.691%2C14.946-14.946C35.146%2C11.861%2C28.455%2C5.169%2C20.201%2C5.169z%20M20.201%2C31.749c-6.425%2C0-11.634-5.208-11.634-11.634%0D%0A%20%20c0-6.425%2C5.209-11.634%2C11.634-11.634c6.425%2C0%2C11.633%2C5.209%2C11.633%2C11.634C31.834%2C26.541%2C26.626%2C31.749%2C20.201%2C31.749z%22%2F%3E%0D%0A%3Cpath%20fill%3D%22%237a878e%22%20d%3D%22M26.013%2C10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0%0D%0A%20%20C22.32%2C8.481%2C24.301%2C9.057%2C26.013%2C10.047z%22%3E%0D%0A%20%20%3CanimateTransform%20attributeType%3D%22xml%22%0D%0A%20%20%20%20attributeName%3D%22transform%22%0D%0A%20%20%20%20type%3D%22rotate%22%0D%0A%20%20%20%20from%3D%220%2020%2020%22%0D%0A%20%20%20%20to%3D%22360%2020%2020%22%0D%0A%20%20%20%20dur%3D%220.5s%22%0D%0A%20%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0D%0A%20%20%3C%2Fpath%3E%0D%0A%3C%2Fsvg%3E"); }
108
+ .c-select--options.is-loading li {
109
+ opacity: 0; }
110
+
111
+ .c-select--option {
112
+ color: #233741; }
113
+ .c-select--option.is-selected {
114
+ cursor: pointer;
115
+ background-color: #F0F2F4; }
116
+ .c-select--option.padding-horizontal-large {
117
+ padding-left: 25px !important;
118
+ padding-right: 25px !important; }
119
+ .c-select--option.padding-vertical-small {
120
+ padding-top: 0.3125rem !important;
121
+ padding-bottom: 0.3125rem !important; }
122
+
123
+ .c-select--item-label {
124
+ max-width: 80%;
125
+ white-space: nowrap;
126
+ overflow: hidden;
127
+ text-overflow: ellipsis;
128
+ display: inline-block; }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: vhx-quartz
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.7.7
4
+ version: 0.8.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Scott Robertson, Courtney Burton, Steven Bone, David Gonzalez
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-06-20 00:00:00.000000000 Z
11
+ date: 2016-07-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties
@@ -91,8 +91,18 @@ files:
91
91
  - README.md
92
92
  - lib/vhx/quartz.rb
93
93
  - lib/vhx/quartz/version.rb
94
+ - vendor/assets/javascripts/vhx-quartz.autosuggest.js
95
+ - vendor/assets/javascripts/vhx-quartz.checkbox.js
96
+ - vendor/assets/javascripts/vhx-quartz.filter.js
97
+ - vendor/assets/javascripts/vhx-quartz.header.js
98
+ - vendor/assets/javascripts/vhx-quartz.radio.js
99
+ - vendor/assets/javascripts/vhx-quartz.search_input.js
100
+ - vendor/assets/javascripts/vhx-quartz.select.js
101
+ - vendor/assets/stylesheets/vhx-quartz.autosuggest.css
102
+ - vendor/assets/stylesheets/vhx-quartz.checkbox.css
94
103
  - vendor/assets/stylesheets/vhx-quartz.css
95
104
  - vendor/assets/stylesheets/vhx-quartz.css.map
105
+ - vendor/assets/stylesheets/vhx-quartz.filter.css
96
106
  - vendor/assets/stylesheets/vhx-quartz.icon-activity.css
97
107
  - vendor/assets/stylesheets/vhx-quartz.icon-add-member.css
98
108
  - vendor/assets/stylesheets/vhx-quartz.icon-alert.css
@@ -250,6 +260,8 @@ files:
250
260
  - vendor/assets/stylesheets/vhx-quartz.icons-ui-white.css
251
261
  - vendor/assets/stylesheets/vhx-quartz.icons-ui.css
252
262
  - vendor/assets/stylesheets/vhx-quartz.min.css
263
+ - vendor/assets/stylesheets/vhx-quartz.radio.css
264
+ - vendor/assets/stylesheets/vhx-quartz.select.css
253
265
  homepage: http://github.com/vhx/quartz-rails
254
266
  licenses:
255
267
  - MIT