@carbon/ibm-products-styles 2.77.0-rc.0 → 2.78.0-rc.0

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -0,0 +1,445 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/type' as *;
+@use './variables';
+
+$row-heights: (
+  xs: 1.5rem,
+  sm: 2rem,
+  md: 2.5rem,
+  lg: 3rem,
+  xl: 4rem,
+);
+
+@each $size, $size-value in $row-heights {
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--text-input,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number
+    input[type='number'],
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{variables.$block-class}__inline-edit--select
+    .#{c4p-settings.$carbon-prefix}--list-box.#{c4p-settings.$carbon-prefix}--dropdown,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--date.#{variables.$block-class}__inline-edit--date-#{$size}
+    .#{c4p-settings.$carbon-prefix}--date-picker__input {
+    block-size: $size-value;
+  }
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number__control-btn::before,
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{c4p-settings.$carbon-prefix}--number__control-btn::after {
+    block-size: calc(#{$size-value} - 0.25rem);
+  }
+  .#{variables.$block-class}
+    .#{variables.$block-class}__inline-edit--outer-cell-button--#{$size}
+    .#{variables.$block-class}__inline-edit--select
+    .#{c4p-settings.$carbon-prefix}--list-box {
+    max-block-size: none;
+  }
+}
+
+@mixin input-outline($color: $focus) {
+  /* stylelint-disable-next-line carbon/theme-use */
+  outline: $spacing-01 solid $color;
+  outline-offset: calc(-1 * #{$spacing-01});
+
+  @media screen and (prefers-contrast) {
+    outline-style: dotted;
+  }
+}
+
+.#{variables.$block-class} {
+  --#{variables.$block-class}--grid-header-height: 0;
+}
+
+.#{variables.$block-class}__inline-edit-cell {
+  display: flex;
+  align-items: center;
+  block-size: 100%;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$pkg-prefix}--inline-edit__after-input-elements {
+  display: flex;
+  align-items: center;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  justify-content: center;
+  block-size: -webkit-fill-available;
+  padding-inline: $spacing-05;
+}
+
+.#{variables.$block-class}__static--outer-cell {
+  display: flex;
+  align-items: center;
+  block-size: -webkit-fill-available;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button {
+  block-size: calc(100% + 2px); // account for borders
+  inline-size: 100%;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  block-size: 100%;
+  color: $text-secondary;
+  cursor: pointer;
+  inline-size: 100%;
+  outline: 0; // handled by active class
+  padding-inline-start: $spacing-05;
+  .#{variables.$block-class}__label-icon {
+    block-size: $spacing-05;
+    padding-inline-end: $spacing-05;
+  }
+  &.#{variables.$block-class}__inline-edit-button--non-edit {
+    cursor: default;
+    padding-inline-start: 0;
+  }
+  .#{variables.$block-class}__inline-edit-button-icon {
+    block-size: $spacing-05;
+    fill: $icon-secondary;
+  }
+  &.#{variables.$block-class}__inline-edit-button--date {
+    @include font-family($name: mono);
+  }
+  &.#{variables.$block-class}__inline-edit-button--selection {
+    justify-content: flex-start;
+  }
+  // Always show renderIcon if inline edit columns are less than half of total columns
+  .#{variables.$block-class}__inline-edit-button-icon {
+    display: none;
+  }
+
+  /* stylelint-disable-next-line */
+  &:hover,
+  &.#{variables.$block-class}__inline-edit-button--active {
+    .#{variables.$block-class}__inline-edit-button-icon {
+      display: block;
+    }
+  }
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button:not(
+    [data-disabled='true']
+  ):hover {
+  background-color: $layer-active;
+  color: $text-primary;
+  .#{variables.$block-class}__inline-edit-button-icon {
+    fill: $icon-primary;
+  }
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active:not(
+    [data-disabled='true']
+  ) {
+  background-color: $layer-active;
+  color: $text-primary;
+  cursor: text;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button.#{variables.$block-class}__inline-edit-button--active {
+  @include input-outline;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button--disabled:not(
+    .#{variables.$block-class}__inline-edit-button--edit-less-than-half-of-total-cols
+  ) {
+  color: $button-disabled;
+  cursor: not-allowed;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button
+  .#{variables.$block-class}__inline-edit-button-label {
+  overflow: hidden;
+  padding-inline-end: $spacing-05;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{variables.$block-class}__inline-edit-button
+  .#{variables.$block-class}__inline-edit-button-label.#{variables.$block-class}__inline-edit-button-label-with-icon {
+  padding-inline-end: $spacing-09;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{c4p-settings.$carbon-prefix}--text-input,
+.#{variables.$block-class}__inline-edit--outer-cell-button
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number'] {
+  block-size: $spacing-09;
+}
+
+.#{variables.$block-class}__inline-edit-button-icon {
+  position: absolute;
+  inset-inline-end: $spacing-05;
+}
+
+.#{variables.$block-class}__table-with-inline-edit.#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__cell-inline-edit {
+  position: relative;
+  padding: 0;
+  .#{variables.$block-class}__inline-edit-button--non-edit {
+    padding-inline-start: $spacing-05;
+  }
+
+  .#{c4p-settings.$carbon-prefix}--number input[type='number'] {
+    min-inline-size: auto;
+    padding-inline-end: $spacing-05;
+  }
+}
+
+.#{variables.$block-class}__inline-edit--select
+  .#{variables.$block-class}__inline-edit--select-item {
+  padding-block-end: $spacing-05;
+  padding-inline-start: $spacing-05;
+}
+
+.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker {
+  inline-size: inherit;
+}
+
+.#{variables.$block-class}__inline-edit--select.#{c4p-settings.$carbon-prefix}--dropdown,
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
+  .#{c4p-settings.$carbon-prefix}--date-picker__input {
+  block-size: $spacing-09; // default row height
+  inline-size: 100%;
+  max-block-size: none;
+}
+
+.#{variables.$block-class}__inline-edit--date
+  .#{c4p-settings.$carbon-prefix}--date-picker-container {
+  inline-size: inherit;
+}
+
+.#{variables.$block-class}__inline-edit--date.#{c4p-settings.$carbon-prefix}--date-picker.#{c4p-settings.$carbon-prefix}--date-picker--single
+  .#{c4p-settings.$carbon-prefix}--date-picker__input {
+  overflow: hidden;
+  inline-size: 100%;
+  max-inline-size: none;
+  padding-inline-end: $spacing-07;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.#{variables.$block-class}
+  .#{c4p-settings.$carbon-prefix}--data-table
+  .#{variables.$block-class}__carbon-row-hover-active
+  td {
+  background-color: $layer-hover;
+  border-block-start-color: $layer-hover;
+}
+
+// Custom border/outline for the focus region area, because of the scrolling
+// containers, using default border caused grid area width to be changed and
+// outlines were not present be
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active::before {
+  position: absolute;
+  z-index: 2;
+  background-color: $link-inverse;
+  block-size: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
+  content: '';
+  inline-size: 2px;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active::after {
+  position: absolute;
+  z-index: 2;
+  background-color: $link-inverse;
+  block-size: calc(
+    100% - 50px - var(--#{variables.$block-class}--grid-header-height)
+  );
+  content: '';
+  inline-size: 2px;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active
+  .#{c4p-settings.$carbon-prefix}--data-table-content::before {
+  position: absolute;
+  z-index: 2;
+  background-color: $link-inverse;
+  block-size: 2px;
+  inline-size: var(--#{variables.$block-class}--grid-width);
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::before,
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active.#{variables.$block-class}__grid-container-active--without-toolbar::after {
+  block-size: calc(
+    100% - 2px - var(--#{variables.$block-class}--grid-header-height)
+  );
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-active
+  .#{variables.$block-class}__table-container {
+  outline: 2px solid $link-inverse;
+  outline-offset: -2px;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__grid-container-inline-edit
+  .#{variables.$block-class}__table-container {
+  padding-block-start: $spacing-01;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  ~ .#{c4p-settings.$carbon-prefix}--form-requirement,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  .#{c4p-settings.$carbon-prefix}--form-requirement {
+  position: absolute;
+  z-index: 3;
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+  margin: 0;
+  background-color: $layer-01;
+  inline-size: 100%;
+  inset-block-start: calc(100% - #{$spacing-01});
+  outline: $spacing-01 solid $support-error;
+  outline-offset: calc(-1 * #{$spacing-01});
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--list-box[data-invalid]:focus-within
+  ~ .#{c4p-settings.$carbon-prefix}--form-requirement {
+  outline: $spacing-01 solid $focus;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--list-box__invalid-icon,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--text-input__invalid-icon,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__invalid {
+  z-index: 4;
+  inset-block-start: calc(100% + #{$spacing-04} + #{$spacing-01});
+  inset-inline-end: $spacing-03;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__invalid {
+  inset-block-start: calc(100% + #{$spacing-02} + #{$spacing-01});
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--form-requirement::before {
+  position: absolute;
+  background-color: $layer-01;
+  block-size: $spacing-01;
+  content: '';
+  inline-size: calc(100% - (#{$spacing-01} * 2));
+  inset-block-start: 0;
+  inset-inline-start: $spacing-01;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--form-requirement::after {
+  position: absolute;
+  background-color: $layer-accent-01;
+  block-size: 1px;
+  content: '';
+  inline-size: calc(100% - (#{$spacing-03} * 2));
+  inset-block-start: $spacing-01;
+  inset-inline-start: $spacing-03;
+}
+
+.#{variables.$block-class} tbody tr:hover {
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+    .#{c4p-settings.$carbon-prefix}--form-requirement::before {
+    background-color: $layer-accent-01;
+  }
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+    .#{c4p-settings.$carbon-prefix}--form-requirement::after {
+    background-color: transparent;
+  }
+}
+
+// Keep input focus states using $support-01 when inline edit cell is invalid
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--text-input:focus,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number']:focus,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number']:focus
+  ~ .#{c4p-settings.$carbon-prefix}--number__controls
+  .#{c4p-settings.$carbon-prefix}--number__control-btn:hover,
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number__control-btn:focus {
+  outline-color: $support-error;
+}
+
+.#{variables.$block-class} .#{c4p-settings.$carbon-prefix}--text-input:focus {
+  background: $field-01;
+}
+
+.#{variables.$block-class}
+  .#{variables.$block-class}__inline-edit--outer-cell-button--invalid
+  .#{c4p-settings.$carbon-prefix}--number
+  input[type='number'][data-invalid]:focus
+  ~ .#{c4p-settings.$carbon-prefix}--number__controls
+  .#{c4p-settings.$carbon-prefix}--number__control-btn.up-icon::after {
+  background-color: $support-error;
+}

package/scss/components/Datagrid/styles/_useNestedRows.scss

@@ -0,0 +1,128 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use '@carbon/styles/scss/motion' as *;
+@use './variables' as *;
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  tr.#{$block-class}__carbon-nested-row {
+  border-inline-start: 1px solid transparent;
+
+  .#{$block-class}__cell {
+    border-block-end: 1px solid $layer-accent-01;
+  }
+}
+
+.#{$block-class} .#{$block-class}__expander-icon {
+  transition: transform $duration-fast-01 motion('standard', 'productive');
+}
+
+.#{$block-class} .#{$block-class}__expander-icon--open {
+  transform: rotate(90deg);
+}
+
+.#{$block-class}__expanded-row
+  .#{$block-class}__carbon-row-expanded
+  td:first-child {
+  border-block-end: none;
+}
+
+.#{$block-class} .#{$block-class}__carbon-row-expandable {
+  position: relative;
+}
+
+.#{$block-class}
+  tr.#{$block-class}__carbon-nested-row
+  + :not(tr.#{$block-class}__carbon-nested-row)::after {
+  position: absolute;
+  background-color: $border-subtle;
+  block-size: 1px;
+  content: '';
+  inline-size: 100%;
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-start: -1px;
+  inset-inline-start: 0;
+}
+
+.#{$block-class} tr.#{$block-class}__carbon-nested-row {
+  td:first-child:empty,
+  .#{$block-class}__expandable-row-cell {
+    border-block-end: none;
+  }
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell {
+  padding-inline-start: $spacing-03;
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell
+  + td,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2),
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__cell:nth-of-type(2)
+  + td {
+  position: relative;
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:not(
+    .#{$block-class}__carbon-row-expandable
+  ):not(.#{$block-class}__carbon-row-expandable--async)
+  td.#{$block-class}__cell:nth-of-type(2)::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row
+  td.#{$block-class}__expandable-row-cell
+  + td::before {
+  position: absolute;
+  background-color: $layer-01;
+  block-size: 1px;
+  content: '';
+  inline-size: 1rem;
+  /* stylelint-disable-next-line carbon/layout-use */
+  inset-block-end: -1px;
+  inset-inline-start: 0;
+  transition: background-color $duration-fast-01 motion(entrance, productive);
+}
+
+.#{c4p-settings.$carbon-prefix}--data-table
+  tr:hover
+  td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__expandable-row--hover
+  td.#{$block-class}__expandable-row-cell
+  + td::before,
+.#{c4p-settings.$carbon-prefix}--data-table
+  .#{$block-class}__carbon-nested-row:hover:not(
+    .#{$block-class}__carbon-row-expandable
+  )
+  td.#{$block-class}__cell:nth-of-type(2)::before {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__carbon-row-expanded {
+  .#{$block-class}__expandable-row-cell {
+    border-block-end: none;
+  }
+}

package/scss/components/Datagrid/styles/_useNestedTable.scss

@@ -0,0 +1,36 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../../global/styles/project-settings' as c4p-settings;
+@use './variables';
+
+// used for tables within a expandable row
+.#{variables.$block-class}__expanded-row
+  .#{c4p-settings.$carbon-prefix}--data-table-container {
+  border-inline-start: 2px solid $background-brand;
+  inline-size: calc(100% - #{$spacing-07});
+  margin-inline-start: $spacing-07;
+  overflow-x: hidden;
+  @supports (overflow-inline: hidden) {
+    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+    overflow-inline: hidden;
+  }
+
+  tr.#{variables.$block-class}__carbon-nested-row {
+    border-inline-start: none;
+  }
+}
+
+.#{variables.$block-class}__expanded-row
+  .#{c4p-settings.$carbon-prefix}--data-table-container
+  th {
+  background-color: $layer-accent-01;
+  border-block-start-color: $layer-accent-01;
+  padding-block: 0;
+}

package/scss/components/Datagrid/styles/_useSelectAllToggle.scss

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2021, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use './variables';
+@use '../../../global/styles/project-settings' as c4p-settings;
+
+.#{variables.$block-class}__grid-container {
+  th.#{variables.$block-class}__select-all-toggle-on,
+  td.#{variables.$block-class}__select-all-toggle-on {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    /* stylelint-disable-next-line declaration-no-important */
+    inline-size: 4.5rem !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    min-inline-size: initial !important;
+  }
+}
+
+th.#{variables.$block-class}__select-all-toggle-on {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+th.#{variables.$block-class}__select-all-toggle-on.button {
+  margin-inline-start: $spacing-01;
+}
+
+.#{variables.$block-class}__select-all-toggle-overflow.#{c4p-settings.$carbon-prefix}--overflow-menu-options--sm.#{c4p-settings.$carbon-prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
+  inline-size: $spacing-13;
+}