@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,258 @@
+@import (reference) url('./Dropdown.less');
+
+.TabBar {
+  background: var(--color-white);
+  min-height: calc(var(--gap-m) * 2 + var(--Text-height));
+  position: relative;
+  white-space: nowrap;
+
+  &::before {
+    background: var(--color-gray3);
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:not(.is-menuOnly) {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &.is-menuOnly:not(.is-menuSelected) {
+    background: transparent;
+    margin-bottom: calc(0px - var(--Text-height));
+
+    &::before {
+      display: none;
+    }
+
+    &:not(.is-open) {
+      z-index: 1;
+    }
+  }
+
+  & + .CIG-row:not(:has(.CIG-note)) .CIG-label:first-child {
+    margin-bottom: var(--gap-s);
+  }
+}
+
+.TabBar-item,
+.TabBar-menuToggle {
+  color: var(--color-gray6);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: bold;
+  padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px)
+    var(--gap-l);
+  position: relative;
+  text-transform: uppercase;
+
+  &::before {
+    background-color: var(--color-dominant3);
+    bottom: 0;
+    content: '';
+    height: 4px;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transform: scaleX(0);
+    transition: transform var(--time-xs) var(--ease-out);
+  }
+
+  a {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+}
+
+.TabBar-itemHover() {
+  &::before {
+    transform: scaleX(1);
+  }
+}
+
+.TabBar-itemSelected() {
+  color: var(--color-black);
+
+  &::before {
+    background-color: var(--color-dominant6);
+    transform: none;
+  }
+}
+
+.TabBar-item {
+  border: none;
+
+  &::after {
+    background: var(--color-gray3);
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &:hover,
+  &:focus {
+    .TabBar-itemHover();
+  }
+
+  &:focus-visible {
+    box-shadow: none !important;
+    outline: solid 2px var(--color-dominant6);
+    outline-offset: calc(-1 * var(--gap-s));
+  }
+
+  &.is-selected,
+  &.selected,
+  &.state-selected {
+    .TabBar-itemSelected();
+  }
+}
+
+.TabBar-menu:hover > .TabBar-menuToggle,
+.TabBar.is-open .TabBar-menuToggle {
+  .TabBar-itemHover();
+}
+
+.TabBar.is-menuSelected .TabBar-menuToggle {
+  .TabBar-itemSelected();
+}
+
+.TabBar-menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.TabBar-menuToggle {
+  border: none;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  padding-right: calc(var(--gap-s) * 3 + var(--Icon-size));
+  text-decoration: none;
+
+  &:empty {
+    padding-left: var(--gap-s);
+  }
+
+  &::after {
+    .Icon;
+
+    content: 'more_horiz';
+    position: absolute;
+    right: calc(var(--gap-s) * 2);
+    top: calc(
+      var(--gap-m) + var(--Text-height) / 2 - var(--Icon-size) / 2 - 1px
+    );
+  }
+}
+
+.TabBar-menuList {
+  .Dropdown;
+}
+
+.TabBar-menuItem {
+  .Dropdown-item;
+
+  border: none;
+  cursor: pointer;
+  font-weight: inherit;
+  padding-left: calc(var(--gap-s) * 2 + var(--Icon-size));
+  position: relative;
+  text-transform: none;
+
+  &.is-selected::before {
+    .Icon;
+
+    content: 'check';
+    left: var(--gap-s);
+    margin-right: var(--gap-s);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.TabBar.is-open {
+  .TabBar-menuList {
+    .Dropdown.is-open;
+  }
+}
+
+.TabBar.is-menuSelected {
+  .TabBar-menuToggle {
+    color: var(--color-black);
+
+    &::before {
+      background-color: var(--color-dominant6);
+      bottom: 0;
+      content: '';
+      height: 4px;
+      left: 0;
+      position: absolute;
+      right: 0;
+    }
+
+    &:hover {
+      color: var(--Link-hoverColor);
+    }
+  }
+}
+
+.TabBar.is-menuError {
+  .TabBar-menuToggle::after {
+    color: var(--color-red6);
+    content: 'error';
+  }
+
+  .TabBar-menuItem {
+    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+  }
+}
+
+.TabBar-item,
+.TabBar-menuItem {
+  &.is-error {
+    color: var(--color-red6);
+    padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+
+    &::after {
+      .Icon;
+
+      background: transparent;
+      content: 'error';
+      height: auto;
+      left: auto;
+      position: absolute;
+      right: var(--gap-l);
+      top: 50%;
+      transform: translateY(calc(-50% - 1px));
+    }
+  }
+}
+
+.TabBar-item.is-error::before {
+  background-color: var(--color-red6);
+}
+
+.DashboardTabSelect {
+  .TabBar-item {
+    a {
+      display: block;
+      margin: calc(0px - var(--gap-m) + 1px) calc(0px - var(--gap-l))
+        calc(0px - var(--gap-m) - 1px);
+      padding: calc(var(--gap-m) - 1px) var(--gap-l) calc(var(--gap-m) + 1px);
+    }
+
+    &.is-error a {
+      margin-right: calc(0px - var(--gap-s) - var(--Icon-size) - var(--gap-l));
+      padding-right: calc(var(--gap-s) + var(--Icon-size) + var(--gap-l));
+      position: relative;
+      z-index: 1;
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+.TC > .TC-unselected {
+  display: none;
+}
+
+.TC[data-tabless='true'] > .TC-unselected {
+  display: block;
+}
+
+.TC-panel {
+  padding: var(--Widget-padding);
+}
+
+// CIG should be full bleed when directly inside TC-panel.
+.TC-panel,
+.TC-panel > form,
+.TC-panel > form > .fixedScrollable {
+  > .CIG {
+    margin: calc(0px - var(--Widget-padding));
+    margin-bottom: 0;
+  }
+
+  > .ActionBar {
+    margin: 0 calc(0px - var(--Widget-padding));
+    padding: var(--Widget-padding);
+  }
+}

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

@@ -0,0 +1,84 @@
+.Taxonomy {
+  display: flex;
+  margin-top: 25px;
+
+  [name='searchAdvancedFull'] & {
+    margin-top: 4%;
+  }
+
+  .watch-button {
+    display: none;
+  }
+
+  .SearchResult-query {
+    margin-right: 0;
+  }
+}
+
+.Taxonomy-column {
+  flex: none;
+  float: left;
+  height: 100%;
+  max-height: calc(100vh - calc(var(--ContentEdit-barHeight) * 6));
+  overflow-y: auto;
+  width: 320px;
+
+  [name='miscSearch'] & {
+    max-height: calc(100vh - calc(var(--ContentEdit-barHeight) * 4));
+  }
+
+  ul {
+    height: auto;
+    min-height: 100%;
+    padding-bottom: calc(var(--gap-l) * 2);
+    width: 100%;
+  }
+
+  li {
+    border-bottom: 1px solid var(--color-gray3);
+    overflow: hidden;
+    padding: 0 calc(var(--gap-m) + var(--gap-s) * 2 + var(--Icon-size)) 0
+      var(--gap-m);
+    position: relative;
+    text-overflow: ellipsis;
+    white-space: normal;
+
+    a:not(.Taxonomy-expand) {
+      display: block;
+      overflow: hidden;
+      padding: var(--gap-s) 0;
+      text-overflow: ellipsis;
+    }
+
+    &.is-selected {
+      background: var(--color-gray2);
+    }
+  }
+
+  .SearchResult-items .queryRestrictions {
+    margin-right: 0;
+  }
+}
+
+.Taxonomy-children {
+  display: flex;
+
+  > div {
+    display: flex;
+  }
+
+  &.loaded {
+    border-left: 1px solid var(--color-gray3);
+  }
+}
+
+.Taxonomy-expand {
+  .IconButton;
+
+  --IconButton-name: 'chevron_right';
+
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}

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

@@ -0,0 +1,41 @@
+.Text.is-xs {
+  --Text-height: var(--lineHeight-xs);
+
+  font-size: var(--fontSize-xs);
+  line-height: var(--lineHeight-xs);
+}
+
+.Text.is-s {
+  --Text-height: var(--lineHeight-s);
+
+  font-size: var(--fontSize-s);
+  line-height: var(--lineHeight-s);
+}
+
+.Text.is-m {
+  --Text-height: var(--lineHeight-m);
+
+  font-size: var(--fontSize-m);
+  line-height: var(--lineHeight-m);
+}
+
+.Text.is-l {
+  --Text-height: var(--lineHeight-l);
+
+  font-size: var(--fontSize-l);
+  line-height: var(--lineHeight-l);
+}
+
+.Text.is-xl {
+  --Text-height: var(--lineHeight-xl);
+
+  font-size: var(--fontSize-xl);
+  line-height: var(--lineHeight-xl);
+}
+
+.Text.is-xxl {
+  --Text-height: var(--lineHeight-xxl);
+
+  font-size: var(--fontSize-xxl);
+  line-height: var(--lineHeight-xxl);
+}

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

@@ -0,0 +1,32 @@
+.TextInput {
+  background: transparent;
+  border-color: var(--Input-borderColor);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 0 0 1px;
+  padding: var(--gap-s) 0 calc(var(--gap-s) - 1px) 0;
+  resize: none;
+  width: 100%;
+
+  &:hover,
+  &:focus {
+    border-color: var(--Input-focusColor);
+  }
+
+  &:focus {
+    background: var(--Input-focusBackground);
+    border-bottom-width: 2px;
+    padding-bottom: calc(var(--gap-s) - 2px);
+  }
+}
+
+input[type='email'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='url'],
+textarea {
+  &:extend(.TextInput all);
+}

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

@@ -0,0 +1,106 @@
+.ThemeBundleEditor-stage {
+  background: var(--color-white);
+  bottom: 0;
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: var(--Page-headerBottom);
+  transform: translateY(100vh);
+  transition: transform 0.3s ease-in-out;
+  z-index: 100;
+}
+
+.ThemeBundleEditor-top {
+  padding-top: var(--gap-xl);
+}
+
+.ThemeBundleEditor-toggle {
+  display: none;
+}
+
+.ThemeBundleEditor-stage-main {
+  display: flex;
+
+  iframe {
+    height: calc(
+      100vh -
+        calc(
+          var(--Page-headerBottom) + (var(--gap-m) * 2) + var(--lineHeight-l)
+        )
+    );
+    width: 100%;
+  }
+}
+
+.ThemeBundleEditor-stage-top {
+  display: flex;
+
+  .ThemeBundleEditor-close {
+    flex-grow: 1;
+  }
+
+  .ThemeBundleEditor-openNewTab {
+    padding-right: var(--gap-l);
+
+    &::before {
+      content: 'open_in_new';
+    }
+  }
+}
+
+.Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
+  display: block;
+
+  .ContentEdit-bottom,
+  .ContentEdit-right {
+    display: none;
+  }
+
+  .ContentEdit-main {
+    height: 100%;
+  }
+
+  .CIG {
+    align-content: flex-start;
+    height: 100%;
+    overflow-y: auto;
+
+    .TabBar-menuItem[data-tab='Styleguide'] {
+      display: none;
+    }
+  }
+
+  [data-tab='Styleguide'] {
+    height: calc(100% - 3 * var(--gap-l));
+
+    & > .StyleguideFrame {
+      height: calc(100% - var(--Text-height) - var(--gap-m) * 2);
+    }
+  }
+}
+
+@media (@mq-m) {
+  .Popup[data-popup-source-class*='ThemeBundle-edit'] .ContentEdit {
+    display: grid;
+    grid-template: 'left toolbar' 1fr ~'/' 1fr var(--ContentEdit-rightWidth) var(--ContentEdit-toolbarWidth);
+  }
+}
+
+@media (@mq-l) {
+  .ThemeBundleEditor-stage {
+    display: block;
+
+    &.is-open {
+      transform: translateY(0);
+    }
+  }
+
+  .ThemeBundleEditor-toggle {
+    display: block;
+  }
+}
+
+.Styleguide .Page.is-inIframe {
+  height: 100%;
+}