Skip to content

Commit 0f03f26

Browse files
krisahilmariohernandez
krisahil
authored and
mariohernandez
committed
Issue #3264322 by krisahil: Properties buttons misplaced in Cygnet theme
1 parent d053c26 commit 0f03f26

6 files changed

+191
-8
lines changed

‎css/cygnet/cygnet--overrides.css

+9
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,12 @@
1111
#drupal-off-canvas [data-theme=cygnet] button {
1212
font-family: 'RedHatText', Helvetica, Arial, sans-serif;
1313
}
14+
15+
/*
16+
* Upstream styles in node_modules/@json-editor/json-editor/src/style.css set
17+
* the height to 300px, which is too tall for all textareas. The browser
18+
* provides a tooltip to resize the element.
19+
*/
20+
#drupal-off-canvas .je-textarea {
21+
height: auto;
22+
}

‎css/cygnet/cygnet--prefixed-for-drupal--upstream.css

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
#drupal-off-canvas .je-float-right-linkholder {
2+
float: right;
3+
margin-left: 10px;
4+
}
5+
6+
#drupal-off-canvas .je-modal {
7+
background-color: white;
8+
border: 1px solid black;
9+
box-shadow: 3px 3px black;
10+
position: absolute;
11+
z-index: 10;
12+
}
13+
14+
#drupal-off-canvas .je-infobutton-icon {
15+
font-size: 16px;
16+
font-weight: bold;
17+
padding: 0.25rem;
18+
position: relative;
19+
display: inline-block;
20+
}
21+
22+
#drupal-off-canvas .je-infobutton-tooltip {
23+
font-size: 12px;
24+
font-weight: normal;
25+
font-family: sans-serif;
26+
visibility: hidden;
27+
background-color: rgba(50, 50, 50, 0.75);
28+
margin: 0 0.25rem;
29+
color: #fafafa;
30+
padding: 0.5rem 1rem;
31+
border-radius: 0.25rem;
32+
width: 20rem;
33+
position: absolute;
34+
}
35+
36+
#drupal-off-canvas .je-not-loaded {
37+
pointer-events: none;
38+
}
39+
#drupal-off-canvas .je-header {
40+
display: inline-block
41+
}
42+
43+
#drupal-off-canvas .je-upload-preview img {
44+
float: left;
45+
margin: 0 0.5rem 0.5rem 0;
46+
max-width: 100%;
47+
max-height: 5rem;
48+
}
49+
50+
#drupal-off-canvas .je-checkbox {
51+
display: inline-block;
52+
width: auto
53+
}
54+
55+
#drupal-off-canvas .je-checkbox-control--compact {
56+
display: inline-block;
57+
margin-right: 1rem
58+
}
59+
60+
#drupal-off-canvas .je-radio {
61+
display: inline-block;
62+
width: auto
63+
}
64+
65+
#drupal-off-canvas .je-radio-control--compact {
66+
display: inline-block;
67+
margin-right: 1rem
68+
}
69+
70+
#drupal-off-canvas .je-switcher {
71+
background-color: transparent;
72+
display: inline-block;
73+
font-style: italic;
74+
font-weight: normal;
75+
height: auto;
76+
width: auto;
77+
margin-bottom: 0;
78+
margin-left: 5px;
79+
padding: 0 0 0 3px;
80+
}
81+
82+
#drupal-off-canvas .je-textarea {
83+
width: 100%;
84+
height: 300px;
85+
box-sizing: border-box
86+
}
87+
88+
#drupal-off-canvas .je-range-control {
89+
text-align: center
90+
}
91+
92+
#drupal-off-canvas .je-indented-panel {
93+
padding-left: 10px;
94+
margin-left: 10px;
95+
border-left: 1px solid #ccc
96+
}
97+
98+
#drupal-off-canvas .je-indented-panel--top {
99+
padding-left: 10px;
100+
margin-left: 10px;
101+
}
102+
103+
#drupal-off-canvas .je-tabholder {
104+
float: left;
105+
width: 130px;
106+
}
107+
108+
#drupal-off-canvas .je-tabholder .content {
109+
margin-left: 120px;
110+
}
111+
112+
#drupal-off-canvas .je-tabholder--top {
113+
margin-left: 10px;
114+
}
115+
116+
#drupal-off-canvas .je-tabholder--clear {
117+
clear:both;
118+
}
119+
120+
#drupal-off-canvas .je-tab {
121+
border: 1px solid #ccc;
122+
border-width: 1px 0 1px 1px;
123+
text-align: center;
124+
line-height: 30px;
125+
border-radius: 5px;
126+
border-bottom-right-radius: 0;
127+
border-top-right-radius: 0;
128+
font-weight: bold;
129+
cursor: pointer
130+
}
131+
132+
#drupal-off-canvas .je-tab--top {
133+
float: left;
134+
border: 1px solid #ccc;
135+
border-width: 1px 1px 0px 1px;
136+
text-align: center;
137+
line-height: 30px;
138+
border-radius: 5px;
139+
padding-left: 5px;
140+
padding-right: 5px;
141+
border-bottom-right-radius: 0;
142+
border-bottom-left-radius: 0;
143+
font-weight: bold;
144+
cursor: pointer
145+
}
146+
147+
#drupal-off-canvas .je-block-link {
148+
display: block
149+
}
150+
151+
#drupal-off-canvas .je-media {
152+
width: 100%
153+
}

‎css/cygnet/cygnet--prefixed-for-drupal.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -252,8 +252,12 @@
252252

253253
/* Button styles. */
254254

255-
#drupal-off-canvas [data-theme=cygnet] button {
255+
#drupal-off-canvas [data-theme=cygnet] button,
256+
#drupal-off-canvas [data-theme=cygnet] button > span {
256257
cursor: pointer;
258+
}
259+
260+
#drupal-off-canvas [data-theme=cygnet] button {
257261
font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;
258262
color: #0066cc;
259263
border: 1px solid #0066cc;
@@ -441,10 +445,10 @@
441445
}
442446

443447
#drupal-off-canvas [data-theme=cygnet] .patternkit-jsoneditor-clickable {
444-
cursor: pointer;
448+
cursor: pointer;
445449
}
446450
#drupal-off-canvas [data-theme=cygnet] .patternkit-jsoneditor-clickable label {
447-
cursor: inherit;
451+
cursor: inherit;
448452
}
449453

450454
#drupal-off-canvas .patternkit-jsoneditor-clickable + div > .tabs {

‎css/cygnet/cygnet.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -252,8 +252,12 @@
252252

253253
/* Button styles. */
254254

255-
[data-theme=cygnet] button {
255+
[data-theme=cygnet] button,
256+
[data-theme=cygnet] button > span {
256257
cursor: pointer;
258+
}
259+
260+
[data-theme=cygnet] button {
257261
font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;
258262
color: #0066cc;
259263
border: 1px solid #0066cc;
@@ -441,10 +445,10 @@
441445
}
442446

443447
[data-theme=cygnet] .patternkit-jsoneditor-clickable {
444-
cursor: pointer;
448+
cursor: pointer;
445449
}
446450
[data-theme=cygnet] .patternkit-jsoneditor-clickable label {
447-
cursor: inherit;
451+
cursor: inherit;
448452
}
449453

450454
.patternkit-jsoneditor-clickable + div > .tabs {

‎gulpfile.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,21 @@ gulp.task('copy:lib', function() {
3333
return gulp.src(gulpConfig.lib).pipe(gulp.dest(gulpConfig.dist));
3434
});
3535

36+
// Prefixes upstream JSON Editor's core styles so they can be used in non-shadow
37+
// DOM version of Cygnet.
38+
const drupalModalId = '#drupal-off-canvas';
39+
gulp.task('prefix-css:cygnet-theme-upstream', function(){
40+
return gulp.src('./node_modules/@json-editor/json-editor/src/style.css')
41+
.pipe(prefixCss(drupalModalId))
42+
.pipe(rename('cygnet--prefixed-for-drupal--upstream.css'))
43+
.pipe(gulp.dest('./css/cygnet'));
44+
});
45+
46+
// Prefixes Cygnet's styles so they work when JSON Editor gets loaded outside
47+
// the shadow DOM.
3648
gulp.task('prefix-css:cygnet-theme', function(){
3749
return gulp.src('./css/cygnet/cygnet.css')
38-
.pipe(prefixCss('#drupal-off-canvas'))
50+
.pipe(prefixCss(drupalModalId))
3951
.pipe(rename('cygnet--prefixed-for-drupal.css'))
4052
.pipe(gulp.dest('./css/cygnet'));
4153
});
@@ -44,4 +56,4 @@ gulp.task('watch', function() {
4456
return gulp.watch(gulpConfig.src, 'compile:es6');
4557
});
4658

47-
gulp.task('default', gulp.parallel(['compile:es6', 'copy:lib', 'prefix-css:cygnet-theme']));
59+
gulp.task('default', gulp.parallel(['compile:es6', 'copy:lib', 'prefix-css:cygnet-theme', 'prefix-css:cygnet-theme-upstream']));

‎patternkit.libraries.yml

+1
Original file line numberDiff line numberDiff line change
@@ -54,5 +54,6 @@ cygnet_no_shadow_dom:
5454
version: VERSION
5555
css:
5656
theme:
57+
css/cygnet/cygnet--prefixed-for-drupal--upstream.css: {}
5758
css/cygnet/cygnet--prefixed-for-drupal.css: {}
5859
css/cygnet/cygnet--overrides.css: {}

0 commit comments

Comments
 (0)