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