Commit e9d4da9a authored by Vidushi Mehta's avatar Vidushi Mehta Committed by Sascha Eggenberger
Browse files

Issue #3375258 by Vidushi Mehta, Moni_10, Preeti.chawla: View's modal design... 

Issue #3375258 by Vidushi Mehta, Moni_10, Preeti.chawla: View's modal design and icon breaks in forced colors/High contrast mode.
parent 45b5b43f

dist/css/components/dialog.css

+24 −0
Original line number Diff line number Diff line
@@ -5,6 +5,12 @@ 
  background: var(--gin-bg-layer);

}



@media (forced-colors: active) {

  .ui-dialog:not(.ui-dialog-off-canvas) {

    border: 1px solid buttonBorder !important;

  }

}



.ui-dialog:not(.ui-dialog-off-canvas) .ui-dialog-content:first-of-type {

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

  border-top-right-radius: var(--gin-border-m);
@@ -63,6 +69,12 @@ 
  position: relative;

}



@media (forced-colors: active) {

  .ui-dialog .ui-dialog-titlebar {

    border-bottom: 1px solid buttonBorder;

  }

}



.ui-dialog .ui-dialog-title {

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

  font-weight: var(--gin-font-weight-normal);
@@ -159,6 +171,12 @@ 
  right: 0;

}



@media (forced-colors: active) {

  .ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {

    background: linktext;

  }

}



.ui-dialog .ui-dialog-titlebar-close:hover {

  opacity: 1;

}
@@ -212,6 +230,12 @@ ul.paragraphs-add-dialog-list { 
  border-top: 1px solid var(--gin-border-color);

}



@media (forced-colors: active) {

  .views-ui-dialog .views-offset-bottom {

    border-top: none;

  }

}



.ui-widget-content a {

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

}

dist/css/components/tabs.css

+43 −0
Original line number Diff line number Diff line
@@ -439,6 +439,37 @@ 
  right: 1.125rem;

}



@media (forced-colors: active) {

  .claro-details__summary::before,

  .claro-details[open] > .claro-details__summary::before {

    background-color: buttonBorder;

  }

}



@media (forced-colors: active) {

  [dir="ltr"] .claro-details__summary::before {

    transform: rotate(90deg);

  }



  [dir="rtl"] .claro-details__summary::before {

    transform: rotate(-90deg);

  }

}



@media (forced-colors: active) {

  .claro-details[open] > .claro-details__summary::before {

    margin-top: -6px;

  }



  [dir="ltr"] .claro-details[open] > .claro-details__summary::before {

    transform: rotate(270deg);

  }



  [dir="rtl"] .claro-details[open] > .claro-details__summary::before {

    transform: rotate(-270deg);

  }

}



.claro-details__summary:hover::before,

.claro-details__summary:hover:focus::before,

.claro-details[open] > .claro-details__summary:hover::before,
@@ -449,6 +480,18 @@ 
  background: var(--gin-color-primary);

}



@media (forced-colors: active) {

  .claro-details__summary:hover::before,

  .claro-details__summary:hover:focus::before,

  .claro-details[open] > .claro-details__summary:hover::before,

  .claro-details[open] > .claro-details__summary:focus::before,

  .claro-details[open] > .claro-details__summary--accordion::before,

  .claro-details[open] > .claro-details__summary--accordion-item::before,

  .claro-details[open] > .claro-details__summary--vertical-tabs-item::before {

    background-color: linkText;

  }

}



.claro-details__description {

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

}

styles/components/dialog.scss

+16 −0
Original line number Diff line number Diff line
@@ -4,6 +4,10 @@ 
  border-radius: var(--gin-border-m);

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



  @media (forced-colors: active) {

    border: 1px solid buttonBorder !important;

  }



  // Dialog without title

  .ui-dialog-content:first-of-type {

    border-top-left-radius: var(--gin-border-m);
@@ -60,6 +64,10 @@ 
    border: 0 none;

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

    position: relative;



    @media (forced-colors: active) {

      border-bottom: 1px solid buttonBorder;

    }

  }



  .ui-dialog-title {
@@ -127,6 +135,10 @@ 
      mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);

      mask-repeat: no-repeat;

      mask-position: center center;



      @media (forced-colors: active) {

        background: linktext;

      }

    }



    &:hover {
@@ -170,6 +182,10 @@ ul.paragraphs-add-dialog-list { 
.views-ui-dialog {

  .views-offset-bottom {

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



    @media (forced-colors: active) {

      border-top: none;

    }

  }

}

styles/components/tabs.scss

+21 −0
Original line number Diff line number Diff line
@@ -352,6 +352,23 @@ 
  mask-repeat: no-repeat;

  mask-position: center center;

  mask-size: 100% 100%;



  @media (forced-colors: active) {

    background-color: buttonBorder;

  }

}



.claro-details__summary::before {

  @media (forced-colors: active) {

    transform: rotate(90deg);

  }

}



.claro-details[open] > .claro-details__summary::before {

  @media (forced-colors: active) {

    transform: rotate(270deg);

    margin-top: -6px;

  }

}



.claro-details__summary:hover::before,
@@ -362,6 +379,10 @@ 
.claro-details[open] > .claro-details__summary--accordion-item::before,

.claro-details[open] > .claro-details__summary--vertical-tabs-item::before {

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



  @media (forced-colors: active) {

    background-color: linkText;

  }

}



.claro-details {