Commit 0f03f264 authored by krisahil's avatar krisahil Committed by Mario Hernandez
Browse files

Issue #3264322 by krisahil: Properties buttons misplaced in Cygnet theme

parent d053c265

css/cygnet/cygnet--overrides.css

+9 −0
Original line number Diff line number Diff line
@@ -11,3 +11,12 @@ 
#drupal-off-canvas [data-theme=cygnet] button {

    font-family: 'RedHatText', Helvetica, Arial, sans-serif;

}



/*

 * Upstream styles in node_modules/@json-editor/json-editor/src/style.css set

 * the height to 300px, which is too tall for all textareas. The browser

 * provides a tooltip to resize the element.

 */

#drupal-off-canvas .je-textarea {

  height: auto;

}

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

0 → 100644
+153 −0
Original line number Diff line number Diff line 
#drupal-off-canvas .je-float-right-linkholder {

  float: right;

  margin-left: 10px;

}



#drupal-off-canvas .je-modal {

  background-color: white;

  border: 1px solid black;

  box-shadow: 3px 3px black;

  position: absolute;

  z-index: 10;

}



#drupal-off-canvas .je-infobutton-icon {

  font-size: 16px;

  font-weight: bold;

  padding: 0.25rem;

  position: relative;

  display: inline-block;

}



#drupal-off-canvas .je-infobutton-tooltip {

  font-size: 12px;

  font-weight: normal;

  font-family: sans-serif;

  visibility: hidden;

  background-color: rgba(50, 50, 50, 0.75);

  margin: 0 0.25rem;

  color: #fafafa;

  padding: 0.5rem 1rem;

  border-radius: 0.25rem;

  width: 20rem;

  position: absolute;

}



#drupal-off-canvas .je-not-loaded {

  pointer-events: none;

}

#drupal-off-canvas .je-header {

  display: inline-block

}



#drupal-off-canvas .je-upload-preview img {

  float: left;

  margin: 0 0.5rem 0.5rem 0;

  max-width: 100%;

  max-height: 5rem;

}



#drupal-off-canvas .je-checkbox {

  display: inline-block;

  width: auto

}



#drupal-off-canvas .je-checkbox-control--compact {

  display: inline-block;

  margin-right: 1rem

}



#drupal-off-canvas .je-radio {

  display: inline-block;

  width: auto

}



#drupal-off-canvas .je-radio-control--compact {

  display: inline-block;

  margin-right: 1rem

}



#drupal-off-canvas .je-switcher {

  background-color: transparent;

  display: inline-block;

  font-style: italic;

  font-weight: normal;

  height: auto;

  width: auto;

  margin-bottom: 0;

  margin-left: 5px;

  padding: 0 0 0 3px;

}



#drupal-off-canvas .je-textarea {

  width: 100%;

  height: 300px;

  box-sizing: border-box

}



#drupal-off-canvas .je-range-control {

  text-align: center

}



#drupal-off-canvas .je-indented-panel {

  padding-left: 10px;

  margin-left: 10px;

  border-left: 1px solid #ccc

}



#drupal-off-canvas .je-indented-panel--top {

  padding-left: 10px;

  margin-left: 10px;

}



#drupal-off-canvas .je-tabholder {

  float: left;

  width: 130px;

}



#drupal-off-canvas .je-tabholder .content {

  margin-left: 120px;

}



#drupal-off-canvas .je-tabholder--top {

  margin-left: 10px;

}



#drupal-off-canvas .je-tabholder--clear {

  clear:both;

}



#drupal-off-canvas .je-tab {

  border: 1px solid #ccc;

  border-width: 1px 0 1px 1px;

  text-align: center;

  line-height: 30px;

  border-radius: 5px;

  border-bottom-right-radius: 0;

  border-top-right-radius: 0;

  font-weight: bold;

  cursor: pointer

}



#drupal-off-canvas .je-tab--top {

  float: left;

  border: 1px solid #ccc;

  border-width: 1px 1px 0px 1px;

  text-align: center;

  line-height: 30px;

  border-radius: 5px;

  padding-left: 5px;

  padding-right: 5px;

  border-bottom-right-radius: 0;

  border-bottom-left-radius: 0;

  font-weight: bold;

  cursor: pointer

}



#drupal-off-canvas .je-block-link {

  display: block

}



#drupal-off-canvas .je-media {

  width: 100%

}
 
 No newline at end of file

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

+7 −3
Original line number Diff line number Diff line
@@ -252,8 +252,12 @@ 


/* Button styles. */



#drupal-off-canvas [data-theme=cygnet] button {

#drupal-off-canvas [data-theme=cygnet] button,

#drupal-off-canvas [data-theme=cygnet] button > span {

  cursor: pointer;

}



#drupal-off-canvas [data-theme=cygnet] button {

  font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;

  color: #0066cc;

  border: 1px solid #0066cc;

css/cygnet/cygnet.css

+7 −3
Original line number Diff line number Diff line
@@ -252,8 +252,12 @@ 


/* Button styles. */



[data-theme=cygnet] button {

[data-theme=cygnet] button,

[data-theme=cygnet] button > span {

  cursor: pointer;

}



[data-theme=cygnet] button {

  font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;

  color: #0066cc;

  border: 1px solid #0066cc;

gulpfile.js

+14 −2
Original line number Diff line number Diff line
@@ -33,9 +33,21 @@ gulp.task('copy:lib', function() { 
  return gulp.src(gulpConfig.lib).pipe(gulp.dest(gulpConfig.dist));

});



// Prefixes upstream JSON Editor's core styles so they can be used in non-shadow

// DOM version of Cygnet.

const drupalModalId = '#drupal-off-canvas';

gulp.task('prefix-css:cygnet-theme-upstream', function(){

  return gulp.src('./node_modules/@json-editor/json-editor/src/style.css')

    .pipe(prefixCss(drupalModalId))

    .pipe(rename('cygnet--prefixed-for-drupal--upstream.css'))

    .pipe(gulp.dest('./css/cygnet'));

});



// Prefixes Cygnet's styles so they work when JSON Editor gets loaded outside

// the shadow DOM.

gulp.task('prefix-css:cygnet-theme', function(){

  return gulp.src('./css/cygnet/cygnet.css')

    .pipe(prefixCss('#drupal-off-canvas'))

    .pipe(prefixCss(drupalModalId))

    .pipe(rename('cygnet--prefixed-for-drupal.css'))

    .pipe(gulp.dest('./css/cygnet'));

});
@@ -44,4 +56,4 @@ gulp.task('watch', function() { 
  return gulp.watch(gulpConfig.src, 'compile:es6');

});



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