@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

package/src/legacy/tool-ui/src/main/webapp/v4/Page.less

@@ -1,922 +0,0 @@
-:root {
-  --Page-broadcastHeight: var(--lineHeight-xl);
-  --Page-headerHeight: calc(
-    var(--gap-l) + var(--lineHeight-m) + var(--lineHeight-xs)
-  );
-  --Page-headerBottom: var(--Page-headerHeight);
-}
-
-.Page {
-  --Page-bottom: 0px;
-  --Page-right: 0px;
-
-  display: grid;
-  grid-template:
-    'broadcast' auto
-    'header' auto
-    'content' 1fr
-    'guide' 0 ~'/'
-    1fr;
-  height: 100vh;
-  max-height: -webkit-fill-available;
-  max-height: fill-available;
-  overflow: hidden;
-  width: 100vw;
-
-  &.is-inIframe {
-    height: auto;
-  }
-
-  &.is-guideOpen {
-    --Page-bottom: 40%;
-
-    grid-template:
-      'broadcast' auto
-      'header' auto
-      'content' 1fr
-      'guide' 40% ~'/'
-      1fr;
-  }
-}
-
-.Page-broadcast,
-.Page-broadcastAlert {
-  .Text.is-s;
-
-  background: var(--color-yellow3);
-  display: none;
-  grid-area: broadcast;
-  line-height: var(--Page-broadcastHeight);
-  min-height: var(--Page-broadcastHeight);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 0 var(--gap-l);
-  white-space: nowrap;
-}
-
-.Page-broadcast::before {
-  .Icon;
-
-  content: 'warning';
-  margin-right: var(--gap-xs);
-  top: 0;
-  vertical-align: middle;
-}
-
-.Page-broadcastAlert {
-  align-items: center;
-  background: var(--color-red4);
-  display: flex;
-  grid-area: broadcast;
-  justify-content: space-between;
-  max-height: var(--Page-broadcastHeight);
-}
-
-.Page-broadcastAlert-messages div {
-  display: inline-block;
-}
-
-.Page-broadcastAlert-messages::before {
-  .Icon;
-
-  content: 'error';
-  margin-right: var(--gap-xs);
-  top: -1px;
-  vertical-align: middle;
-}
-
-.Page-broadcastAlert:has(.pagination) .Page-broadcastAlert-messages {
-  overflow: scroll;
-  text-align: left;
-}
-
-.Container-broadcast {
-  grid-area: broadcast;
-}
-
-.Container-broadcast .Page-broadcast {
-  .Text.is-s;
-
-  background: var(--color-yellow3);
-  border-top: 1px solid var(--color-yellow4);
-  display: block;
-  line-height: var(--Page-broadcastHeight);
-  min-height: var(--Page-broadcastHeight);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 0 var(--gap-l);
-  white-space: nowrap;
-}
-
-.Container-broadcast .Page-broadcast::before {
-  .Icon;
-
-  content: 'warning';
-  margin-right: var(--gap-xs);
-  top: 0;
-  vertical-align: middle;
-}
-
-.Container-broadcast .Page-broadcast:empty {
-  display: none;
-}
-
-.Container-broadcast {
-  grid-area: broadcast;
-}
-
-.Container-broadcast .Page-broadcast {
-  .Text.is-s;
-
-  background: var(--color-yellow3);
-  border-top: 1px solid var(--color-yellow4);
-  display: block;
-  line-height: var(--Page-broadcastHeight);
-  min-height: var(--Page-broadcastHeight);
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding: 0 var(--gap-l);
-  white-space: nowrap;
-}
-
-.Container-broadcast .Page-broadcast::before {
-  .Icon;
-
-  content: 'warning';
-  margin-right: var(--gap-xs);
-  top: 0;
-  vertical-align: middle;
-}
-
-.Container-broadcast .Page-broadcast:empty {
-  display: none;
-}
-
-.Page-header {
-  .Link.is-white;
-
-  align-items: center;
-  background: var(--Page-headerBackground);
-  color: var(--color-white);
-  display: flex;
-  grid-area: header;
-  height: var(--Page-headerHeight);
-  padding-right: var(--Icon-size);
-  z-index: 11;
-
-  .is-lightHeader & {
-    .Link.is-black;
-
-    color: var(--color-black);
-  }
-}
-
-.Page-header.is-env {
-  padding-right: var(--Page-headerHeight);
-}
-
-.Page-navToggle {
-  .IconButton;
-  .Icon.is-l;
-
-  :root:not(.is-lightHeader) & {
-    .IconButton.is-white;
-  }
-
-  --IconButton-name: 'menu';
-
-  flex: none;
-  margin: 0 calc(var(--gap-l) - var(--gap-s)) 0
-    calc(var(--gap-l) - var(--gap-s) - var(--Icon-size) / 12);
-  order: 1;
-}
-
-.Page-nav {
-  .Link.is-white;
-
-  background: var(--Page-headerBackground);
-  box-shadow: 5px 5px 15px rgb(0 0 0 / 10%);
-  height: calc(100% - var(--Page-headerBottom));
-  left: 0;
-  max-width: 100%;
-  opacity: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  padding-bottom: var(--gap-l);
-  position: fixed;
-  top: var(--Page-headerBottom);
-  transform: scaleX(0);
-  transform-origin: left;
-  transition:
-    opacity var(--time-xs) var(--ease-in),
-    transform var(--time-s) var(--ease-out),
-    visibility var(--time-s);
-  visibility: hidden;
-  z-index: 1000;
-
-  .is-lightHeader & {
-    .Link.is-black;
-  }
-
-  a {
-    display: block;
-    padding: var(--gap-m) var(--gap-l);
-
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-
-  li.isNested {
-    margin-bottom: 0;
-
-    > a {
-      border-top: 1px solid var(--color-dominant4);
-      font-weight: bold;
-      padding-right: calc(var(--gap-l) * 2 + var(--Icon-size));
-      position: relative;
-      text-decoration: none;
-
-      &:hover,
-      &:focus {
-        .Page-navItemToggle {
-          .IconButton.is-focus;
-        }
-      }
-    }
-
-    > ul {
-      height: 0;
-      overflow: hidden;
-      visibility: hidden;
-    }
-  }
-
-  li.isNested:first-child > a {
-    display: none;
-  }
-
-  li.isNested:first-child,
-  li.isNested.is-expanded {
-    margin-bottom: calc(var(--gap-l) - var(--gap-m));
-
-    > ul {
-      height: auto;
-      overflow: visible;
-      visibility: visible;
-    }
-  }
-}
-
-.Page-navItemToggle {
-  .IconButton;
-
-  :root:not(.is-lightHeader) & {
-    .IconButton.is-white;
-  }
-
-  --IconButton-name: 'keyboard_arrow_up';
-
-  margin-top: calc(0px - var(--Icon-size) / 2 - var(--gap-s));
-  position: absolute;
-  right: calc(var(--gap-l) - var(--gap-s));
-  top: 50%;
-  transform: rotate(180deg);
-  transition: transform var(--time-xs);
-
-  .is-expanded & {
-    transform: none;
-  }
-}
-
-.Page-title {
-  display: none;
-  height: 100%;
-  order: 2;
-  padding: calc(var(--gap-l) / 2) var(--gap-l);
-  padding-left: 0;
-
-  img {
-    display: block;
-    max-height: 100%;
-    max-width: 100%;
-  }
-
-  > a {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: calc(250px - var(--gap-l) * 2 - var(--iconSize-l) * 20 / 24);
-  }
-}
-
-.Page-search {
-  --Input-focusBackground: var(--color-dominant6);
-  --Input-placeholderColor: var(--color-gray3);
-
-  align-items: center;
-  display: flex;
-  flex: none;
-  flex-shrink: 1;
-  height: 100%;
-  order: 3;
-
-  .is-lightHeader & {
-    --Input-placeholderColor: var(--color-gray5);
-  }
-
-  .SearchInput {
-    width: 100%;
-
-    &,
-    &:hover,
-    &:focus {
-      label {
-        color: var(--color-white);
-
-        .is-lightHeader & {
-          color: var(--color-black);
-        }
-      }
-    }
-
-    input[type] {
-      border-color: var(--color-white);
-
-      .is-lightHeader & {
-        border-color: var(--color-black);
-      }
-    }
-  }
-}
-
-.Page-create {
-  display: none;
-  margin: 0 var(--gap-l) 0 calc(0px - var(--gap-s));
-  order: 4;
-
-  .ComboInput {
-    &:not([aria-expanded='true']) {
-      padding: 0;
-      width: calc(var(--gap-s) * 2 + var(--Icon-size));
-
-      &::before,
-      .ComboInput-icon::after {
-        display: none;
-      }
-
-      .ComboInput-label {
-        .IconButton;
-        .IconButton.is-white;
-
-        --IconButton-name: 'add';
-
-        &[data-placeholder]:empty::before {
-          color: var(--color-white);
-        }
-
-        .is-lightHeader & {
-          .IconButton.is-black;
-
-          &[data-placeholder]:empty::before {
-            color: var(--color-black);
-          }
-        }
-      }
-    }
-
-    &[aria-expanded='true'] {
-      background: transparent;
-      padding: var(--gap-s) var(--gap-s) var(--gap-s)
-        calc(var(--gap-s) * 2 + var(--Icon-size));
-      width: calc(var(--gap-s) * 3 + var(--Icon-size) + 3.5em) !important;
-
-      &::before {
-        border-color: var(--color-white);
-        left: var(--gap-s);
-
-        .is-lightHeader & {
-          border-color: var(--color-black);
-        }
-      }
-
-      .ComboInput-icon::after {
-        color: var(--color-white);
-        content: 'add';
-        left: var(--gap-s);
-        right: auto;
-
-        .is-lightHeader & {
-          color: var(--color-black);
-        }
-      }
-
-      .ComboInput-filter {
-        background: transparent;
-
-        &::placeholder {
-          color: var(--color-gray3);
-
-          .is-lightHeader & {
-            color: var(--color-gray5);
-          }
-        }
-      }
-    }
-  }
-}
-
-.Page-site,
-.Page-user {
-  margin-right: var(--gap-l);
-  white-space: nowrap;
-}
-
-.Page-site {
-  align-items: center;
-  display: flex;
-  order: 5;
-
-  a[target='siteSwitch'] {
-    display: inline-block;
-    max-width: calc(100vw - 296px);
-    overflow: hidden;
-    padding: var(--gap-s) 0;
-    text-overflow: ellipsis;
-  }
-
-  a[target='_blank'] {
-    .IconButton;
-
-    :root:not(.is-lightHeader) & {
-      .IconButton.is-white;
-    }
-
-    --IconButton-name: 'link';
-
-    margin-left: var(--gap-s);
-    margin-right: calc(0px - var(--gap-s));
-  }
-}
-
-.Page-avatar {
-  --Avatar-size: calc(var(--Page-headerHeight) - var(--gap-l));
-
-  flex: none;
-  margin-right: var(--gap-l);
-  order: 6;
-
-  > a {
-    display: block;
-    height: 100%;
-    text-decoration: none;
-  }
-}
-
-.Page-user {
-  display: none;
-  margin-left: calc(var(--gap-s) - var(--gap-l));
-  order: 7;
-
-  > a {
-    display: block;
-    height: calc(var(--Page-headerHeight) - var(--gap-l));
-    line-height: calc(var(--Page-headerHeight) - var(--gap-l));
-  }
-}
-
-.Page-notifications {
-  margin: 0 0 0 calc(0px - var(--gap-s));
-  order: 8;
-  position: relative;
-
-  &[data-new='true'] {
-    &::after {
-      align-items: center;
-      background: var(--color-red6);
-      border-radius: 50%;
-      bottom: 0;
-      content: attr(data-count-label);
-      display: flex;
-      font-size: var(--fontSize-xs);
-      height: var(--iconSize-s);
-      justify-content: center;
-      pointer-events: none;
-      position: absolute;
-      right: 0;
-      width: var(--iconSize-s);
-      z-index: 11;
-    }
-
-    > a {
-      --IconButton-name: 'notifications';
-    }
-  }
-
-  > a {
-    .IconButton;
-
-    :root:not(.is-lightHeader) & {
-      .IconButton.is-white;
-    }
-
-    --IconButton-name: 'notifications_none';
-
-    &.is-paused {
-      --IconButton-name: 'notifications_paused';
-    }
-
-    &.is-off {
-      --IconButton-name: 'notifications_off';
-    }
-  }
-}
-
-.Page-guideLink {
-  order: 9;
-
-  a {
-    .IconButton;
-
-    :root:not(.is-lightHeader) & {
-      .IconButton.is-white;
-    }
-
-    --IconButton-name: 'help';
-  }
-}
-
-.Page-env {
-  .Text.is-xs;
-
-  background: var(--color-dominant6);
-  box-shadow: var(--shadow-1);
-  color: var(--color-white);
-  flex: none;
-  order: 10;
-  position: absolute;
-  right: 0;
-  text-align: center;
-  text-transform: uppercase;
-  top: calc(var(--Page-headerHeight) - var(--Text-height) / 2);
-  transform: rotate(45deg);
-  transform-origin: bottom right;
-  white-space: nowrap;
-  width: calc(
-    (var(--Page-headerHeight) + var(--Text-height) / 2) * 1.415 /* ~sqrt(2) */
-  );
-  z-index: 1001;
-}
-
-.Page-content {
-  grid-area: content;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  position: relative;
-  z-index: 1;
-}
-
-.Page-guide {
-  background: var(--color-white);
-  border-color: var(--color-gray3);
-  border-style: solid;
-  border-width: 1px 0 0;
-  display: none;
-  grid-area: guide;
-  overflow: auto;
-  position: relative;
-
-  .Page.is-guideOpen & {
-    display: block;
-  }
-
-  > .frame {
-    background: var(--color-white);
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 9;
-  }
-}
-
-.Page-background {
-  display: none;
-}
-
-.Page.is-broadcasting,
-.Page.is-alertBroadcasting {
-  .Page-broadcast {
-    display: block;
-  }
-
-  .Container-broadcast {
-    display: block;
-    overflow-x: auto;
-    overflow-y: clip;
-  }
-}
-
-.Page.is-unauthenticated {
-  background: var(--color-dominant7);
-  display: block;
-
-  .Page-title {
-    bottom: 60vh;
-    display: block;
-    height: auto;
-    padding: 0 var(--gap-l);
-    position: absolute;
-    right: 0;
-    top: auto;
-    width: 100%;
-    z-index: 10;
-
-    img {
-      max-width: 100%;
-    }
-
-    a {
-      max-width: none;
-      padding: 0;
-    }
-  }
-
-  .Page-content {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-
-    .Widget.ForgotPassword {
-      margin: 0 auto;
-      width: 30em;
-    }
-  }
-
-  .Page-login {
-    background: var(--Page-headerBackground);
-    bottom: 0;
-    padding: var(--gap-l);
-    padding-top: 40vh;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 100%;
-
-    > h1 {
-      display: none;
-    }
-
-    > .Message,
-    > form {
-      margin: var(--gap-l) 0 0 0;
-      width: 100%;
-    }
-
-    > form > * {
-      margin-top: 0;
-    }
-
-    .inputLabel {
-      display: none;
-    }
-
-    .CIG-row::after {
-      display: none;
-    }
-
-    input[type] {
-      background: transparent;
-      color: var(--color-white);
-      width: 100%;
-
-      .is-lightHeader & {
-        color: var(--color-black);
-      }
-
-      :root:not(.is-lightHeader) & {
-        &:-webkit-autofill {
-          &,
-          &:active,
-          &:hover,
-          &:focus {
-            // Workaround for not being able to set the background directly.
-            -webkit-box-shadow: 0 0 0 var(--Text-height) var(--color-yellow7)
-              inset !important;
-            -webkit-text-fill-color: var(--color-white) !important;
-          }
-        }
-      }
-    }
-
-    .ActionBar {
-      background: var(--Page-headerBackground);
-      border-top: 0;
-    }
-
-    button.action {
-      margin-top: var(--gap-m);
-    }
-
-    .buttons a {
-      pointer-events: auto;
-    }
-  }
-}
-
-.Page:not(.is-unauthenticated) {
-  .Page-header {
-    overflow: hidden;
-    position: relative;
-  }
-}
-
-.Page.is-navigating {
-  .Page-navToggle::before {
-    content: 'close';
-  }
-
-  .Page-nav {
-    opacity: 1;
-    transform: scaleX(1);
-    visibility: visible;
-  }
-}
-
-.Page-loginDialog > dialog {
-  align-items: center;
-  background: transparent;
-  bottom: 0;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-
-  &:focus-visible {
-    box-shadow: none !important;
-    outline: none;
-  }
-
-  .Widget .Message.is-error {
-    margin: var(--gap-l) 0;
-  }
-
-  .Widget {
-    background: var(--color-white);
-  }
-}
-
-@media not all and (@mq-s) {
-  .Page-search {
-    margin-right: var(--gap-l);
-
-    > .SearchInput {
-      width: var(--Icon-size);
-
-      input[type] {
-        border-color: transparent !important;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-@media (@mq-s) {
-  .Page.is-guideOpen {
-    .ContentEdit-preview {
-      left: 0;
-      right: 0;
-    }
-  }
-
-  .Page-broadcastAlert {
-    padding: 0 var(--gap-l);
-  }
-
-  .Page-navToggle {
-    padding-right: calc(var(--gap-l) + var(--gap-s) + 2px);
-  }
-
-  .Page-notifications,
-  .Page-guideLink {
-    margin: 0 calc(var(--gap-l) - var(--gap-s)) 0 calc(0px - var(--gap-s));
-  }
-
-  .Page-search {
-    :root:not(.is-lightHeader) & {
-      --Input-borderColor: var(--color-white);
-    }
-
-    padding: calc(var(--gap-l) / 2) var(--gap-l) calc(var(--gap-l) / 2) 0;
-    width: 30vw;
-  }
-
-  .Page-create {
-    display: block;
-    flex-grow: 1;
-  }
-}
-
-@media (@mq-m) {
-  .Page.is-guideOpen {
-    --Page-bottom: 0px;
-    --Page-right: 270px;
-
-    grid-template:
-      'broadcast broadcast' auto
-      'header header' auto
-      'content guide' 1fr ~'/'
-      1fr var(--Page-right);
-
-    .ContentEdit-preview {
-      left: auto;
-      right: calc(var(--Page-right) + var(--ContentEdit-toolbarWidth));
-    }
-
-    .is-asideHidden .ContentEdit-preview {
-      right: var(--ContentEdit-toolbarWidth);
-    }
-
-    .Page-content,
-    .Popup {
-      --ContentEdit-leftWidth: calc(
-        100vw - var(--ContentEdit-previewWidth) -
-          var(--ContentEdit-toolbarWidth) - var(--Page-right)
-      );
-    }
-  }
-
-  .Page-user {
-    display: block;
-  }
-
-  .Page.is-unauthenticated {
-    --Page-loginWidth: 320px;
-
-    .Page-title {
-      width: var(--Page-loginWidth);
-    }
-
-    .Page-background {
-      background-position: top;
-      background-size: cover;
-      bottom: 0;
-      display: block;
-      left: 0;
-      position: absolute;
-      right: var(--Page-loginWidth);
-      top: 0;
-    }
-
-    .Page-login {
-      width: var(--Page-loginWidth);
-    }
-  }
-
-  .Page-guide {
-    border-width: 0 0 0 1px;
-  }
-}
-
-.button--aria-skip {
-  background: var(--color-white);
-  position: absolute;
-  text-transform: capitalize;
-  z-index: 100;
-}
-
-@media (@mq-l) {
-  .Page.is-guideOpen {
-    --Page-right: 360px;
-  }
-
-  .Page-title {
-    display: block;
-    font-size: unset;
-    font-weight: unset;
-    line-height: unset;
-    margin: unset;
-  }
-}
-
-// Legacy.
-.toolUserControls,
-.toolUserSiteControls {
-  display: none;
-}
-
-.toolUserDisplay,
-.toolUser,
-.toolUserSite {
-  display: contents;
-}