bedrock_sass 0.1.4 → 0.1.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.
@@ -14,6 +14,7 @@
14
14
  @import 'components/tiny-mce-editor';
15
15
  @import 'components/select-box';
16
16
  @import 'components/file-input';
17
+ @import 'components/seo-analysis';
17
18
 
18
19
  @include bedrock-global-styles;
19
20
  @include bedrock-prototype-classes;
@@ -31,3 +32,4 @@
31
32
  @include bedrock-tiny-mce-editor;
32
33
  @include bedrock-select-box;
33
34
  @include bedrock-file-input;
35
+ @include bedrock-seo-analysis;
@@ -43,6 +43,7 @@ $dropzone-upload-active-border-color: $primary-color !default;
43
43
  visibility: hidden;
44
44
  transition-property: visibility opacity;
45
45
  transition-duration: .2s;
46
+ pointer-events: none;
46
47
  }
47
48
  }
48
49
 
@@ -99,12 +99,39 @@ $panel-radius: $global-radius !default;
99
99
  @include panel-fill;
100
100
  }
101
101
 
102
+ @mixin panel-section($color) {
103
+ padding: $panel-padding;
104
+ @include panel-border($color);
105
+ @include panel-fill;
106
+ border-width: 1px 0;
107
+
108
+ &.first {
109
+ border-top: 0;
110
+ margin-top: -$panel-padding;
111
+ }
112
+
113
+ &.last {
114
+ border-bottom: 0;
115
+ margin-bottom: -$panel-padding;
116
+ }
117
+
118
+ &.expanded {
119
+ margin-left: -$panel-padding;
120
+ margin-right: -$panel-padding;
121
+ width: auto !important;
122
+ }
123
+ }
124
+
102
125
 
103
126
  // Panel Component
104
127
 
105
128
  @mixin bedrock-panel {
106
129
  .panel {
107
130
  @include panel($panel-background);
131
+
132
+ .panel-section {
133
+ @include panel-section($panel-background);
134
+ }
108
135
  }
109
136
 
110
137
  .panel-content {
@@ -11,9 +11,13 @@
11
11
  display: block;
12
12
  width: 100%;
13
13
  color: $body-font-color;
14
- background: $light-gray;
14
+ background: transparent;
15
15
  position: relative;
16
- box-shadow: inset 0 0 0 1px $medium-gray;
16
+ border-bottom: $input-border;
17
+
18
+ &:nth-last-child(2) {
19
+ border-bottom: 0;
20
+ }
17
21
 
18
22
  &:hover {
19
23
  padding-right: $global-padding * 2;
@@ -25,19 +29,19 @@
25
29
  }
26
30
 
27
31
  .select2-selection__choice__remove {
28
- color: $white;
29
- background: $alert-color;
32
+ color: $alert-color;
30
33
  height: 100%;
31
34
  padding: $global-padding / 1.5;
32
35
  position: absolute;
33
36
  top: 0;
34
37
  right: 0;
35
- display: none;
36
38
  margin: 0;
37
39
  }
38
40
 
39
41
  .select2-selection__rendered {
40
42
  padding: 0;
43
+ overflow: visible;
44
+ white-space: normal;
41
45
  }
42
46
  }
43
47
 
@@ -0,0 +1,200 @@
1
+ $seo-analysis-background: $panel-background !default;
2
+ $seo-analysis-color-scale: $panel-color-scale !default;
3
+ $seo-analysis-color: $medium-gray !default;
4
+ $seo-analysis-border: 1px solid smart-scale($seo-analysis-background, $seo-analysis-color-scale) !default;
5
+
6
+ @import "snippet-editor";
7
+ @import "analysis";
8
+
9
+ // SEO Analysis Mixins
10
+
11
+ @mixin seo-analysis-preview {
12
+ .yoast-section, .snippet-editor__preview {
13
+ max-width: 100%;
14
+ }
15
+
16
+ .snippet-editor__preview {
17
+ margin: 0;
18
+ padding: 0;
19
+ padding-right: $panel-padding * 4;
20
+ position: relative;
21
+ }
22
+
23
+ .snippet-editor__view {
24
+ margin: 0;
25
+ width: 40rem;
26
+ max-width: 100%;
27
+
28
+ .snippet_container__url {
29
+
30
+ .urlFull {
31
+
32
+ cite {
33
+ display: inline;
34
+
35
+ &:before {
36
+ display: none;
37
+ }
38
+ }
39
+ }
40
+ }
41
+ }
42
+
43
+ .snippet-editor__view--desktop {
44
+ padding: 10px 15px;
45
+ }
46
+
47
+ .snippet-editor__view--mobile {
48
+ box-shadow: none;
49
+ border: $seo-analysis-border;
50
+ }
51
+
52
+ .snippet-editor__heading {
53
+ display: none !important;
54
+ }
55
+
56
+ .seo-preview-variants {
57
+ padding: $panel-padding;
58
+ min-height: 10rem;
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ }
63
+
64
+ .seo-preview-score {
65
+ text-align: center;
66
+ color: $medium-gray;
67
+
68
+ .score {
69
+ display: block;
70
+ white-space: nowrap;
71
+ }
72
+ }
73
+
74
+ .seo-preview-actions {
75
+ position: absolute;
76
+ top: 0;
77
+ right: 0;
78
+ width: $panel-padding * 3;
79
+ height: 100%;
80
+ background: none;
81
+ border-left: $seo-analysis-border;
82
+ }
83
+
84
+ .snippet-editor__view-toggle,
85
+ .snippet-editor__edit-button,
86
+ .snippet-editor__view-icon {
87
+ background: none;
88
+ width: 100%;
89
+ height: auto;
90
+ margin: 0;
91
+ padding: 0;
92
+ border: 0;
93
+ outline: 0;
94
+ border-radius: 0;
95
+ }
96
+
97
+ .snippet-editor__view-toggle {
98
+ display: block;
99
+ height: (100% / 3) * 2;
100
+
101
+ .snippet-editor__view-icon {
102
+ height: 50%;
103
+ border-bottom: $seo-analysis-border;
104
+ }
105
+
106
+ .snippet-editor__view-icon--active {
107
+ opacity: 1;
108
+ }
109
+ }
110
+
111
+ .snippet-editor__edit-button,
112
+ .snippet-editor__view-icon {
113
+ display: flex;
114
+ align-items: center;
115
+ justify-content: center;
116
+ opacity: .5;
117
+ }
118
+
119
+ .snippet-editor__edit-button {
120
+ height: (100% / 3);
121
+
122
+ &[aria-expanded="true"] {
123
+ opacity: 1;
124
+ }
125
+ }
126
+ }
127
+
128
+ @mixin seo-analysis-form {
129
+ .snippet-editor__form {
130
+ padding: $panel-padding;
131
+ border-top: $seo-analysis-border;
132
+ }
133
+
134
+ .snippet-editor__submit {
135
+ display: none !important;
136
+ }
137
+
138
+ .snippet-editor__input {
139
+ @include form-element;
140
+ }
141
+ }
142
+
143
+ @mixin seo-analysis-keyword {
144
+ .seo-keyword {
145
+ padding: $panel-padding;
146
+ border-bottom: $seo-analysis-border;
147
+
148
+ input {
149
+ margin: 0;
150
+ }
151
+ }
152
+ }
153
+
154
+ @mixin seo-analysis-output {
155
+ .seo-output {
156
+ padding: $panel-padding;
157
+ border-top: $seo-analysis-border;
158
+ }
159
+
160
+ .assessment-results {
161
+ margin: 0;
162
+ font-size: unset;
163
+
164
+ .wpseo-score-icon {
165
+ margin-top: 7px;
166
+ }
167
+ }
168
+
169
+ li.score:last-child {
170
+ margin-bottom: 0;
171
+ }
172
+ }
173
+
174
+ @mixin seo-analysis {
175
+ background: $panel-background;
176
+ border: $seo-analysis-border;
177
+
178
+ > * {
179
+ font-family: inherit !important;
180
+ max-width: 100% !important;
181
+ }
182
+ }
183
+
184
+
185
+ // SEO Analysis Component
186
+
187
+ @mixin bedrock-seo-analysis {
188
+ @include seo-analysis-keyword;
189
+ @include seo-analysis-preview;
190
+ @include seo-analysis-form;
191
+ @include seo-analysis-output;
192
+
193
+ .seo-analysis {
194
+ @include seo-analysis;
195
+ }
196
+
197
+ .yoast-measurement-elements-holder {
198
+ display: none !important;
199
+ }
200
+ }
@@ -40,12 +40,17 @@ module BedrockSass
40
40
  @tinymce_path ||= File.join(vendor_path, 'tinymce')
41
41
  end
42
42
 
43
+ def yoastseo_path
44
+ @yoastseo_path ||= File.join(vendor_path, 'yoastseo', 'css')
45
+ end
46
+
43
47
  private
44
48
 
45
49
  def configure_sass
46
50
  require 'sass'
47
51
 
48
52
  ::Sass.load_paths << motion_ui_path
53
+ ::Sass.load_paths << yoastseo_path
49
54
  ::Sass.load_paths << foundation_path
50
55
  ::Sass.load_paths << stylesheets_path
51
56
  end
@@ -1,3 +1,3 @@
1
1
  module BedrockSass
2
- VERSION = '0.1.4'
2
+ VERSION = '0.1.5'
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bedrock_sass
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.4
4
+ version: 0.1.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonian Guveli
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2017-12-14 00:00:00.000000000 Z
11
+ date: 2017-12-18 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -394,6 +394,16 @@ files:
394
394
  - assets/_vendor/tinymce/themes/modern/theme.js
395
395
  - assets/_vendor/tinymce/themes/modern/theme.min.js
396
396
  - assets/_vendor/tinymce/tinymce.js
397
+ - assets/_vendor/yoastseo/css/_analysis.scss
398
+ - assets/_vendor/yoastseo/css/_colors.scss
399
+ - assets/_vendor/yoastseo/css/_functions.scss
400
+ - assets/_vendor/yoastseo/css/_icons.scss
401
+ - assets/_vendor/yoastseo/css/_loading-dialog.scss
402
+ - assets/_vendor/yoastseo/css/_marks.scss
403
+ - assets/_vendor/yoastseo/css/_mixins.scss
404
+ - assets/_vendor/yoastseo/css/_snippet-editor.scss
405
+ - assets/_vendor/yoastseo/css/_tooltips.scss
406
+ - assets/_vendor/yoastseo/css/analyzer.scss
397
407
  - assets/bedrock/js/bedrock.js
398
408
  - assets/bedrock/scss/_bedrock-components.scss
399
409
  - assets/bedrock/scss/_bedrock-settings.scss
@@ -415,6 +425,7 @@ files:
415
425
  - assets/bedrock/scss/components/panel.scss
416
426
  - assets/bedrock/scss/components/reveal-panel.scss
417
427
  - assets/bedrock/scss/components/select-box.scss
428
+ - assets/bedrock/scss/components/seo-analysis.scss
418
429
  - assets/bedrock/scss/components/tiny-mce-editor.scss
419
430
  - lib/bedrock_sass.rb
420
431
  - lib/bedrock_sass/engine.rb