Skip to content
Snippets Groups Projects
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
Branches
Tags
26 merge requests!12227Issue #3181946 by jonmcl, mglaman,!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!4289Issue #1344552 by marcingy, Niklas Fiekas, Ravi.J, aleevas, Eduardo Morales...,!4114Issue #2707291: Disable body-level scrolling when a dialog is open as a modal,!4100Issue #3249600: Add support for PHP 8.1 Enums as allowed values for list_* data types,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2334Issue #3228209: Add hasRole() method to AccountInterface,!2062Issue #3246454: Add weekly granularity to views date sort,!1591Issue #3199697: Add JSON:API Translation experimental module,!1484Exposed filters get values from URL when Ajax is on,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1105Issue #3025039: New non translatable field on translatable content throws error,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!925Issue #2339235: Remove taxonomy hard dependency on node module,!877Issue #2708101: Default value for link text is not saved,!872Draft: Issue #3221319: Race condition when creating menu links and editing content deletes menu links,!844Resolve #3036010 "Updaters",!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!213Issue #2906496: Give Media a menu item under Content,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
......@@ -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 */
......
......@@ -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;
}
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment