Commit 22dcd9d8 authored by Dieter Holvoet's avatar Dieter Holvoet Committed by Sascha Eggenberger
Browse files

Issue #3318144: Text color of disabled views field on view edit page is... 

Issue #3318144: Text color of disabled views field on view edit page is unreadable when using dark mode
parent 283b4ce0

dist/css/base/gin.css

+27 −16
Original line number Diff line number Diff line
@@ -1325,7 +1325,7 @@ details summary { 
}



a.views-field-excluded {

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

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

}



.views-filterable-options {
@@ -1806,8 +1806,10 @@ td.webform-has-field-suffix > .form-item > .form-element { 
}



.form-element[disabled], .form-element[disabled]:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled);

  background-color: var(--gin-color-disabled-bg) !important;

  border-color: var(--gin-color-disabled-border);

  box-shadow: none;

}
@@ -1904,10 +1906,6 @@ td.webform-has-field-suffix > .form-item > .form-element { 
  background-color: var(--gin-color-primary-active);

}



.gin--dark-mode .form-boolean--type-checkbox:checked {

  background-image: url("../../media/sprite.svg#checked-view");

}



:not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {

  position: relative;

}
@@ -2107,16 +2105,26 @@ td.webform-has-field-suffix > .form-item > .form-element { 
  border-color: var(--gin-color-focus-border);

}



.form-boolean--type-radio:disabled, .form-boolean--type-radio:disabled:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled-border);

}



.form-boolean--type-radio:checked:disabled, .form-boolean--type-radio:checked:disabled:hover {

  background-image: none;

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

  border-color: var(--gin-color-disabled);

  box-shadow: inset 0 0 0 5px var(--gin-color-disabled);

  background: var(--gin-color-disabled);

  box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

}



.form-boolean--type-checkbox[disabled]:checked {

  border-color: var(--gin-color-disabled);

  background-color: var(--gin-color-disabled);

.form-boolean--type-checkbox[disabled], .form-boolean--type-checkbox[disabled]:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled-border);

}



.form-boolean--type-checkbox[disabled]:checked, .form-boolean--type-checkbox[disabled]:hover:checked {

  border-color: var(--gin-color-disabled-border);

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

  box-shadow: none;

}
@@ -2470,12 +2478,15 @@ a.button:active { 
}



.button.button:disabled, .button.button:disabled:hover, .button.button:disabled:active, .button.button:disabled:focus, .button.button.is-disabled, .button.button.is-disabled:hover, .button.button.is-disabled:active, .button.button.is-disabled:focus {

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

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

  background: transparent;

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

  box-shadow: none;

}



.gin--dark-mode .button.button:disabled, .gin--dark-mode .button.button.is-disabled {

.button.button--primary:disabled, .button.button--primary:disabled:hover, .button.button--primary:disabled:active, .button.button--primary:disabled:focus, .button.button--primary.is-disabled, .button.button--primary.is-disabled:hover, .button.button--primary.is-disabled:active, .button.button--primary.is-disabled:focus {

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

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

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

}



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

dist/css/theme/dialog.css

+26 −15
Original line number Diff line number Diff line
@@ -254,12 +254,15 @@ 
}



.ui-dialog .button.button:disabled, .ui-dialog .button.button:disabled:hover, .ui-dialog .button.button:disabled:active, .ui-dialog .button.button:disabled:focus, .ui-dialog .button.button.is-disabled, .ui-dialog .button.button.is-disabled:hover, .ui-dialog .button.button.is-disabled:active, .ui-dialog .button.button.is-disabled:focus {

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

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

  background: transparent;

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

  box-shadow: none;

}



.gin--dark-mode .ui-dialog .button.button:disabled, .gin--dark-mode .ui-dialog .button.button.is-disabled {

.ui-dialog .button.button--primary:disabled, .ui-dialog .button.button--primary:disabled:hover, .ui-dialog .button.button--primary:disabled:active, .ui-dialog .button.button--primary:disabled:focus, .ui-dialog .button.button--primary.is-disabled, .ui-dialog .button.button--primary.is-disabled:hover, .ui-dialog .button.button--primary.is-disabled:active, .ui-dialog .button.button--primary.is-disabled:focus {

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

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

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

}



.ui-dialog .action-link.action-link--icon-trash {
@@ -305,8 +308,10 @@ 
}



.ui-dialog .form-element[disabled], .ui-dialog .form-element[disabled]:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled);

  background-color: var(--gin-color-disabled-bg) !important;

  border-color: var(--gin-color-disabled-border);

  box-shadow: none;

}
@@ -403,10 +408,6 @@ 
  background-color: var(--gin-color-primary-active);

}



.gin--dark-mode .ui-dialog .form-boolean--type-checkbox:checked {

  background-image: url("../../media/sprite.svg#checked-view");

}



.ui-dialog :not(.form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .form-type--checkbox {

  position: relative;

}
@@ -606,16 +607,26 @@ 
  border-color: var(--gin-color-focus-border);

}



.ui-dialog .form-boolean--type-radio:disabled, .ui-dialog .form-boolean--type-radio:disabled:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled-border);

}



.ui-dialog .form-boolean--type-radio:checked:disabled, .ui-dialog .form-boolean--type-radio:checked:disabled:hover {

  background-image: none;

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

  border-color: var(--gin-color-disabled);

  box-shadow: inset 0 0 0 5px var(--gin-color-disabled);

  background: var(--gin-color-disabled);

  box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

}



.ui-dialog .form-boolean--type-checkbox[disabled]:checked {

  border-color: var(--gin-color-disabled);

  background-color: var(--gin-color-disabled);

.ui-dialog .form-boolean--type-checkbox[disabled], .ui-dialog .form-boolean--type-checkbox[disabled]:hover {

  cursor: not-allowed;

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

  border-color: var(--gin-color-disabled-border);

}



.ui-dialog .form-boolean--type-checkbox[disabled]:checked, .ui-dialog .form-boolean--type-checkbox[disabled]:hover:checked {

  border-color: var(--gin-color-disabled-border);

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

  box-shadow: none;

}

dist/css/theme/variables.css

+6 −4
Original line number Diff line number Diff line
@@ -5,8 +5,9 @@ 
  --gin-color-focus: rgba(0, 125, 250, .6);

  --gin-color-focus-border: rgba(0, 0, 0, .2);

  --gin-color-focus-neutral-rgb: rgba(0, 0, 0, .4);

  --gin-color-disabled: #bbb;

  --gin-color-disabled-text: #8d8d8d;

  --gin-color-disabled: #8d8d8d;

  --gin-color-disabled-bg: #eaeaea;

  --gin-color-disabled-border: #c2c2c2;

  --gin-color-warning: #d8b234;

  --gin-color-warning-light: #efcf64;

  --gin-bg-warning: #605328;
@@ -159,8 +160,9 @@ 
  --gin-color-focus: rgb(81, 168, 255);

  --gin-color-focus-border: rgba(0, 0, 0, .8);

  --gin-color-focus-neutral-rgb: rgba(255, 255, 255, .8);

  --gin-color-disabled: #555;

  --gin-color-disabled-text: #1b1b1d;

  --gin-color-disabled: #646464;

  --gin-color-disabled-border: #646464;

  --gin-color-disabled-bg: #47474c;

  --gin-color-warning: #dec15f;

  --gin-bg-warning-light: rgba(222, 193, 95, .1);

  --gin-color-danger: #ce6060;

styles/base/_button.scss

+8 −3
Original line number Diff line number Diff line
@@ -102,12 +102,17 @@ a.button--primary:focus:hover { 


.button.button:disabled, .button.button.is-disabled {

  &, &:hover, &:active, &:focus {

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

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

    background: transparent;

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

    box-shadow: none;

  }

}



  .gin--dark-mode & {

.button.button--primary:disabled, .button.button--primary.is-disabled {

  &, &:hover, &:active, &:focus {

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

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

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

  }

}

styles/base/_form.scss

+25 −13
Original line number Diff line number Diff line
@@ -22,8 +22,10 @@ $maxWidth: 520px; 


  &[disabled],

  &[disabled]:hover {

    cursor: not-allowed;

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

    border-color: var(--gin-color-disabled);

    background-color: var(--gin-color-disabled-bg) !important;

    border-color: var(--gin-color-disabled-border);

    box-shadow: none;

  }

}
@@ -116,10 +118,6 @@ $maxWidth: 520px; 
    &:active {

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

    }



    .gin--dark-mode & {

      background-image: icon('checked');

    }

  }

}
@@ -303,21 +301,35 @@ $maxWidth: 520px; 
    }

  }



  &:disabled {

    &, &:hover {

      cursor: not-allowed;

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

      border-color: var(--gin-color-disabled-border);

    }

  }



  &:checked:disabled {

    &, &:hover {

      background-image: none;

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

      border-color: var(--gin-color-disabled);

      box-shadow: inset 0 0 0 5px var(--gin-color-disabled);

      background: var(--gin-color-disabled);

      box-shadow: inset 0 0 0 5px var(--gin-color-disabled-bg);

    }

  }

}



.form-boolean--type-checkbox[disabled]:checked {

  border-color: var(--gin-color-disabled);

  background-color: var(--gin-color-disabled);

.form-boolean--type-checkbox[disabled] {

  &, &:hover {

    cursor: not-allowed;

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

    border-color: var(--gin-color-disabled-border);



    &:checked {

      border-color: var(--gin-color-disabled-border);

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

      box-shadow: none;

    }

  }

}



.form-radios,

.form-checkboxes {