workspaces.toolbar.css

Styling for Workspaces module's toolbar tab.

File

core/modules/workspaces/css/workspaces.toolbar.css

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/3084859

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Styling for Workspaces module's toolbar tab.

  11.  */

  12. 

  13. /* Toolbar tab */

  14. 

  15. .toolbar .toolbar-bar .workspaces-toolbar-tab {

  16.   color: #000;

  17.   background-color: #e09600;

  18. }

  19. 

  20. .toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {

  21.   background-color: #81c071;

  22. }

  23. 

  24. .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab {

  25.   float: right; /* LTR */

  26. 

  27.   /**

  28.    * Chromium and Webkit do not yet support flow relative logical properties,

  29.    * such as float: inline-end. However, PostCSS Logical does not compile this

  30.    * value, so we accommodate by not using these.

  31.    *

  32.    * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

  33.    * @see https://github.com/csstools/postcss-plugins/issues/632

  34.    */

  35. }

  36. 

  37. .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab:dir(rtl) {

  38.   float: left;

  39. }

  40. 

  41. @media (min-width: 16.5rem) {

  42.   .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab {

  43.     float: right; /* LTR */

  44. 

  45.     /**

  46.      * Chromium and Webkit do not yet support flow relative logical properties,

  47.      * such as float: inline-end. However, PostCSS Logical does not compile this

  48.      * value, so we accommodate by not using these.

  49.      *

  50.      * @see https://caniuse.com/mdn-css_properties_clear_flow_relative_values

  51.      * @see https://github.com/csstools/postcss-plugins/issues/632

  52.      */

  53.   }

  54.   .toolbar:not(.toolbar-oriented) .toolbar-bar .workspaces-toolbar-tab:dir(rtl) {

  55.     float: left;

  56.   }

  57. }

  58. 

  59. /* Link within the toolbar tab. */

  60. 

  61. .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {

  62.   width: 100%;

  63.   margin: 0;

  64.   text-align: start;

  65.   color: inherit;

  66. }

  67. 

  68. .toolbar-oriented :is(.toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item) {

  69.   width: auto;

  70.   text-align: initial;

  71. }

  72. 

  73. .toolbar .toolbar-icon-workspace::before {

  74.   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e  %3cpath d='M14,12 L16,12 L16,0 L4,0 L4,2 L14,2 L14,12 Z M0,4 L12,4 L12,16 L0,16 L0,4 Z'/%3e%3c/svg%3e");

  75. }

  76. 

  77. @media all and (max-width: 47.875rem) {

  78.   .toolbar-oriented .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {

  79.     width: auto;

  80.     max-width: 8em;

  81.   }

  82. 

  83.   .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {

  84.     overflow: hidden;

  85.     padding-inline: 2.75em 1.3333em;

  86.     white-space: nowrap;

  87.     text-indent: 0;

  88.     text-overflow: ellipsis;

  89.   }

  90. 

  91.   .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace::before {

  92.     inset-inline-start: 0.6667em;

  93.     width: 1.25rem;

  94.     background-size: 100% auto;

  95.   }

  96. }