wcc-styles 0.1.2 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (26) hide show
  1. checksums.yaml +4 -4
  2. data/README-GEM.md +5 -3
  3. data/lib/assets/javascripts/wcc/styles/{tessa.js.coffee → tessa.coffee} +0 -0
  4. data/lib/assets/javascripts/wcc/{styles/application.js → styles.js} +0 -0
  5. data/lib/assets/stylesheets/wcc/styles/{base.css.scss → base.scss} +5 -36
  6. data/lib/assets/stylesheets/wcc/styles/extensions/_all.scss +3 -0
  7. data/lib/assets/stylesheets/wcc/styles/{base/custom_file_inputs.css.scss → extensions/_custom_file_inputs.scss} +0 -0
  8. data/lib/assets/stylesheets/wcc/styles/{base/custom_selects.css.scss → extensions/_custom_selects.scss} +0 -0
  9. data/lib/assets/stylesheets/wcc/styles/{base/icons.css.scss → extensions/_icons.scss} +0 -0
  10. data/lib/assets/stylesheets/wcc/styles/{variables → setup}/_colors.scss +0 -2
  11. data/lib/assets/stylesheets/wcc/styles/{snippets → setup}/_grid.scss +0 -0
  12. data/lib/assets/stylesheets/wcc/styles/{variables → setup}/_mixins.scss +1 -1
  13. data/lib/assets/stylesheets/wcc/styles/{snippets → setup}/_normalize.scss +0 -0
  14. data/lib/assets/stylesheets/wcc/styles/{variables → setup}/_typography.scss +0 -3
  15. data/lib/assets/stylesheets/wcc/styles/snippets/_admin.scss +24 -0
  16. data/lib/assets/stylesheets/wcc/styles/snippets/_all.scss +1 -0
  17. data/lib/assets/stylesheets/wcc/styles/snippets/_elements.scss +0 -99
  18. data/lib/assets/stylesheets/wcc/styles.scss +2 -0
  19. data/lib/wcc/styles/version.rb +1 -1
  20. metadata +16 -109
  21. data/lib/assets/stylesheets/wcc/styles/admin/_admin_base.scss +0 -24
  22. data/lib/assets/stylesheets/wcc/styles/admin/_all.scss +0 -1
  23. data/lib/assets/stylesheets/wcc/styles/apps/_all.scss +0 -2
  24. data/lib/assets/stylesheets/wcc/styles/apps/_events.scss +0 -22
  25. data/lib/assets/stylesheets/wcc/styles/apps/_staff.scss +0 -151
  26. data/lib/assets/stylesheets/wcc/styles/base/all.css.scss +0 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 1dd7db3cc160365f57fcd375727274f470a601a7
4
- data.tar.gz: 310b7ff0239c7d39ce921016e172800a083d7afb
3
+ metadata.gz: bfc733be66a58197c0ee58d1231e45de8122b843
4
+ data.tar.gz: 1a5b63d395cf52ccdce30821debb6ac4b68595a6
5
5
  SHA512:
6
- metadata.gz: c6edcb5efa8762e06dcacad0643a20ce6ccb69c2af21a8af5d031084c854ea6a03bfa1a86bcefdb567ab574734c3355626aecb9bb307d05f173937ad75698db6
7
- data.tar.gz: bb62757ef55ae7d437c7c3844e04e9bbec59ba7db8e608b61f253db3b6269ebf50e3a34a5459cade4ec807cade86f2d584b8d409fcae8f954a59f5e593725587
6
+ metadata.gz: d72b21e835c53e1cb2e8f6312b01aeafe8d91e9fda19a8bc88010e951432080ad2a2925bf9979db986ddc292403abd734c444363930dd5dda55246e05927994e
7
+ data.tar.gz: 5db28b65eca10c8be5d0223952e8df0a2c3b11c402978baa952b2e94c0a091e09926ad61d199ec0e73ddf14f8c64329c42f81e37c1868dd0e1090a16449917b6
data/README-GEM.md CHANGED
@@ -13,6 +13,9 @@ Add these lines to your application's Gemfile:
13
13
  ```ruby
14
14
  gem 'wcc-styles'
15
15
 
16
+ gem 'sass-rails', '~> 5.0.4'
17
+ gem 'coffee-rails', '~> 4.1.0'
18
+ gem 'compass-rails'
16
19
  source 'https://rails-assets.org' do
17
20
  gem 'rails-assets-selectize'
18
21
  gem 'rails-assets-dropzone'
@@ -33,13 +36,12 @@ So to include styles in an `application.sass` within your application
33
36
  include the following line:
34
37
 
35
38
  ```sass
36
- # Import all styles
37
- @import "wcc/styles/base/all";
39
+ @import "wcc/styles";
38
40
  ```
39
41
 
40
42
  To include the Javascript code add this to your `application.js`:
41
43
 
42
44
  ```javascript
43
- //= require wcc/styles/application
45
+ //= require wcc/styles
44
46
  ```
45
47
 
@@ -1,15 +1,9 @@
1
- /*
2
- Title: Watermark Base Pattern Library Styles
3
- Release Date: 08/12/14
4
- Version: 1.0.7
5
- */
6
-
7
1
  @import "compass/layout/stretching";
8
2
  @import "compass";
9
3
 
10
- @import "variables/mixins";
11
- @import "variables/colors";
12
- @import "variables/typography";
4
+ @import "setup/mixins";
5
+ @import "setup/colors";
6
+ @import "setup/typography";
13
7
 
14
8
  /*===========================================
15
9
  Base Styles and Resets
@@ -59,32 +53,7 @@ a {
59
53
  outline: none;
60
54
  }
61
55
 
62
- /*===========================================
63
- Normalize
64
- ============================================*/
65
-
66
- @import "snippets/normalize";
67
-
68
- /*===========================================
69
- The Grid
70
- ============================================*/
71
-
72
- @import "snippets/grid";
73
-
74
- /*===========================================
75
- All Snippets
76
- ============================================*/
56
+ @import "setup/normalize";
57
+ @import "setup/grid";
77
58
 
78
59
  @import "snippets/all";
79
-
80
- /*===========================================
81
- All Admin Styles
82
- ============================================*/
83
-
84
- @import "admin/all";
85
-
86
- /*===========================================
87
- All App Specific Styles
88
- ============================================*/
89
-
90
- @import "apps/all";
@@ -0,0 +1,3 @@
1
+ @import "wcc/styles/extensions/icons";
2
+ @import "wcc/styles/extensions/custom_selects";
3
+ @import "wcc/styles/extensions/custom_file_inputs";
@@ -1,5 +1,3 @@
1
- // Color variables (SASS Only) - Managed in /sass/variables/_colors.scss
2
-
3
1
  $red: #962D27;
4
2
  $orange: #EB7F4C;
5
3
  $dark-orange: darken($orange, 2%);
@@ -11,4 +11,4 @@
11
11
  background-color: darken($button-color, 6%);
12
12
  }
13
13
 
14
- }
14
+ }
@@ -1,10 +1,7 @@
1
- // Typography variables (SASS Only) - Managed in /sass/variables/_typography.scss
2
-
3
1
  @import "colors";
4
2
 
5
3
  @import url(//fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:300,400,600,700);
6
4
 
7
- //Variables
8
5
  $font-size: 100 !default;
9
6
  $font-base: 16 * ($font-size/100) !default;
10
7
  $line-height: 1.5;
@@ -0,0 +1,24 @@
1
+ .layout-header {
2
+ margin-top: 5px;
3
+ .logo {
4
+ @media(max-width: 768px) {
5
+ width: 100%;
6
+ text-align: center;
7
+ }
8
+ }
9
+ img {
10
+ width: 75px;
11
+ height: 75px;
12
+ }
13
+ .navbar-container {
14
+ margin-top: 15px;
15
+ }
16
+ }
17
+
18
+ .page-header {
19
+ position: relative;
20
+ div.actions {
21
+ position: absolute;
22
+ right: 0; bottom: 5px;
23
+ }
24
+ }
@@ -1,3 +1,4 @@
1
+ @import "admin";
1
2
  @import "alerts";
2
3
  @import "buttons";
3
4
  @import "datetimepicker";
@@ -1,102 +1,3 @@
1
-
2
- .label {
3
- display: inline;
4
- padding: .2em .6em .3em;
5
- font-size: 75%;
6
- font-weight: bold;
7
- line-height: 1;
8
- color: #ffffff;
9
- text-align: center;
10
- white-space: nowrap;
11
- vertical-align: baseline;
12
- border-radius: .25em;
13
- }
14
- a.label:hover,
15
- a.label:focus {
16
- color: #ffffff;
17
- text-decoration: none;
18
- cursor: pointer;
19
- }
20
- .label:empty {
21
- display: none;
22
- }
23
- .btn .label {
24
- position: relative;
25
- top: -1px;
26
- }
27
- .label-default {
28
- background-color: #777777;
29
- }
30
- .label-default[href]:hover,
31
- .label-default[href]:focus {
32
- background-color: #5e5e5e;
33
- }
34
- .label-primary {
35
- background-color: $light-grey;
36
- }
37
- .label-primary[href]:hover,
38
- .label-primary[href]:focus {
39
- background-color: $light-grey;
40
- }
41
- .label-success {
42
- background-color: $green;
43
- }
44
- .label-success[href]:hover,
45
- .label-success[href]:focus {
46
- background-color: $green;
47
- }
48
- .label-info {
49
- background-color: $yellow;
50
- }
51
- .label-info[href]:hover,
52
- .label-info[href]:focus {
53
- background-color: $yellow;
54
- }
55
- .label-warning {
56
- background-color: $orange;
57
- }
58
- .label-warning[href]:hover,
59
- .label-warning[href]:focus {
60
- background-color: $orange;
61
- }
62
- .label-danger {
63
- background-color: $red;
64
- }
65
- .label-danger[href]:hover,
66
- .label-danger[href]:focus {
67
- background-color: $red;
68
- }
69
- .badge {
70
- display: inline-block;
71
- min-width: 10px;
72
- padding: 3px 7px;
73
- font-size: 12px;
74
- font-weight: bold;
75
- color: #ffffff;
76
- line-height: 1;
77
- vertical-align: baseline;
78
- white-space: nowrap;
79
- text-align: center;
80
- background-color: #777777;
81
- border-radius: 10px;
82
- }
83
- .badge:empty {
84
- display: none;
85
- }
86
- .btn .badge {
87
- position: relative;
88
- top: -1px;
89
- }
90
- .btn-xs .badge {
91
- top: 0;
92
- padding: 1px 5px;
93
- }
94
- a.badge:hover,
95
- a.badge:focus {
96
- color: #ffffff;
97
- text-decoration: none;
98
- cursor: pointer;
99
- }
100
1
  figure {
101
2
  margin: 0;
102
3
  }
@@ -0,0 +1,2 @@
1
+ @import "styles/base";
2
+ @import "styles/extensions/all";
@@ -1,5 +1,5 @@
1
1
  module WCC
2
2
  module Styles
3
- VERSION = "0.1.2"
3
+ VERSION = "1.0.0"
4
4
  end
5
5
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: wcc-styles
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 1.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Watermark Community Church
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-05-26 00:00:00.000000000 Z
11
+ date: 2016-05-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: coffee-rails
@@ -108,96 +108,7 @@ dependencies:
108
108
  - - '='
109
109
  - !ruby/object:Gem::Version
110
110
  version: 2.4.5
111
- description: |+
112
- # WCC::Styles
113
-
114
-
115
-
116
- This gem holds all of the styles for Watermark apps. For Rails apps a
117
-
118
- Rails Engine will automatically be set up that configures the asset
119
-
120
- pipeline properly.
121
-
122
-
123
-
124
- Check out the [Watermark Pattern Library](https://patterns.watermark.org).
125
-
126
-
127
-
128
- ## Installation
129
-
130
-
131
-
132
- Add these lines to your application's Gemfile:
133
-
134
-
135
-
136
- ```ruby
137
-
138
- gem 'wcc-styles'
139
-
140
-
141
-
142
- source 'https://rails-assets.org' do
143
-
144
- gem 'rails-assets-selectize'
145
-
146
- gem 'rails-assets-dropzone'
147
-
148
- gem 'rails-assets-moment'
149
-
150
- gem 'rails-assets-datetimepicker', '2.4.5'
151
-
152
- end
153
-
154
-
155
-
156
- ```
157
-
158
-
159
-
160
- And then execute:
161
-
162
-
163
-
164
- $ bundle
165
-
166
-
167
-
168
- ## Usage
169
-
170
-
171
-
172
- The assets are all namespaced in `wcc/styles` within the asset pipeline.
173
-
174
- So to include styles in an `application.sass` within your application
175
-
176
- include the following line:
177
-
178
-
179
-
180
- ```sass
181
-
182
- # Import all styles
183
-
184
- @import "wcc/styles/base/all";
185
-
186
- ```
187
-
188
-
189
-
190
- To include the Javascript code add this to your `application.js`:
191
-
192
-
193
-
194
- ```javascript
195
-
196
- //= require wcc/styles/application
197
-
198
- ```
199
-
200
-
111
+ description: Check out the Watermark Patterns library at https://patterns.watermark.org/
201
112
  email:
202
113
  - dev@watermark.org
203
114
  executables: []
@@ -210,20 +121,21 @@ files:
210
121
  - lib/assets/images/wcc/styles/logo-text.png
211
122
  - lib/assets/images/wcc/styles/logo.png
212
123
  - lib/assets/images/wcc/styles/logo.svg
213
- - lib/assets/javascripts/wcc/styles/application.js
124
+ - lib/assets/javascripts/wcc/styles.js
214
125
  - lib/assets/javascripts/wcc/styles/selectize.js
215
- - lib/assets/javascripts/wcc/styles/tessa.js.coffee
126
+ - lib/assets/javascripts/wcc/styles/tessa.coffee
216
127
  - lib/assets/javascripts/wcc/styles/wcc.datetimepicker.js
217
- - lib/assets/stylesheets/wcc/styles/admin/_admin_base.scss
218
- - lib/assets/stylesheets/wcc/styles/admin/_all.scss
219
- - lib/assets/stylesheets/wcc/styles/apps/_all.scss
220
- - lib/assets/stylesheets/wcc/styles/apps/_events.scss
221
- - lib/assets/stylesheets/wcc/styles/apps/_staff.scss
222
- - lib/assets/stylesheets/wcc/styles/base.css.scss
223
- - lib/assets/stylesheets/wcc/styles/base/all.css.scss
224
- - lib/assets/stylesheets/wcc/styles/base/custom_file_inputs.css.scss
225
- - lib/assets/stylesheets/wcc/styles/base/custom_selects.css.scss
226
- - lib/assets/stylesheets/wcc/styles/base/icons.css.scss
128
+ - lib/assets/stylesheets/wcc/styles.scss
129
+ - lib/assets/stylesheets/wcc/styles/base.scss
130
+ - lib/assets/stylesheets/wcc/styles/extensions/_all.scss
131
+ - lib/assets/stylesheets/wcc/styles/extensions/_custom_file_inputs.scss
132
+ - lib/assets/stylesheets/wcc/styles/extensions/_custom_selects.scss
133
+ - lib/assets/stylesheets/wcc/styles/extensions/_icons.scss
134
+ - lib/assets/stylesheets/wcc/styles/setup/_colors.scss
135
+ - lib/assets/stylesheets/wcc/styles/setup/_grid.scss
136
+ - lib/assets/stylesheets/wcc/styles/setup/_mixins.scss
137
+ - lib/assets/stylesheets/wcc/styles/setup/_normalize.scss
138
+ - lib/assets/stylesheets/wcc/styles/setup/_typography.scss
227
139
  - lib/assets/stylesheets/wcc/styles/snippets/_admin.scss
228
140
  - lib/assets/stylesheets/wcc/styles/snippets/_alerts.scss
229
141
  - lib/assets/stylesheets/wcc/styles/snippets/_all.scss
@@ -231,18 +143,13 @@ files:
231
143
  - lib/assets/stylesheets/wcc/styles/snippets/_datetimepicker.scss
232
144
  - lib/assets/stylesheets/wcc/styles/snippets/_elements.scss
233
145
  - lib/assets/stylesheets/wcc/styles/snippets/_forms.scss
234
- - lib/assets/stylesheets/wcc/styles/snippets/_grid.scss
235
146
  - lib/assets/stylesheets/wcc/styles/snippets/_labels.scss
236
147
  - lib/assets/stylesheets/wcc/styles/snippets/_navs.scss
237
- - lib/assets/stylesheets/wcc/styles/snippets/_normalize.scss
238
148
  - lib/assets/stylesheets/wcc/styles/snippets/_pagination.scss
239
149
  - lib/assets/stylesheets/wcc/styles/snippets/_selectize.scss
240
150
  - lib/assets/stylesheets/wcc/styles/snippets/_sidebar_slideout.scss
241
151
  - lib/assets/stylesheets/wcc/styles/snippets/_tables.scss
242
152
  - lib/assets/stylesheets/wcc/styles/snippets/_top_nav.scss
243
- - lib/assets/stylesheets/wcc/styles/variables/_colors.scss
244
- - lib/assets/stylesheets/wcc/styles/variables/_mixins.scss
245
- - lib/assets/stylesheets/wcc/styles/variables/_typography.scss
246
153
  - lib/wcc/styles.rb
247
154
  - lib/wcc/styles/engine.rb
248
155
  - lib/wcc/styles/helpers.rb
@@ -1,24 +0,0 @@
1
- .layout-header {
2
- margin-top: 5px;
3
- .logo {
4
- @media(max-width: 768px) {
5
- width: 100%;
6
- text-align: center;
7
- }
8
- }
9
- img {
10
- width: 75px;
11
- height: 75px;
12
- }
13
- .navbar-container {
14
- margin-top: 15px;
15
- }
16
- }
17
-
18
- .page-header {
19
- position: relative;
20
- div.actions {
21
- position: absolute;
22
- right: 0; bottom: 5px;
23
- }
24
- }
@@ -1 +0,0 @@
1
- @import "admin_base";
@@ -1,2 +0,0 @@
1
- @import "events";
2
- @import "staff";
@@ -1,22 +0,0 @@
1
- .scheduled-occurrence {
2
- background-color: $neutral1;
3
- padding: 10px;
4
- margin: 3px 0;
5
- width: 100%;
6
- float: left;
7
- display: inline-block;
8
-
9
- .start-date {
10
- float: left;
11
- }
12
-
13
- .remove {
14
- float: right;
15
- }
16
- }
17
-
18
- .date-box {
19
- border: 1px solid $neutral2;
20
- padding: 15px 20px;
21
- margin-bottom: 20px;
22
- }
@@ -1,151 +0,0 @@
1
- .helpdesk {
2
- float: right;
3
- margin: 0px 15px 0 0;
4
- padding: 0;
5
-
6
- @media (max-width: 768px) {
7
- display: none;
8
- }
9
-
10
- .btn {
11
- display: inline;
12
- }
13
- }
14
-
15
- .responsive-icon {
16
- margin-right: 10px;
17
-
18
- &:last-child {
19
- margin-right: 0;
20
- }
21
- }
22
-
23
- .responsive-text-hide {
24
- float: right;
25
- }
26
-
27
- .auth-apps {
28
- @include box-shadow(rgba(0,0,0,0.2) 0px 3px 20px inset);
29
- background-color: $text;
30
- padding: 20px;
31
- text-align: center;
32
-
33
- h3 {
34
- display: inline-block;
35
- width: auto;
36
- }
37
-
38
- ul.apps {
39
- padding: 0;
40
- margin: 0;
41
- list-style: none;
42
-
43
- li {
44
- display: inline-block;
45
- font-weight: 600;
46
- font-size: 10px;
47
- color: white;
48
- text-transform: uppercase;
49
- letter-spacing: .16em;
50
- margin: 0 5px;
51
-
52
- &.app-link {
53
- margin: 0 3px;
54
- border: 1px solid $light-grey;
55
-
56
- a {
57
- color: $light-grey;
58
- font-size: 10px;
59
- font-weight: 400;
60
- padding: 6px 15px;
61
- display: block;
62
- text-transform: uppercase;
63
- letter-spacing: .16em;
64
- }
65
- }
66
-
67
- }
68
- }
69
- }
70
-
71
- .staff-section {
72
- border-bottom: 2px solid #F0F0F0;
73
- position: relative;
74
- float: left;
75
- width: 100%;
76
- min-height: 400px;
77
- }
78
-
79
- .staff-section .gif-holder {
80
- -webkit-background-size: cover;
81
- -moz-background-size: cover;
82
- -o-background-size: cover;
83
- background-size: cover;
84
-
85
- min-height: 400px;
86
- position: absolute;
87
- top: 0px;
88
- left: 0px;
89
- right: 0px;
90
- bottom: 0px;
91
- display: inline;
92
- }
93
-
94
- @media (max-width: 768px) {
95
- .staff-section .gif-holder {
96
- width: 100%;
97
- min-height: 300px;
98
- float:left;
99
- display: block;
100
- }
101
- }
102
-
103
- .staff-section .section-links {
104
- padding: 50px 50px 70px 50px;
105
- float: right;
106
- }
107
-
108
- @media (max-width: 768px) {
109
- .staff-section .gif-holder {
110
- position: relative;
111
- }
112
- .staff-section .section-links {
113
- padding: 30px;
114
- float: left;
115
- display: inline;
116
- }
117
- }
118
-
119
- .staff-section .section-links ul.boxed-links {
120
- list-style: none;
121
- margin: 0;
122
- padding: 0;
123
- }
124
-
125
- .staff-section .section-links ul.boxed-links li {
126
- float: left;
127
- display: inline-block;
128
- margin: 10px 20px 10px 0;
129
- }
130
-
131
- .staff-section .section-links ul.boxed-links li a {
132
- -moz-border-radius: 10px;
133
- -webkit-border-radius: 10px;
134
- background-color: #F2F2F2;
135
- border-radius: 10px;
136
- color: #292929;
137
- display: inline-block;
138
- float: left;
139
- padding: 20px 30px;
140
- transition: all 0.2s ease;
141
- }
142
-
143
- @media (max-width: 768px) {
144
- .staff-section .section-links ul.boxed-links li a {
145
- padding: 10px 20px;
146
- }
147
- }
148
-
149
- .staff-section .section-links ul.boxed-links li a:hover {
150
- color: #EB7F4C;
151
- }
@@ -1,4 +0,0 @@
1
- @import "wcc/styles/base";
2
- @import "wcc/styles/base/icons";
3
- @import "wcc/styles/base/custom_selects";
4
- @import "wcc/styles/base/custom_file_inputs";