<commit_before>@import 'colors';
@import 'typography';
@import 'layers';
@import 'buttons';

// positioning - how much wider/taller should selectors be than components?
$selector-offset: 16px;
// amount of padding between component edges and selector border
$half-selector-offset: $selector-offset / 2;
$icon-size: 18px;
$menu-size: 48px;
$selector-fade-time: 150ms;
$selector-fade-easing: linear;

@keyframes initialFadeInOut {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

// component element needs to be position: relative for the selectors to display
.component-selector-wrapper {
  position: relative;
}

// fade things behind the component
.component-selector:before {
  background: $selector-overlay;
  content: '';
  height: 100vh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity $selector-fade-time $selector-fade-easing;
  top: 0;
  width: 100vw;
  z-index: -1;
}

// selector outlines
.component-selector {
  background: inherit;
  height: 100%;
  left: 0;
  opacity: 0;
  // because we're just setting opacity to show/hide, don't allow child selectors to be clicked
  // note: .selected sets this to `all` so current selectors can be clicked
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity $selector-fade-time $selector-fade-easing;
  width: 100%;
  z-index: -1; // when unselected
  // so clicking into a component will set caret to proper position for inline forms
}

// menus
.component-selector-top,
.component-selector-bottom {
  @include component-toolbar-layer();

  background: $selector-bg;
  border: 1px solid $selector-border;
  height: $menu-size;
  width: 100%;
  right: 0;
  position: fixed;

  @media screen and (hover:hover) {
    min-width: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 200ms linear;
    width: auto;
  }
}

// firefox shim, see below for bug ticket
.kiln-default-hover .component-selector-top,
.kiln-default-hover .component-selector-bottom {
  min-width: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms linear;
  width: auto;
}

// briefly display selectors when selecting the component
.selected > .component-selector > .component-selector-top,
.selected > .component-selector > .component-selector-bottom {
  animation-name: initialFadeInOut;
  animation-duration: 1.2s;
  animation-fill-mode: none;
}

// suppress initialFadeInOut animation if we're currently hovered over an element
// when selecting it
.kiln-suppress-animation.selected > .component-selector > .component-selector-top,
.kiln-suppress-animation.selected > .component-selector > .component-selector-bottom {
  animation: none;
}

// to determine if an element is being hovered at the time it's selected,
// we add an otherwise-unused css rule to that element on :hover
// we have to do this because there's no way to determine mouse position other than
// adding a WHOLE BUNCH of mouse events to the dom, which is gross and nonperformant
.component-selector-wrapper:hover {
  @media screen and (hover:hover) {
    backface-visibility: hidden; // unused style to test if mouse is inside element
  }
}

// firefox shim, see below for bug ticket
.kiln-default-hover .component-selector-wrapper:hover {
  backface-visibility: hidden; // unused style to test if mouse is inside element
}

// show selector menus on hover
// todo: use pointer media query when firefox supports it https://bugzilla.mozilla.org/show_bug.cgi?id=1035774
.component-selector-wrapper:hover > .component-selector > .component-selector-top,
.component-selector-wrapper:hover > .component-selector > .component-selector-bottom {
  @media screen and (hover:hover) {
    opacity: 1;
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-wrapper:hover > .component-selector > .component-selector-top,
.kiln-default-hover .component-selector-wrapper:hover > .component-selector > .component-selector-bottom {
  opacity: 1;
}

.component-selector-top {
  top: 0;

  @media screen and (hover:hover) {
    bottom: calc(100% + #{$half-selector-offset});
    top: auto;
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-top {
  bottom: calc(100% + #{$half-selector-offset});
  top: auto;
}

.component-selector-bottom {
  top: calc(100% - 96px); // account for toolbar

  @media screen and (hover:hover) {
    top: calc(100% + #{$half-selector-offset});
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-bottom {
  top: calc(100% + #{$half-selector-offset});
}

// all menus use flex to align their buttons
.component-selector-top,
.component-selector-bottom,
.selected-info,
.selector-location,
.selected-actions,
.selector-navigation {
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}

// smaller menu areas need to flex
.selected-info {
  flex: 1 0 auto;
}

.selector-location {
  flex: 0 0 auto;
  margin-left: 14px;
}

.selected-actions {
  flex: 0 0 auto;
}

.selector-navigation {
  flex: 1 0 auto;
}

// component location
.selector-location svg {
  fill: $selector-icon;
  height: 11px;
  margin: 0;
  width: 11px;

  * {
    // fill for paths and groups inside the icons
    fill: $selector-icon;
  }
}

// multi-page / single-page toggle
.selector-this-page {
  display: none;
}

.selector-many-pages {
  display: flex;
}

.kiln-page-area .selector-this-page {
  display: flex;
}

.kiln-page-area .selector-many-pages {
  display: none;
}

// component label
.selected-label {
  @include label();

  color: $selector-text;
  flex: 1 0 auto;
  font-size: 14px;
  line-height: $icon-size; // same vertical space as the icons
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

// bottom add/replace button should have border
.selected-add,
.selected-replace {
  border-left: 1px solid $selector-border;
}

// selected component
.component-selector-wrapper.selected > .component-selector {
  // show selector
  opacity: 1;
  pointer-events: all;

  // fade other components
  &:before {
    opacity: 1;
  }
}

// z-index setting
// needs to be:
// 1. selected component (to appear above its siblings)
// 2. components inside selected component (so you can click into them)
.component-selector-wrapper.selected {
  z-index: 1 !important;
}

// selected component: components inside the selected component ALSO needs a higher z-index
// so we can click into them when the parent is selected
.component-selector-wrapper.selected [data-uri] {
  z-index: 2;
}

// all editable elements should have some kind of ux showing they can be edited
[data-editable] {
  cursor: pointer;
}

// inner component lists should always be flexed
// (this will display properly if their parents are either flexed OR box)
.component-list-inner {
  display: inherit;
  flex-direction: inherit;
  flex-wrap: inherit;
  flex: 1 1 100%;
}
<commit_msg>Only change mouse cursor to pointer when in edit mode (#711)<commit_after>@import 'colors';
@import 'typography';
@import 'layers';
@import 'buttons';

// positioning - how much wider/taller should selectors be than components?
$selector-offset: 16px;
// amount of padding between component edges and selector border
$half-selector-offset: $selector-offset / 2;
$icon-size: 18px;
$menu-size: 48px;
$selector-fade-time: 150ms;
$selector-fade-easing: linear;

@keyframes initialFadeInOut {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

// component element needs to be position: relative for the selectors to display
.component-selector-wrapper {
  position: relative;
}

// fade things behind the component
.component-selector:before {
  background: $selector-overlay;
  content: '';
  height: 100vh;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity $selector-fade-time $selector-fade-easing;
  top: 0;
  width: 100vw;
  z-index: -1;
}

// selector outlines
.component-selector {
  background: inherit;
  height: 100%;
  left: 0;
  opacity: 0;
  // because we're just setting opacity to show/hide, don't allow child selectors to be clicked
  // note: .selected sets this to `all` so current selectors can be clicked
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity $selector-fade-time $selector-fade-easing;
  width: 100%;
  z-index: -1; // when unselected
  // so clicking into a component will set caret to proper position for inline forms
}

// menus
.component-selector-top,
.component-selector-bottom {
  @include component-toolbar-layer();

  background: $selector-bg;
  border: 1px solid $selector-border;
  height: $menu-size;
  width: 100%;
  right: 0;
  position: fixed;

  @media screen and (hover:hover) {
    min-width: 100%;
    opacity: 0;
    position: absolute;
    transition: opacity 200ms linear;
    width: auto;
  }
}

// firefox shim, see below for bug ticket
.kiln-default-hover .component-selector-top,
.kiln-default-hover .component-selector-bottom {
  min-width: 100%;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms linear;
  width: auto;
}

// briefly display selectors when selecting the component
.selected > .component-selector > .component-selector-top,
.selected > .component-selector > .component-selector-bottom {
  animation-name: initialFadeInOut;
  animation-duration: 1.2s;
  animation-fill-mode: none;
}

// suppress initialFadeInOut animation if we're currently hovered over an element
// when selecting it
.kiln-suppress-animation.selected > .component-selector > .component-selector-top,
.kiln-suppress-animation.selected > .component-selector > .component-selector-bottom {
  animation: none;
}

// to determine if an element is being hovered at the time it's selected,
// we add an otherwise-unused css rule to that element on :hover
// we have to do this because there's no way to determine mouse position other than
// adding a WHOLE BUNCH of mouse events to the dom, which is gross and nonperformant
.component-selector-wrapper:hover {
  @media screen and (hover:hover) {
    backface-visibility: hidden; // unused style to test if mouse is inside element
  }
}

// firefox shim, see below for bug ticket
.kiln-default-hover .component-selector-wrapper:hover {
  backface-visibility: hidden; // unused style to test if mouse is inside element
}

// show selector menus on hover
// todo: use pointer media query when firefox supports it https://bugzilla.mozilla.org/show_bug.cgi?id=1035774
.component-selector-wrapper:hover > .component-selector > .component-selector-top,
.component-selector-wrapper:hover > .component-selector > .component-selector-bottom {
  @media screen and (hover:hover) {
    opacity: 1;
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-wrapper:hover > .component-selector > .component-selector-top,
.kiln-default-hover .component-selector-wrapper:hover > .component-selector > .component-selector-bottom {
  opacity: 1;
}

.component-selector-top {
  top: 0;

  @media screen and (hover:hover) {
    bottom: calc(100% + #{$half-selector-offset});
    top: auto;
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-top {
  bottom: calc(100% + #{$half-selector-offset});
  top: auto;
}

.component-selector-bottom {
  top: calc(100% - 96px); // account for toolbar

  @media screen and (hover:hover) {
    top: calc(100% + #{$half-selector-offset});
  }
}

// firefox shim, see above for bug ticket
.kiln-default-hover .component-selector-bottom {
  top: calc(100% + #{$half-selector-offset});
}

// all menus use flex to align their buttons
.component-selector-top,
.component-selector-bottom,
.selected-info,
.selector-location,
.selected-actions,
.selector-navigation {
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}

// smaller menu areas need to flex
.selected-info {
  flex: 1 0 auto;
}

.selector-location {
  flex: 0 0 auto;
  margin-left: 14px;
}

.selected-actions {
  flex: 0 0 auto;
}

.selector-navigation {
  flex: 1 0 auto;
}

// component location
.selector-location svg {
  fill: $selector-icon;
  height: 11px;
  margin: 0;
  width: 11px;

  * {
    // fill for paths and groups inside the icons
    fill: $selector-icon;
  }
}

// multi-page / single-page toggle
.selector-this-page {
  display: none;
}

.selector-many-pages {
  display: flex;
}

.kiln-page-area .selector-this-page {
  display: flex;
}

.kiln-page-area .selector-many-pages {
  display: none;
}

// component label
.selected-label {
  @include label();

  color: $selector-text;
  flex: 1 0 auto;
  font-size: 14px;
  line-height: $icon-size; // same vertical space as the icons
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

// bottom add/replace button should have border
.selected-add,
.selected-replace {
  border-left: 1px solid $selector-border;
}

// selected component
.component-selector-wrapper.selected > .component-selector {
  // show selector
  opacity: 1;
  pointer-events: all;

  // fade other components
  &:before {
    opacity: 1;
  }
}

// z-index setting
// needs to be:
// 1. selected component (to appear above its siblings)
// 2. components inside selected component (so you can click into them)
.component-selector-wrapper.selected {
  z-index: 1 !important;
}

// selected component: components inside the selected component ALSO needs a higher z-index
// so we can click into them when the parent is selected
.component-selector-wrapper.selected [data-uri] {
  z-index: 2;
}

// all editable elements should have some kind of ux showing they can be edited
.component-selector-wrapper *[data-editable] {
  cursor: pointer;
}

// inner component lists should always be flexed
// (this will display properly if their parents are either flexed OR box)
.component-list-inner {
  display: inherit;
  flex-direction: inherit;
  flex-wrap: inherit;
  flex: 1 1 100%;
}

{'fraction_non_alphanumeric': 0.12197045747884698, 'fraction_numerical': 0.017711171662125342, 'mean_word_length': 3.553379040156709, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 37, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '225051', 'n_tokens_mistral': 4623, 'n_tokens_neox': 4331, 'n_words': 1399}