Commit 3056dde8 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

task: #3590364 Part 2 of Consolidate, refactor, remove and untangle Claro's... 

task: #3590364 Part 2 of Consolidate, refactor, remove and untangle Claro's CSS from Default Admin theme

By: mherchel
By: bernardm28
By: dharizza
By: mukeysh
By: jurgenhaas
(cherry picked from commit e9065446)
parent b3c0d09b

core/themes/default_admin/css/base/variables.css

+3 −3
Original line number Diff line number Diff line
@@ -126,7 +126,7 @@ 
  --easing: cubic-bezier(0.19, 1, 0.22, 1);

  --speed-transition: 0.15s;

  --transition: all var(--speed-transition) var(--easing);

  --base-border-radius: 0.5rem;

  --base-border-radius: 2px;

  --focus-border-size: calc(var(--base-border-radius) - 1px);

  --focus-border-offset-size: 0px;

  --outline-size: 0.25rem;
@@ -277,7 +277,7 @@ 
  --vertical-tabs-margin-vertical: var(--space-s);

  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);

  --vertical-tabs-shadow: var(--details-box-shadow);

  --vertical-tabs-border-color: var(--details-border-color);

  --vertical-tabs-border-color: var(--gin-border-color);

  --vertical-tabs-border-size: 1px;

  --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);

  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
@@ -344,7 +344,7 @@ 
  --gin-bg-layer3: #fff;

  --gin-bg-layer4: #e2e5ec;

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

  --gin-bg-header: #eeeff3;

  --gin-bg-header: #e1eafc;

  --gin-bg-unpublished: var(--gin-bg-danger-light);

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

  --gin-pattern-fallback: var(--gin-bg-layer2);

core/themes/default_admin/css/base/variables.pcss.css

+3 −3
Original line number Diff line number Diff line
@@ -122,7 +122,7 @@ 
  --easing: cubic-bezier(0.19, 1, 0.22, 1);

  --speed-transition: 0.15s;

  --transition: all var(--speed-transition) var(--easing);

  --base-border-radius: 0.5rem;

  --base-border-radius: 2px;

  --focus-border-size: calc(var(--base-border-radius) - 1px);

  --focus-border-offset-size: 0px;

  --outline-size: 4px;
@@ -273,7 +273,7 @@ 
  --vertical-tabs-margin-vertical: var(--space-s);

  --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);

  --vertical-tabs-shadow: var(--details-box-shadow);

  --vertical-tabs-border-color: var(--details-border-color);

  --vertical-tabs-border-color: var(--gin-border-color);

  --vertical-tabs-border-size: 1px;

  --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);

  --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
@@ -342,7 +342,7 @@ 
  --gin-bg-layer3: #fff;

  --gin-bg-layer4: #e2e5ec;

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

  --gin-bg-header: #eeeff3;

  --gin-bg-header: #e1eafc;

  --gin-bg-unpublished: var(--gin-bg-danger-light);

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

  --gin-pattern-fallback: var(--gin-bg-layer2);

core/themes/default_admin/css/components/ajax-progress.module.css

+97 −0
Original line number Diff line number Diff line
@@ -118,3 +118,100 @@ 
    transform: rotateZ(360deg);

  }

}



/**

 * Default Admin throbber overrides.

 */



@keyframes gin-throbber {

  0% {

    transform: rotateZ(0);

  }



  100% {

    transform: rotateZ(360deg);

  }

}



.ajax-progress__throbber,

.ajax-progress__throbber--fullscreen,

.ui-dialog .ajax-progress__throbber,

.media-library-item .ajax-progress__throbber {

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

  border-inline-end: 0.1875rem dotted transparent;

}



.ajax-progress .ajax-progress__message {

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

}



[dir].gin--dark-mode .ajax-progress--fullscreen {

  border-color: transparent;

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

  box-shadow: 0 2px 6px 0 var(--gin-bg-app);



  .ajax-progress__throbber,

  .ajax-progress__throbber--fullscreen {

    border: 3px solid var(--gin-bg-app);

    border-inline-end: 0.1875rem dotted transparent;

  }

}



.media-library-widget {

  .ajax-progress__throbber,

  .ajax-progress__throbber--fullscreen {

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

    border-inline-end: 2px dotted transparent;

  }

}



.ui-dialog .ajax-progress-throbber {

  padding: var(--space-xs);

  border: 1px solid rgb(216, 217, 224, 0.8);

  border-radius: 50%;

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

  box-shadow: 0 2px 6px 0 rgb(34, 35, 48, 0.1);



  .gin--dark-mode & {

    border-color: transparent;

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

    box-shadow: 0 2px 6px 0 var(--gin-bg-app);

  }



  &::before {

    position: absolute;

    display: block;

    width: 1.125rem;

    height: 1.125rem;

    content: "";

    animation: gin-throbber 0.75s linear infinite;

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

    border-inline-end: 2px dotted transparent;

    border-radius: 50%;

    inset-block-start: var(--space-xs);

    inset-inline-start: var(--space-xs);

  }

}



.gin--dark-mode .ui-dialog .ajax-progress,

.gin--dark-mode .media-library-item .ajax-progress.ajax-progress.ajax-progress {

  border-color: var(--gin-bg-app);

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

}



.contextual-links li {

  position: relative;

}



.contextual-links .ajax-progress-throbber {

  position: absolute;

  inset-block-start: 0;

  inset-inline-end: var(--space-xxs);

  width: 1.5rem;

  height: 1.5rem;



  &::before {

    inset-block-start: 0;

    inset-inline-start: 0.25em;

  }

}

core/themes/default_admin/css/components/ajax-progress.module.pcss.css

+97 −0
Original line number Diff line number Diff line
@@ -105,3 +105,100 @@ 
    transform: rotateZ(360deg);

  }

}



/**

 * Default Admin throbber overrides.

 */



@keyframes gin-throbber {

  0% {

    transform: rotateZ(0);

  }



  100% {

    transform: rotateZ(360deg);

  }

}



.ajax-progress__throbber,

.ajax-progress__throbber--fullscreen,

.ui-dialog .ajax-progress__throbber,

.media-library-item .ajax-progress__throbber {

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

  border-inline-end: 3px dotted transparent;

}



.ajax-progress .ajax-progress__message {

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

}



[dir].gin--dark-mode .ajax-progress--fullscreen {

  border-color: transparent;

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

  box-shadow: 0 2px 6px 0 var(--gin-bg-app);



  .ajax-progress__throbber,

  .ajax-progress__throbber--fullscreen {

    border: 3px solid var(--gin-bg-app);

    border-inline-end: 3px dotted transparent;

  }

}



.media-library-widget {

  .ajax-progress__throbber,

  .ajax-progress__throbber--fullscreen {

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

    border-inline-end: 2px dotted transparent;

  }

}



.ui-dialog .ajax-progress-throbber {

  padding: var(--space-xs);

  border: 1px solid rgb(216, 217, 224, 0.8);

  border-radius: 50%;

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

  box-shadow: 0 2px 6px 0 rgb(34, 35, 48, 0.1);



  .gin--dark-mode & {

    border-color: transparent;

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

    box-shadow: 0 2px 6px 0 var(--gin-bg-app);

  }



  &::before {

    position: absolute;

    display: block;

    width: 1.125rem;

    height: 1.125rem;

    content: "";

    animation: gin-throbber 0.75s linear infinite;

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

    border-inline-end: 2px dotted transparent;

    border-radius: 50%;

    inset-block-start: var(--space-xs);

    inset-inline-start: var(--space-xs);

  }

}



.gin--dark-mode .ui-dialog .ajax-progress,

.gin--dark-mode .media-library-item .ajax-progress.ajax-progress.ajax-progress {

  border-color: var(--gin-bg-app);

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

}



.contextual-links li {

  position: relative;

}



.contextual-links .ajax-progress-throbber {

  position: absolute;

  inset-block-start: 0;

  inset-inline-end: var(--space-xxs);

  width: 24px;

  height: 24px;



  &::before {

    inset-block-start: 0;

    inset-inline-start: 0.25em;

  }

}

core/themes/default_admin/css/components/autocomplete-loading.module.css

+70 −48
Original line number Diff line number Diff line
@@ -12,26 +12,49 @@ 
 * @see autocomplete.js

 */



/**

 * Since the autocomplete library is attached conditionally and not globally, we

 * can be 99% sure that the default icon will be used. With inline SVGs we can

 * prevent a HTTP request and repaint addressing the autocomplete input's

 * background — until are sure that it will be pushed by the server with HTTP/2.

 *

 * The active autocomplete state's background-image is inlined because non-used

 * CSS selectors are usually ignored; popular browsers don't download their

 * 'url' references.

 *

 * If these selectors become active, the browser needs some time for painting

 * previously ignored remote asset: it should get it from server, parse it and

 * repaint the background of autocomplete field. With the inlined background we

 * can prevent an additional timeout caused by a new request/response pair.

 * Besides this, the autocomplete event itself may easily finish before the

 * missing asset gets downloaded/parsed/painted, and the missing instant visual

 * feedback would be a usability/accessibility issue as well.

 */

/* Wrapper around the autocomplete element. */



.gin-autocomplete {

  position: relative;

  width: fit-content;

}



/* The "Loading" message gets positioned to the top right. */



.gin-autocomplete__message {

  position: absolute;

  max-width: 100%;

  margin-block-end: 0.15rem;

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

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

  font-weight: bold;

  line-height: calc(18rem / 16);

  inset-inline-end: 0;

  inset-block-end: 100%;



  .form-autocomplete.is-autocompleting + & {

    display: block;



    /* The spinner. */

    &::after {

      position: absolute;

      display: block;

      width: 0.875rem;

      height: 0.875rem;

      content: "";

      animation: gin-throbber 1s linear infinite;

      text-align: end;

      border: 2px solid var(--gin-bg-input);

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

      border-radius: 50%;

      inset-block-start: 2.1875rem;

      inset-inline-end: 0.75rem;

    }

  }

}



/* The actual <input type="text"> element. */



.js {

.form-autocomplete {

  margin-inline-end: calc(var(--input-border-size) - 1.5 * var(--input-padding-horizontal));

  padding-inline-end: 2.25rem;
@@ -43,42 +66,41 @@ 
    background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");

    background-position: 0 50%;

  }

}



    &.is-autocompleting {

      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");

      background-position: center right -10px;

/* <ul> dropdown */



      &:dir(rtl) {

        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,0)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,0);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,0)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite;transform-origin:left' r='4'/%3e%3c/svg%3e");

        background-position: center left 10px;

      }

    }

.ui-autocomplete {

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

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

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



  .ui-menu-item-wrapper.ui-state-active {

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

    background-color: var(--gin-bg-item-hover);



    @media (forced-colors: active) {

      outline: solid 2px transparent;

      outline-offset: -4px;

    }

  }



/**

 * Autocomplete wrapper for autocomplete message.

 */



.claro-autocomplete {

  position: relative;

  display: inline-block;

  width: calc(100% - var(--gin-spacing-m));

  max-width: 100%;

  .ui-menu-item a {

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



  .form-autocomplete {

    width: 100%;

    &:hover {

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

      background-color: var(--gin-bg-item-hover);

    }

  }

}



.claro-autocomplete__message {

  position: absolute;

  inset-inline-end: 0;

  inset-block-end: 100%;

  max-width: 100%;

  margin-block-end: 0.15rem;

  color: var(--color-link);

  font-size: var(--font-size-xxs); /* ~11px */

  font-weight: bold;

  line-height: calc(18rem / 16); /* 18px */

@keyframes gin-throbber {

  0% {

    transform: rotateZ(0);

  }



  100% {

    transform: rotateZ(360deg);

  }

}