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

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

@@ -1,209 +0,0 @@
-.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

@@ -1,108 +0,0 @@
-.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

@@ -1,89 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-.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

@@ -1,111 +0,0 @@
-@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);
-  }
-}