Commit 30d5cc78 authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Minor refinements 

- Changes fields and buttons to 40px (from 48px)
- Fixing media_library bulk select in 10.1.x
- Changes marker to use the new flag style
- New toolbar alignment with content section
parent abe7539e

dist/css/base/gin.css

+60 −18
Original line number Diff line number Diff line
@@ -59,6 +59,39 @@ a { 
  color-scheme: dark;

}



.views-field .marker,

.gin-beta-flag,

.gin-experimental-flag,

.gin-new-flag {

  font-size: 10px;

  font-weight: var(--gin-font-weight-semibold);

  text-transform: uppercase;

  letter-spacing: .1em;

  display: inline-block;

  padding: .125em .5em;

  vertical-align: .125em;

  border-radius: var(--gin-border-xs);

}



.views-field .marker,

.gin-beta-flag,

.gin-experimental-flag {

  color: #555;

  background: #ddd;

}



.gin--dark-mode .views-field .marker,

.gin--dark-mode .gin-beta-flag,

.gin--dark-mode .gin-experimental-flag {

  color: #eee;

  background: #444;

}



.gin-new-flag {

  color: #fff;

  background-color: #26a769;

}



a,

.link,

button.link,
@@ -310,7 +343,7 @@ button.link:active, 
@media (min-width: 64em) {

  .sticky-shadow {

    position: sticky;

    top: calc(var(--gin-toolbar-y-offset) + var(--gin-spacing-xl));

    top: calc(var(--gin-toolbar-y-offset) + var(--gin-spacing-l));

    width: calc(100% - min(10vw, 96px) + var(--gin-spacing-l));

  }
@@ -441,7 +474,8 @@ body:not(.toolbar-tray-open) .layout-container { 
.modules-tabs,

.module-filter-update-status-form .table-filter,

#views-entity-list,

.admin.my-workbench {

.admin.my-workbench,

.media-library-views-form {

  margin-top: 0;

  box-shadow: var(--gin-shadow-l1);

  border-radius: var(--gin-border-l);
@@ -456,7 +490,8 @@ body:not(.toolbar-tray-open) .layout-container { 
.gin--dark-mode .modules-tabs,

.gin--dark-mode .module-filter-update-status-form .table-filter,

.gin--dark-mode #views-entity-list,

.gin--dark-mode .admin.my-workbench {

.gin--dark-mode .admin.my-workbench,

.gin--dark-mode .media-library-views-form {

  box-shadow: 0 6px 16px var(--gin-border-color-layer);

}
@@ -469,7 +504,8 @@ body:not(.toolbar-tray-open) .layout-container { 
.gin--high-contrast-mode .modules-tabs,

.gin--high-contrast-mode .module-filter-update-status-form .table-filter,

.gin--high-contrast-mode #views-entity-list,

.gin--high-contrast-mode .admin.my-workbench {

.gin--high-contrast-mode .admin.my-workbench,

.gin--high-contrast-mode .media-library-views-form {

  box-shadow: none;

}
@@ -480,7 +516,8 @@ body:not(.toolbar-tray-open) .layout-container { 
.views-preview-wrapper,

#views-entity-list,

.module-filter-update-status-form .table-filter,

.admin.my-workbench {

.admin.my-workbench,

.media-library-views-form {

  width: 100%;

  padding: var(--gin-spacing-s);

  background: var(--gin-bg-layer);
@@ -496,7 +533,8 @@ body:not(.toolbar-tray-open) .layout-container { 
  .views-preview-wrapper,

  #views-entity-list,

  .module-filter-update-status-form .table-filter,

  .admin.my-workbench {

  .admin.my-workbench,

  .media-library-views-form {

    padding: var(--gin-spacing-l);

  }

}
@@ -516,7 +554,9 @@ body:not(.toolbar-tray-open) .layout-container { 
.module-filter-update-status-form .table-filter > .form-wrapper:first-of-type .form-item,

.module-filter-update-status-form .table-filter .layout-region-node-main > .form-wrapper:first-of-type .form-item,

.admin.my-workbench > .form-wrapper:first-of-type .form-item,

.admin.my-workbench .layout-region-node-main > .form-wrapper:first-of-type .form-item {

.admin.my-workbench .layout-region-node-main > .form-wrapper:first-of-type .form-item,

.media-library-views-form > .form-wrapper:first-of-type .form-item,

.media-library-views-form .layout-region-node-main > .form-wrapper:first-of-type .form-item {

  margin-top: 0;

}
@@ -554,7 +594,7 @@ body:not(.toolbar-tray-open) .layout-container { 
  padding-left: .25em;

}



@media (min-width: 90em) {

@media (min-width: 64em) {

  .region-sticky--is-sticky .page-title {

    font-size: var(--gin-font-size-h3);

  }
@@ -1234,13 +1274,6 @@ a.views-field-excluded { 
  margin-left: var(--gin-spacing-xs);

}



.views-field .marker {

  font-size: var(--gin-font-size-xxs);

  font-style: italic;

  color: var(--gin-color-text-light);

  padding: var(--gin-spacing-xxs);

}



.view-header {

  margin-bottom: var(--gin-spacing-l);

}
@@ -1726,6 +1759,9 @@ table td.field-plugin-summary-cell { 


.form-element {

  color: var(--gin-color-text);

  line-height: var(--input-line-height);

  padding: calc(var(--input-padding-vertical) - 1px) var(--input-padding-horizontal);

  min-height: calc(var(--input-padding-vertical) * 2 + var(--input-line-height));

  background-color: var(--gin-bg-input);

  border: 1px solid var(--gin-border-color-form-element);

  border-radius: var(--gin-border-m);
@@ -2322,7 +2358,8 @@ tr .form-item { 
.button:not(:focus),

.form-actions .button,

.action-link--icon-trash.action-link {

  padding: calc(var(--gin-spacing-m) - 2px) calc(var(--gin-spacing-l) - 2px);

  font-size: var(--gin-font-size-s);

  padding: calc(var(--gin-spacing-s) - 2px) var(--gin-spacing-m);

  border: 2px solid var(--gin-color-primary) !important;

  border-radius: var(--gin-border-m);

  box-shadow: 0 1px 2px var(--gin-color-primary-light);
@@ -2450,8 +2487,8 @@ a.button:active { 
}



.action-link.action-link--icon-trash {

  min-height: 48px;

  padding: calc(var(--gin-spacing-s) - 1px) calc(var(--gin-spacing-l) - 2px);

  line-height: 1;

  min-height: 2.5rem;

  box-sizing: border-box;

}
@@ -2839,6 +2876,11 @@ html.js.no-touchevents .dropbutton--extrasmall .dropbutton__toggle { 
  width: calc(var(--dropbutton-extrasmall-toggle-size, 1.5rem) + 1px);

}



html.js.no-touchevents .dropbutton--extrasmall .dropbutton__item:first-of-type > * {

  padding-left: var(--gin-spacing-s);

  padding-right: var(--gin-spacing-s);

}



html[dir="ltr"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__items .dropbutton__item {

  margin-right: 0;

}

dist/css/components/ckeditor5.css

+6 −1
Original line number Diff line number Diff line 
.ck {

  --ck-spacing-small: var(--gin-spacing-xs);

  --ck-spacing-small: var(--gin-spacing-xxs);

  --ck-color-text: var(--gin-color-text);

  --ck-color-toolbar-background: var(--gin-bg-layer3);

  --ck-color-toolbar-border: var(--gin-border-color-form-element);
@@ -58,6 +58,11 @@ 
  opacity: .3;

}



.ck .ck-toolbar_grouping:focus,

.ck .ck-toolbar__items:focus {

  box-shadow: none;

}



.ck .ck-button[aria-pressed=true] {

  color: var(--gin-color-primary-active);

  border: 2px solid var(--gin-color-primary);

dist/css/components/edit_form.css

+2 −0
Original line number Diff line number Diff line
@@ -320,5 +320,7 @@ 
  line-height: normal;

  letter-spacing: -0.025em;

  width: 100%;

  padding-top: var(--gin-spacing-s);

  padding-bottom: var(--gin-spacing-s);

}

dist/css/components/media_library.css

+3 −11
Original line number Diff line number Diff line
@@ -364,11 +364,11 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- 


.media-library-select-all {

  color: var(--gin-color-title);

  padding: 1rem;

  padding: 0 var(--gin-spacing-m) var(--gin-spacing-m);

  margin-top: 0;

  background: var(--gin-bg-layer);

  border-bottom-left-radius: var(--gin-border-m);

  border-bottom-right-radius: var(--gin-border-m);

  border-bottom: 1px solid var(--gin-border-color-table-header);

  border-radius: 0;

  box-sizing: border-box;

}
@@ -380,14 +380,6 @@ fieldset.media-library-widget .media-library-edit__link, fieldset.media-library- 
  margin-right: 0;

}



@media (min-width: 61em) {

  .media-library-select-all {

    z-index: 98;

    position: sticky;

    top: calc(var(--gin-toolbar-y-offset) + var(--gin-sticky-offset));

  }

}



.views-field-thumbnail__target-id img {

  vertical-align: middle;

}

dist/css/components/settings.css

+0 −30
Original line number Diff line number Diff line
@@ -313,36 +313,6 @@ 
  background-image: url(../../media/settings/layout_density_small_darkmode.png);

}



.gin-beta-flag,

.gin-experimental-flag,

.gin-new-flag {

  font-size: 10px;

  font-weight: var(--gin-font-weight-semibold);

  text-transform: uppercase;

  letter-spacing: .1em;

  display: inline-block;

  padding: .125em .5em;

  vertical-align: .125em;

  border-radius: var(--gin-border-xs);

}



.gin-beta-flag,

.gin-experimental-flag {

  color: #555;

  background: #ddd;

}



.gin--dark-mode .gin-beta-flag,

.gin--dark-mode .gin-experimental-flag {

  color: #eee;

  background: #444;

}



.gin-new-flag {

  color: #fff;

  background-color: #26a769;

}



input[data-gin-toolbar=new] + label .gin-new-flag {

  position: absolute;

  top: -100px;