@brightspot/ui 3.0.1 → 5.0.0

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

@@ -0,0 +1,209 @@
+.Guide {
+  display: grid;
+  grid-template:
+    'title' calc(var(--gap-m) * 2 + var(--Text-height))
+    'guide' auto ~'/'
+    1fr;
+  height: 100%;
+  padding: 0;
+
+  > .Guide-content {
+    grid-area: guide;
+    overflow: auto;
+  }
+}
+
+.Guide-title {
+  .Widget-title;
+
+  grid-area: title;
+  padding-right: calc(var(--gap-s) * 4 + var(--Icon-size) * 2 + var(--gap-l));
+}
+
+.Guide-controls {
+  align-items: center;
+  display: flex;
+  height: calc(var(--gap-m) * 2 + var(--Text-height));
+  position: absolute;
+  right: calc(var(--gap-l) - var(--gap-s));
+  top: 0;
+}
+
+.Guide-edit {
+  .IconButton;
+
+  --IconButton-name: 'edit';
+}
+
+.Guide-close {
+  .IconButton;
+
+  --IconButton-name: 'close';
+}
+
+.Guide-content {
+  padding: 0 var(--gap-l) calc(var(--gap-xl) + var(--gap-l)) var(--gap-l);
+}
+
+.Guide-description,
+.Guide-fieldDescription {
+  b {
+    font-weight: bold;
+  }
+
+  i {
+    font-style: italic;
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  ol,
+  ul {
+    list-style-type: revert;
+    margin: var(--Text-height) 0 var(--Text-height) var(--Text-height);
+  }
+
+  u {
+    text-decoration: underline;
+  }
+
+  .cms-textAlign-center {
+    text-align: center;
+  }
+
+  .cms-textAlign-right {
+    text-align: right;
+  }
+}
+
+.Guide-description {
+  padding-top: var(--gap-xl);
+}
+
+.Guide-tabCluster {
+  .Text.is-s;
+
+  background: var(--color-gray1);
+  font-weight: bold;
+  margin: var(--gap-xl) calc(0px - var(--gap-l)) 0 calc(0px - var(--gap-l));
+  padding: var(--gap-s) var(--gap-l);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  &.is-widget {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .Guide-content > &:first-child {
+    margin-top: 0;
+  }
+}
+
+.Guide-image {
+  display: block;
+  margin: var(--Text-height) 0;
+
+  > img {
+    display: block;
+  }
+}
+
+.Guide-field {
+  padding-top: var(--gap-xl);
+  position: relative;
+  z-index: 0;
+
+  > form {
+    width: calc(100% - var(--gap-s) * 3 - var(--Icon-size));
+  }
+
+  &.is-focus::before {
+    background: var(--color-dominant1);
+    bottom: calc(0px - var(--gap-xl) / 2);
+    content: '';
+    left: calc(0px - var(--gap-l) / 2);
+    position: absolute;
+    right: calc(0px - var(--gap-l) / 2);
+    top: calc(var(--gap-xl) / 2);
+    z-index: -1;
+  }
+}
+
+.Guide-fieldName {
+  .Text.is-s;
+
+  font-weight: bold;
+  margin-bottom: var(--gap-s);
+}
+
+.Guide-embedded {
+  padding-left: var(--gap-l);
+  position: relative;
+
+  &:not(:empty)::before {
+    border-color: var(--Input-borderColor);
+    border-style: solid;
+    border-width: 0 0 1px 1px;
+    bottom: calc(var(--gap-l) / 2);
+    content: '';
+    left: 0;
+    position: absolute;
+    top: calc(var(--gap-l) / 2);
+    width: calc(var(--gap-l) / 2);
+  }
+
+  > .Guide-edit {
+    position: absolute;
+    right: 0;
+    top: calc(0px - var(--gap-s) * 2 - var(--Icon-size));
+  }
+
+  > .Guide-content {
+    padding: 0;
+  }
+
+  .Guide-tabCluster {
+    display: none;
+  }
+}
+
+// Production Guide edit page does not need "Delete Permanently" button
+.Popup[name='edit-guide'] .ActionBar > button[name='action-delete'] {
+  display: none;
+}
+
+.frame[name='guideField'] {
+  padding: 0;
+
+  .Guide-field {
+    padding: var(--gap-l);
+  }
+
+  a.Guide-editField {
+    position: absolute;
+    right: calc(var(--gap-s) * 4 + var(--Icon-size));
+    top: var(--gap-xs);
+  }
+}
+
+div.Popup {
+  &[data-subject-type='true'] a.CIG-guide {
+    display: block;
+  }
+
+  a.CIG-guide {
+    display: none;
+  }
+}
+
+div[name='edit-guide'] {
+  ~ div.Popup a.CIG-guide,
+  a.CIG-guide {
+    display: none;
+  }
+}

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

@@ -0,0 +1,108 @@
+.GuideField {
+  th {
+    width: 25%;
+  }
+
+  .CIG-label {
+    margin-bottom: var(--gap-l);
+  }
+
+  &-editorialNote {
+    margin: 8px 16px 32px;
+    overflow: auto;
+
+    &.is-empty {
+      margin: 12px 0 32px;
+    }
+
+    b {
+      font-weight: bold;
+    }
+
+    i {
+      font-style: italic;
+    }
+
+    u {
+      text-decoration: underline;
+    }
+
+    s {
+      text-decoration: line-through;
+    }
+
+    ul {
+      list-style-type: disc;
+      padding: 0 0 0 30px;
+    }
+
+    ul ul {
+      list-style-type: circle;
+    }
+
+    ul ul ul {
+      list-style-type: square;
+    }
+
+    ol {
+      list-style-type: decimal;
+      padding: 0 0 0 30px;
+    }
+
+    ol ol {
+      list-style-type: lower-alpha;
+    }
+
+    .cms-textAlign-left {
+      text-align: left;
+    }
+
+    .cms-textAlign-center {
+      text-align: center;
+    }
+
+    .cms-textAlign-right {
+      text-align: right;
+    }
+
+    img {
+      display: block;
+      float: left;
+      margin: 16px 16px 16px 0;
+      width: 50%;
+    }
+
+    img[data-align-center] {
+      float: none;
+      margin: 16px auto;
+    }
+
+    img[data-align-right] {
+      float: right;
+      margin: 16px 0 16px 16px;
+    }
+  }
+}
+
+.ProseMirror {
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  bsp-guide-field-link {
+    color: var(--Link-color);
+  }
+
+  /* stylelint-disable-next-line selector-type-no-unknown */
+  bsp-guide-field-link:hover {
+    color: var(--Link-hoverColor);
+    text-decoration: var(--Link-hoverDecoration, underline);
+  }
+}
+
+/* Hides GuideField links and the "New", "Copy", and "Edit In Full" gear menu options in GuideFieldEditorialNote edit page */
+[data-type='com.psddev.cms.tool.GuideFieldEditorialNote']
+  a[target='guideField'],
+[data-popup-source-class~='GuideFieldEditorialNote-edit'] a.action-create,
+[data-popup-source-class~='GuideFieldEditorialNote-edit'] a.action-copy,
+[data-popup-source-class~='GuideFieldEditorialNote-edit']
+  a.widgetControlsEditInFull {
+  display: none;
+}

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

@@ -0,0 +1,89 @@
+.Hierarchy {
+  display: flex;
+
+  [name='searchAdvancedFull'] & {
+    margin-top: 4%;
+  }
+
+  .watch-button {
+    display: none;
+  }
+
+  .SearchResult-query {
+    margin-right: 0;
+  }
+}
+
+.Hierarchy-column {
+  flex: none;
+  float: left;
+  height: 100%;
+  max-height: calc(120vh - calc(var(--ContentEdit-barHeight) * 6));
+  overflow-y: auto;
+  width: 320px;
+
+  [name='miscSearch'] & {
+    max-height: calc(120vh - calc(var(--ContentEdit-barHeight) * 4));
+  }
+
+  a[data-mismatch-hierarchy-type] {
+    cursor: none;
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  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(.Hierarchy-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;
+  }
+}
+
+.Hierarchy-children {
+  display: flex;
+
+  &.loaded {
+    border-left: 1px solid var(--color-gray3);
+  }
+}
+
+.Hierarchy-expand {
+  .IconButton;
+
+  --IconButton-name: 'chevron_right';
+
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.Hierarchy-moreElements {
+  display: none;
+}

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

@@ -0,0 +1,5 @@
+.Highlight {
+  background-color: var(--color-gray2);
+  border-radius: 2px;
+  padding: 0 var(--gap-xs);
+}

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

@@ -0,0 +1,53 @@
+.Icon {
+  --Icon-fill: 'FILL' 1;
+
+  direction: ltr;
+  display: inline-block;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+  font-family: 'Material Symbols Outlined';
+  font-feature-settings: 'liga';
+  font-size: var(--Icon-size);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-style: normal;
+  font-variation-settings: var(--Icon-fill);
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  position: relative;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  top: calc((var(--Text-height) - var(--Icon-size)) / 2);
+  transform: var(--Icon-transform);
+  vertical-align: top;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.Icon.is-s {
+  --Icon-size: var(--iconSize-s);
+}
+
+.Icon.is-m {
+  --Icon-size: var(--iconSize-m);
+}
+
+.Icon.is-l {
+  --Icon-size: var(--iconSize-l);
+}
+
+.Icon.is-xl {
+  --Icon-size: var(--iconSize-xl);
+}
+
+[data-icon-mode='rotate90'] {
+  --Icon-transform: rotate(90deg);
+}
+
+[data-icon-mode='rotate180'] {
+  --Icon-transform: rotate(180deg);
+}
+
+[data-icon-mode='rotate270'] {
+  --Icon-transform: rotate(270deg);
+}

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

@@ -0,0 +1,111 @@
+@import (reference) './Icon.less';
+@import (reference) './Link.less';
+
+.IconButton {
+  --Link-color: var(--color-black);
+  --Link-hoverColor: var(--color-dominant5);
+  --Link-hoverDecoration: none;
+
+  color: var(--Link-color);
+  cursor: pointer;
+  display: inline-block;
+  height: calc(var(--gap-s) * 2 + var(--Icon-size));
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+  width: calc(var(--gap-s) * 2 + var(--Icon-size));
+
+  button& {
+    background: transparent;
+    border: 0;
+    padding: 0;
+  }
+
+  &::before {
+    .Icon;
+
+    content: var(--IconButton-name, attr(data-icon-button-name));
+    height: var(--Icon-size);
+    padding: var(--gap-s) 100px 100px var(--gap-s);
+    top: 0;
+    width: var(--Icon-size);
+  }
+
+  &::after {
+    background: var(--Link-color);
+    border-radius: calc(var(--gap-s) + var(--Icon-size) / 2);
+    content: '';
+    height: 100%;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transform: scale(0);
+    transition:
+      opacity var(--time-xs) var(--ease-in),
+      transform var(--time-s) var(--ease-out);
+    width: 100%;
+  }
+}
+
+.IconButton.is-focus {
+  &::before {
+    color: var(--Link-hoverColor);
+    position: relative;
+    z-index: 10;
+  }
+
+  &::after {
+    opacity: 0.08;
+    transform: none;
+  }
+}
+
+.IconButton.is-pin {
+  --IconButton-name: 'push_pin';
+
+  color: var(--color-black);
+}
+
+.IconButton.is-disabled {
+  color: var(--color-gray5);
+}
+
+.IconButton.is-red {
+  .Link.is-red;
+}
+
+.IconButton.is-white {
+  .Link.is-white;
+}
+
+.IconButton.is-black {
+  .Link.is-black;
+}
+
+.IconButton {
+  &:hover,
+  &:focus {
+    .IconButton.is-focus;
+  }
+}
+
+.IconButton.no-Fill {
+  --Button-size: calc(var(--gap-s) * 2 + var(--Text-height));
+
+  line-height: var(--Button-size);
+
+  &::before {
+    .Icon;
+
+    border: 1px solid currentColor;
+    border-radius: 50%;
+    content: var(--IconButton-name);
+    display: inline-block;
+    height: var(--Button-size);
+    margin-right: var(--gap-s);
+    padding: calc((var(--Button-size) - var(--Icon-size)) / 2 - 1px);
+    top: unset;
+    width: var(--Button-size);
+  }
+}