workspaces.toolbar.pcss.css

Styling for Workspaces module's toolbar tab.

File

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

View source 
  1. /**

  2.  * @file

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

  4.  */

  5. 

  6. /* Toolbar tab */

  7. .toolbar .toolbar-bar .workspaces-toolbar-tab {

  8.   color: #000;

  9.   background-color: #e09600;

  10. }

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

  12.   background-color: #81c071;

  13. }

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

  15.   float: right; /* LTR */

  16. 

  17.   /**

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

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

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

  21.    *

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

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

  24.    */

  25.   &:dir(rtl) {

  26.     float: left;

  27.   }

  28. }

  29. 

  30. @media (min-width: 264px) {

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

  32.     float: right; /* LTR */

  33. 

  34.     /**

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

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

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

  38.      *

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

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

  41.      */

  42.     &:dir(rtl) {

  43.       float: left;

  44.     }

  45.   }

  46. }

  47. 

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

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

  50.   width: 100%;

  51.   margin: 0;

  52.   text-align: start;

  53.   color: inherit;

  54. 

  55.   @nest .toolbar-oriented 
  56. }

  57. 

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

  59.   background-image: url("../icons/000000/workspaces.svg");

  60. }

  61. 

  62. @media all and (max-width: 766px) {

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

  64.     width: auto;

  65.     max-width: 8em;

  66.   }

  67. 

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

  69.     overflow: hidden;

  70.     padding-inline: 2.75em 1.3333em;

  71.     white-space: nowrap;

  72.     text-indent: 0;

  73.     text-overflow: ellipsis;

  74.   }

  75. 

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

  77.     inset-inline-start: 0.6667em;

  78.     width: 20px;

  79.     background-size: 100% auto;

  80.   }

  81. }