Chris@4: /**
Chris@4:  * @file
Chris@4:  * Styling for Workspaces module's toolbar tab.
Chris@4:  */
Chris@4: 
Chris@4: /**
Chris@4:  * @todo Remove this after https://www.drupal.org/project/drupal/issues/2986056
Chris@4:  *  has been solved.
Chris@4:  */
Chris@4: .workspaces-dialog #drupal-off-canvas * {
Chris@4:   background: initial;
Chris@4: }
Chris@4: .workspaces-dialog #drupal-off-canvas {
Chris@4:   background: #444;
Chris@4: }
Chris@4: 
Chris@4: /* Tab appearance. */
Chris@4: .toolbar .toolbar-bar .workspaces-toolbar-tab {
Chris@4:   float: right; /* LTR */
Chris@4:   background-color: #e09600;
Chris@4: }
Chris@4: [dir="rtl"] .toolbar .toolbar-bar .workspaces-toolbar-tab {
Chris@4:   float: left;
Chris@4: }
Chris@4: .toolbar .toolbar-bar .workspaces-toolbar-tab--is-default {
Chris@4:   background-color: #81c071;
Chris@4: }
Chris@4: 
Chris@4: .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-item {
Chris@4:   color: #000;
Chris@4:   margin: 0;
Chris@4: }
Chris@4: 
Chris@4: .toolbar .toolbar-icon-workspace:before {
Chris@4:   background-image: url("../icons/000000/workspaces.svg");
Chris@4: }
Chris@4: 
Chris@4: /* Off canvas dialog */
Chris@4: .workspaces-dialog.ui-dialog-off-canvas a:focus {
Chris@4:   outline: none;
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-dialog-off-canvas #drupal-off-canvas,
Chris@4: .workspaces-dialog.ui-dialog-off-canvas {
Chris@4:   background: #333;
Chris@4:   padding: 0;
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-widget.ui-widget-content {
Chris@4:   height: 100% !important;
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
Chris@4:   visibility: hidden;
Chris@4:   position: relative;
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar .ui-button {
Chris@4:   visibility: visible;
Chris@4:   z-index: 101;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace {
Chris@4:   background-color: #444;
Chris@4:   width: 100%;
Chris@4:   padding: 20px 40px 0 20px;
Chris@4:   height: 140px;
Chris@4:   position: relative;
Chris@4:   top: 16px;
Chris@4: }
Chris@4: 
Chris@4: @media all and (min-width: 767px) {
Chris@4:   #drupal-off-canvas .active-workspace {
Chris@4:     padding: 20px 40px 0 40px;
Chris@4:   }
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__title {
Chris@4:   font-size: 0.8125rem;
Chris@4:   font-weight: bold;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__label {
Chris@4:   color: #fff;
Chris@4:   font-size: 1.285em;
Chris@4:   margin-top: 0.5em;
Chris@4:   margin-left: 3.2rem;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__manage {
Chris@4:   font-size: 0.9286em;
Chris@4:   margin-left: 3.2rem;
Chris@4:   white-space: nowrap;
Chris@4:   outline-color: currentColor;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__actions {
Chris@4:   position: relative;
Chris@4:   top: 1em;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__button {
Chris@4:   border-radius: 20px;
Chris@4:   background-image: linear-gradient(to bottom, #007bc6, #0071b8);
Chris@4:   border: solid 1px #1e5c90;
Chris@4:   padding: 5px 22px;
Chris@4:   color: #fff;
Chris@4:   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
Chris@4:   font-weight: bold;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__button:hover {
Chris@4:   text-decoration: none;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .all-workspaces {
Chris@4:   position: fixed;
Chris@4:   bottom: 1em;
Chris@4:   left: 20px;
Chris@4:   color: #fff;
Chris@4:   outline-color: currentColor;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .workspaces ul {
Chris@4:   display: block;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .workspaces li {
Chris@4:   flex: 1;
Chris@4:   margin-bottom: 1px;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .workspaces a {
Chris@4:   background-color: #555;
Chris@4:   box-sizing: border-box;
Chris@4:   padding: 20px 0 0 50px;
Chris@4:   margin-right: 1px;
Chris@4:   color: #fff;
Chris@4:   font-size: 0.929em;
Chris@4:   font-weight: bold;
Chris@4:   text-decoration: none;
Chris@4:   position: relative;
Chris@4:   display: block;
Chris@4:   height: 73px;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__label:before,
Chris@4: #drupal-off-canvas .workspaces__item:before {
Chris@4:   background: url("../icons/f0a100/ws_icon.svg") center center no-repeat;
Chris@4:   background-size: 100% auto;
Chris@4:   content: '';
Chris@4:   display: block;
Chris@4:   height: 20px;
Chris@4:   width: 20px;
Chris@4:   left: 20px;
Chris@4:   position: absolute;
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace--default .active-workspace__label:before,
Chris@4: #drupal-off-canvas .workspaces__item--default:before {
Chris@4:   background-image: url("../icons/81c071/ws_icon.svg");
Chris@4: }
Chris@4: 
Chris@4: #drupal-off-canvas .active-workspace__label:before {
Chris@4:   height: 40px;
Chris@4:   width: 40px;
Chris@4:   left: 20px;
Chris@4: }
Chris@4: 
Chris@4: @media all and (min-width: 767px) {
Chris@4:   #drupal-off-canvas .active-workspace__label:before {
Chris@4:     left: 40px;
Chris@4:   }
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
Chris@4:   padding: 0;
Chris@4:   top: 39px;
Chris@4: }
Chris@4: 
Chris@4: .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
Chris@4:   right: 0.5em;
Chris@4:   top: 1em;
Chris@4: }
Chris@4: 
Chris@4: @media all and (max-width: 766px) {
Chris@4:   .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace {
Chris@4:     padding-left: 2.75em;
Chris@4:     padding-right: 1.3333em;
Chris@4:     text-indent: 0;
Chris@4:     width: auto;
Chris@4:     max-width: 8em;
Chris@4:     white-space: nowrap;
Chris@4:     overflow: hidden;
Chris@4:     text-overflow: ellipsis;
Chris@4:   }
Chris@4: 
Chris@4:   .toolbar .toolbar-bar .workspaces-toolbar-tab .toolbar-icon-workspace:before {
Chris@4:     background-size: 100% auto;
Chris@4:     left: 0.6667em;
Chris@4:     width: 20px;
Chris@4:   }
Chris@4: }
Chris@4: 
Chris@4: @media all and (min-width: 767px) {
Chris@4:   #drupal-off-canvas .active-workspace {
Chris@4:     right: 0;
Chris@4:     top: 0;
Chris@4:     position: fixed;
Chris@4:     width: calc(30% - 80px);
Chris@4:     padding: 20px 40px 0;
Chris@4:     height: 140px;
Chris@4:   }
Chris@4: 
Chris@4:   #drupal-off-canvas .all-workspaces {
Chris@4:     padding-left: 20px;
Chris@4:     position: relative;
Chris@4:     margin-top: 31px;
Chris@4:     left: 0;
Chris@4:     top: 27px;
Chris@4:   }
Chris@4: 
Chris@4:   .workspaces-dialog.ui-widget.ui-widget-content {
Chris@4:     height: 161px !important;
Chris@4:   }
Chris@4: 
Chris@4:   #drupal-off-canvas .workspaces {
Chris@4:     width: 70%;
Chris@4:     bottom: 0;
Chris@4:     position: absolute;
Chris@4:   }
Chris@4: 
Chris@4:   #drupal-off-canvas .workspaces ul {
Chris@4:     display: flex;
Chris@4:     flex-direction: row;
Chris@4:   }
Chris@4: 
Chris@4:   #drupal-off-canvas .workspaces li {
Chris@4:     margin-bottom: 0;
Chris@4:   }
Chris@4: 
Chris@4:   #drupal-off-canvas .active-workspace__actions {
Chris@4:     position: absolute;
Chris@4:     bottom: 1em;
Chris@4:     top: unset;
Chris@4:   }
Chris@4: 
Chris@4:   .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
Chris@4:     top: 0;
Chris@4:   }
Chris@4: 
Chris@4:   .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close,
Chris@4:   .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
Chris@4:   .workspaces-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
Chris@4:     top: 1.5em;
Chris@4:   }
Chris@4: }
Chris@4: 
Chris@4: /* Make dialog width 100% for workspace mobile viewports. */
Chris@4: @media all and (max-width: 48em) {
Chris@4:   .ui-dialog.workspaces-dialog {
Chris@4:     min-width: 100%;
Chris@4:     max-width: 100%;
Chris@4:   }
Chris@4: }