Unverified Commit 5b49fe36 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3332698 by Gauravvv, Akram Khan, smustgrave: Refactor Claro's tableselect stylesheet

parent cef62178

core/themes/claro/css/components/tableselect.css

+16 −22
Original line number Diff line number Diff line
@@ -17,12 +17,6 @@ th.checkbox { 
  text-align: center;

}



[dir="rtl"] td.checkbox,

[dir="rtl"] th.checkbox {

  /* This is required to win over specificity of [dir="rtl"] td */

  text-align: center;

}



tr.selected td {

  background-color: var(--color-bgblue-active);

}
@@ -48,6 +42,10 @@ tr.selected td { 
  border-bottom-left-radius: 0;

}



.views-bulk-actions.views-form__header--bypass-animation {

  animation: none;

}



@supports (position: sticky) {

  .views-bulk-actions[data-drupal-sticky-vbo="true"] {

    position: sticky;
@@ -63,10 +61,6 @@ tr.selected td { 
  }

}



.views-bulk-actions.views-form__header--bypass-animation {

  animation: none;

}



.views-bulk-actions__item {

  align-self: center;

  margin-block: 0 var(--space-s);
@@ -77,18 +71,6 @@ tr.selected td { 
  margin-inline-end: 0;

}



.views-bulk-actions__item--status {

  width: 100%;

  white-space: nowrap;

  font-size: var(--font-size-xs);

  font-weight: bold;

}



.views-bulk-actions__item input,

.views-bulk-actions__item .button {

  margin-block: 0;

}



.views-bulk-actions__item .form-element:hover {

  border: var(--input-border-size) solid var(--input-border-color);

  box-shadow: none;
@@ -118,6 +100,18 @@ tr.selected td { 
  line-height: 1rem;

}



.views-bulk-actions__item input,

.views-bulk-actions__item .button {

  margin-block: 0;

}



.views-bulk-actions__item--status {

  width: 100%;

  white-space: nowrap;

  font-size: var(--font-size-xs);

  font-weight: bold;

}



.views-field__skip-to-bulk-actions {

  display: block;

  white-space: nowrap;

core/themes/claro/css/components/tableselect.pcss.css

+44 −46
Original line number Diff line number Diff line
@@ -9,11 +9,6 @@ td.checkbox, 
th.checkbox {

  text-align: center;

}

[dir="rtl"] td.checkbox,

[dir="rtl"] th.checkbox {

  /* This is required to win over specificity of [dir="rtl"] td */

  text-align: center;

}



tr.selected td {

  background-color: var(--color-bgblue-active);
@@ -29,9 +24,8 @@ tr.selected td { 
  border: var(--details-border-size) solid var(--details-border-color);

  border-radius: 4px;

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

}



.views-bulk-actions[data-drupal-sticky-vbo="true"] {

  &[data-drupal-sticky-vbo="true"] {

    position: sticky;

    z-index: calc(var(--dropbutton-widget-z-index) + 1);

    bottom: var(--drupal-displace-offset-bottom, 0);
@@ -40,6 +34,11 @@ tr.selected td { 
    border-bottom-left-radius: 0;

  }



  &.views-form__header--bypass-animation {

    animation: none;

  }

}



@supports (position: sticky) {

  .views-bulk-actions[data-drupal-sticky-vbo="true"] {

    position: sticky;
@@ -54,51 +53,50 @@ tr.selected td { 
    transform: translateY(0);

  }

}

.views-bulk-actions.views-form__header--bypass-animation {

  animation: none;

}



.views-bulk-actions__item {

  align-self: center;

  margin-block: 0 var(--space-s);

  margin-inline: 0 var(--space-l);

}

.views-bulk-actions__item:last-of-type {

  &:last-of-type {

    margin-inline-end: 0;

  }

.views-bulk-actions__item--status {

  width: 100%;

  white-space: nowrap;

  font-size: var(--font-size-xs);

  font-weight: bold;

}

.views-bulk-actions__item input,

.views-bulk-actions__item .button {

  margin-block: 0;

}

.views-bulk-actions__item .form-element:hover {

  & .form-element {

    &:hover {

      border: var(--input-border-size) solid var(--input-border-color);

      box-shadow: none;

    }

.views-bulk-actions__item .button--primary {

  }

  & .button--primary {

    background: var(--color-blue-400);

    &:hover {

      background: var(--color-blue-500);

    }

  }

.views-bulk-actions__item .form-item__label {

  & .form-item__label {

    display: inline;

    padding-inline-end: var(--space-xs);

}

.views-bulk-actions__item .form-item__label:after {

    &:after {

      content: ":";

    }

.views-bulk-actions__item .form-element--type-select {

  }

  & .form-element--type-select {

    min-height: 2rem;

    padding: calc(0.5rem - 1px) calc(2.25rem - 1px) calc(0.5rem - 1px) calc(1rem - 1px);

    font-size: var(--font-size-xs);

    line-height: 1rem;

  }

  & input,

  & .button {

    margin-block: 0;

  }

}

.views-bulk-actions__item--status {

  width: 100%;

  white-space: nowrap;

  font-size: var(--font-size-xs);

  font-weight: bold;

}



.views-field__skip-to-bulk-actions {

  display: block;