Verified Commit 3d86f4c4 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332707 by Gauravvvv, Santosh_Verma, smustgrave: Refactor Claro's toolbar.module stylesheet

parent 2b6fade7

core/themes/claro/css/components/toolbar.module.css

+24 −63
Original line number Diff line number Diff line
@@ -46,7 +46,7 @@ 
  list-style-image: none;

}

.toolbar .menu-item {

  padding-top: 0;

  padding-block-start: 0;

}

.toolbar .toolbar-bar .toolbar-tab,

.toolbar .menu-item {
@@ -59,17 +59,18 @@ 
  display: block;

  line-height: 1;

}

/**

 * Administration menu.

 */

.toolbar .toolbar-bar,

.toolbar .toolbar-tray {

  position: relative;

  z-index: 1250;

}

.toolbar .toolbar-tray {

  z-index: 501;

  display: none;

}

.toolbar-horizontal .toolbar-tray {

  position: fixed;

  left: 0;

  inset-inline-start: 0;

  width: 100%;

}

/* Position the admin toolbar absolutely when the configured standard breakpoint
@@ -78,14 +79,20 @@ 
 * screens, the components of the admin toolbar are positioned statically. */

.toolbar-oriented .toolbar-bar {

  position: absolute;

  top: 0;

  right: 0;

  left: 0;

  inset-block-start: 0;

  inset-inline: 0;

}

.toolbar-oriented .toolbar-tray {

  position: absolute;

  right: 0;

  left: 0;

  inset-inline: 0;

}

.toolbar-oriented .toolbar-bar {

  z-index: 502; /* Layer the bar just above the trays and above contextual link triggers. */

}

.toolbar-oriented .toolbar-tray-vertical {

  position: absolute;

  inset-inline-start: -100%;

  width: 15rem;

}

/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup

 * style to avoid extra reflow & flicker. */
@@ -104,10 +111,6 @@ 
    display: block;

  }

}

/* Layer the bar just above the trays and above contextual link triggers. */

.toolbar-oriented .toolbar-bar {

  z-index: 502;

}

/* Position the admin toolbar fixed when the configured standard breakpoint is

 * active. */

body.toolbar-fixed .toolbar-oriented .toolbar-bar {
@@ -117,8 +120,7 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar { 
 * around the trays in order to provide a context for scrolling tray content

 * that is taller than the viewport. */

body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {

  bottom: 0;

  width: 240px;

  inset-block-end: 0;

  width: 15rem;

}

/* Present the admin toolbar tabs horizontally as a default on user agents that
@@ -141,10 +143,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
  .toolbar .toolbar-tray-horizontal li {

    float: none; /* LTR */

  }

  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

    float: none;

  }

}

/* This min-width media query is meant to provide basic horizontal layout to

 * the main menu tabs when JavaScript is disabled on user agents that understand
@@ -169,23 +167,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {

  float: right;

}

/**

 * Toolbar tray.

 */

.toolbar .toolbar-tray {

  z-index: 501;

  display: none;

}

.toolbar-oriented .toolbar-tray-vertical {

  position: absolute;

  left: -100%; /* LTR */

  width: 240px;

  width: 15rem;

}

[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {

  right: -100%;

  left: auto;

}

.toolbar .toolbar-tray-vertical > .toolbar-lining {

  min-height: 100%;

}
@@ -214,33 +195,17 @@ body.toolbar-fixed .toolbar .toolbar-tray-vertical { 
}

/* Bring the tray into the viewport. By default it is just off-screen. */

.toolbar-oriented .toolbar-tray-vertical.is-active {

  left: 0; /* LTR */

}

[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {

  right: 0;

  left: auto;

  inset-inline-start: 0;

}

/* When the configured standard breakpoint is active, the tray appears to push

 * the page content away from the edge of the viewport. */

body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  margin-left: 240px; /* LTR */

  margin-left: 15rem; /* LTR */

  margin-inline-start: 15rem;

}



@media print {

  body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

    margin-left: 0;

  }

}

[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  margin-right: 240px;

  margin-right: 15rem;

  margin-left: auto;

}



@media print {

  [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

    margin-right: 0;

    margin-inline-start: 0;

  }

}

/**
@@ -258,13 +223,9 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed { 
}

.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  position: absolute;

  top: auto;

  right: 0; /* LTR */

  bottom: 0;

}

[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  right: auto;

  left: 0;

  inset-block-start: auto;

  inset-inline-end: 0;

  inset-block-end: 0;

}

.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  float: right; /* LTR */

core/themes/claro/css/components/toolbar.module.pcss.css

+127 −117
Original line number Diff line number Diff line
@@ -39,48 +39,66 @@ 
  list-style-type: none;

  list-style-image: none;

}

.toolbar .menu-item {

  padding-top: 0;

.toolbar {

  & .menu-item {

    padding-block-start: 0;

  }

.toolbar .toolbar-bar .toolbar-tab,

.toolbar .menu-item {



  & .toolbar-bar .toolbar-tab,

  & .menu-item {

    display: block;

  }

.toolbar .toolbar-bar .toolbar-tab.hidden {

  & .toolbar-bar {

    & .toolbar-tab {

      &.hidden {

        display: none;

      }

.toolbar a {

    }

  }

  & a {

    display: block;

    line-height: 1;

  }



/**

 * Administration menu.

 */

.toolbar .toolbar-bar,

.toolbar .toolbar-tray {

  & .toolbar-bar,

  & .toolbar-tray {

    position: relative;

    z-index: 1250;

  }

.toolbar-horizontal .toolbar-tray {

  & .toolbar-tray {

    z-index: 501;

    display: none;

  }

}



.toolbar-horizontal {

  & .toolbar-tray {

    position: fixed;

  left: 0;

    inset-inline-start: 0;

    width: 100%;

  }

}

/* Position the admin toolbar absolutely when the configured standard breakpoint

 * is active. The toolbar container, that contains the bar and the trays, is

 * position absolutely so that it scrolls with the page. Otherwise, on smaller

 * screens, the components of the admin toolbar are positioned statically. */

.toolbar-oriented .toolbar-bar {

.toolbar-oriented {

  & .toolbar-bar {

    position: absolute;

  top: 0;

  right: 0;

  left: 0;

    inset-block-start: 0;

    inset-inline: 0;

  }

.toolbar-oriented .toolbar-tray {

  & .toolbar-tray {

    position: absolute;

  right: 0;

  left: 0;

    inset-inline: 0;

  }

  & .toolbar-bar {

    z-index: 502; /* Layer the bar just above the trays and above contextual link triggers. */

  }

  & .toolbar-tray-vertical {

    position: absolute;

    inset-inline-start: -100%;

    width: 15rem;

  }

}

/* .toolbar-loading is required by Toolbar JavaScript to pre-render markup

 * style to avoid extra reflow & flicker. */
@@ -100,10 +118,6 @@ 
  }

}



/* Layer the bar just above the trays and above contextual link triggers. */

.toolbar-oriented .toolbar-bar {

  z-index: 502;

}

/* Position the admin toolbar fixed when the configured standard breakpoint is

 * active. */

body.toolbar-fixed .toolbar-oriented .toolbar-bar {
@@ -113,8 +127,7 @@ body.toolbar-fixed .toolbar-oriented .toolbar-bar { 
 * around the trays in order to provide a context for scrolling tray content

 * that is taller than the viewport. */

body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {

  bottom: 0;

  width: 240px;

  inset-block-end: 0;

  width: 15rem;

}
@@ -126,11 +139,13 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
.toolbar .toolbar-tray-horizontal li {

  float: left; /* LTR */

}

[dir="rtl"] .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

[dir="rtl"] .toolbar .toolbar-tray-horizontal li {

[dir="rtl"] {

  & .toolbar-loading.toolbar-horizontal .toolbar .toolbar-tray .toolbar-menu > li,

  & .toolbar .toolbar-bar .toolbar-tab,

  & .toolbar .toolbar-tray-horizontal li {

    float: right;

  }

}

/* Present the admin toolbar tabs vertically by default on user agents that

 * that understand media queries. This will be the small screen default. */

@media only screen {
@@ -138,10 +153,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
  .toolbar .toolbar-tray-horizontal li {

    float: none; /* LTR */

  }

  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

    float: none;

  }

}

/* This min-width media query is meant to provide basic horizontal layout to

 * the main menu tabs when JavaScript is disabled on user agents that understand
@@ -151,39 +162,26 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented { 
  .toolbar .toolbar-tray-horizontal li {

    float: left; /* LTR */

  }

  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,

  [dir="rtl"] .toolbar .toolbar-tray-horizontal li {

  [dir="rtl"] {

    & .toolbar .toolbar-bar .toolbar-tab,

    & .toolbar .toolbar-tray-horizontal li {

      float: right;

    }

  }

}

/* Present the admin toolbar tabs horizontally when the configured narrow

 * breakpoint is active. */

.toolbar-oriented .toolbar-bar .toolbar-tab,

.toolbar-oriented .toolbar-tray-horizontal li {

  float: left; /* LTR */

}

[dir="rtl"] .toolbar-oriented .toolbar-bar .toolbar-tab,

[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {

[dir="rtl"] {

  & .toolbar-oriented .toolbar-bar .toolbar-tab,

  & .toolbar-oriented .toolbar-tray-horizontal li {

    float: right;

  }



/**

 * Toolbar tray.

 */

.toolbar .toolbar-tray {

  z-index: 501;

  display: none;

}

.toolbar-oriented .toolbar-tray-vertical {

  position: absolute;

  left: -100%; /* LTR */

  width: 240px;

  width: 15rem;

}

[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical {

  right: -100%;

  left: auto;

}



.toolbar .toolbar-tray-vertical > .toolbar-lining {

  min-height: 100%;

}
@@ -211,73 +209,85 @@ body.toolbar-fixed .toolbar .toolbar-tray-vertical { 
  display: block;

}

/* Bring the tray into the viewport. By default it is just off-screen. */

.toolbar-oriented .toolbar-tray-vertical.is-active {

  left: 0; /* LTR */

.toolbar-oriented {

  & .toolbar-tray-vertical {

    &.is-active {

      inset-inline-start: 0;

    }

  }

[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {

  right: 0;

  left: auto;

}

/* When the configured standard breakpoint is active, the tray appears to push

 * the page content away from the edge of the viewport. */

body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  margin-left: 240px; /* LTR */

  margin-left: 15rem; /* LTR */

body {

  &.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

    margin-inline-start: 15rem;

  }

}



@media print {

  body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

    margin-left: 0;

  body {

    &.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

      margin-inline-start: 0;

    }

  }

[dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

  margin-right: 240px;

  margin-right: 15rem;

  margin-left: auto;

}



@media print {

  [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {

    margin-right: 0;

  }

}

/**

 * ToolBar tray orientation toggle.

 */

/* Hide the orientation toggle when the configured narrow breakpoint is not

 * active. */

.toolbar .toolbar-tray .toolbar-toggle-orientation {

.toolbar {

  & .toolbar-tray {

    & .toolbar-toggle-orientation {

      display: none;

    }

  }

}

/* Show the orientation toggle when the configured narrow breakpoint is

 * active. */

.toolbar-oriented .toolbar-tray .toolbar-toggle-orientation {

.toolbar-oriented {

  & .toolbar-tray {

    & .toolbar-toggle-orientation {

      display: block;

    }

.toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  }

  & .toolbar-tray-horizontal {

    & .toolbar-toggle-orientation {

      position: absolute;

  top: auto;

  right: 0; /* LTR */

  bottom: 0;

      inset-block-start: auto;

      inset-inline-end: 0;

      inset-block-end: 0;

    }

[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {

  right: auto;

  left: 0;

  }

.toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  & .toolbar-tray-vertical {

    & .toolbar-toggle-orientation {

      float: right; /* LTR */

      width: 100%;

    }

[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

  }

}

[dir="rtl"] {

  & .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {

    float: left;

  }

}



/**

 * Toolbar home button toggle.

 */

.toolbar .toolbar-bar .home-toolbar-tab {

.toolbar {

  & .toolbar-bar {

    & .home-toolbar-tab {

      display: none;

    }

.path-admin .toolbar-bar .home-toolbar-tab {

  }

}



.path-admin {

  & .toolbar-bar {

    & .home-toolbar-tab {

      display: block;

    }

  }

}