@fkui/design 6.17.0 → 6.18.1

package/lib/fkui.css

@@ -4268,7 +4268,6 @@ input[type=search]:focus,
   background-color: var(--fkds-color-feedback-background-negative, #fcf3f3);
   border-radius: var(--f-border-radius-small, 2px);
   border-left: 1rem solid var(--fkds-color-feedback-border-negative, #ca1515);
-  padding: 1.5rem;
 }
 .offline .offline__icon {
   font-size: 0;
@@ -4297,6 +4296,9 @@ input[type=search]:focus,
 .offline .iflex__item > p {
   margin-bottom: 0;
 }
+.offline {
+  padding: 1.5rem;
+}
 .offline__wrapper {
   position: fixed;
   position: sticky;
@@ -4903,16 +4905,6 @@ input[type=search]:focus,
   box-shadow: none;
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
   padding: calc(var(--f-button-tertiary-padding-top, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-right, 0.5rem) calc(var(--f-button-tertiary-padding-bottom, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-left, 0.5rem);
-  font-weight: var(--f-font-weight-medium, 700);
-  outline-offset: 0.25rem;
-  font-size: 14px;
-  line-height: 1.25rem;
-  min-width: 24px;
-  padding: calc(0.375rem * var(--f-density-factor, 1)) 0.25rem;
-  text-underline-offset: 3.5px;
-  margin: var(--f-button-tertiary-table-column-action-margin, 0 0 0 0.5rem);
-  width: -moz-max-content;
-  width: max-content;
 }
 .table__button:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
@@ -4933,6 +4925,18 @@ input[type=search]:focus,
   border-color: transparent;
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
+.table__button {
+  font-weight: var(--f-font-weight-medium, 700);
+  outline-offset: 0.25rem;
+  font-size: 14px;
+  line-height: 1.25rem;
+  min-width: 24px;
+  padding: calc(0.375rem * var(--f-density-factor, 1)) 0.25rem;
+  text-underline-offset: 3.5px;
+  margin: var(--f-button-tertiary-table-column-action-margin, 0 0 0 0.5rem);
+  width: -moz-max-content;
+  width: max-content;
+}
 .table__button .button__icon {
   margin: var(--f-button-tertiary-table-column-action-icon-margin, 0 2px 0 2px);
   transform: translate(0, 10%);
@@ -4940,6 +4944,176 @@ input[type=search]:focus,
   width: 14px;
 }
 
+.table-ng {
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--f-font-size-standard, 1rem);
+  margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
+  width: 100%;
+}
+.table-ng caption {
+  background: transparent;
+  color: var(--f-text-color-default, #1b1e23);
+  font-size: var(--f-font-size-standard, 1rem);
+  font-weight: var(--f-font-weight-medium, 700);
+  line-height: var(--f-line-height-large, 1.5);
+  margin-bottom: calc(0.25rem * var(--f-density-factor, 1));
+  width: var(--f-width-full, 100%);
+  text-align: left;
+}
+.table-ng thead th {
+  background: var(--f-background-grid-header, #f4f4f4);
+  border-bottom: 2px solid var(--f-border-color-grid-header, #8d8e91);
+  border-right: 1px solid var(--f-border-color-grid, #8d8e91);
+  color: var(--f-text-color-default, #1b1e23);
+  font-weight: var(--f-font-weight-medium, 700);
+  line-height: var(--f-line-height-large, 1.5);
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  text-align: left;
+  vertical-align: top;
+}
+.table-ng thead th:last-child {
+  border-right: none;
+}
+.table-ng tbody .table-ng__row {
+  background: var(--f-background-grid-default, #ffffff);
+  color: var(--f-text-color-default, #1b1e23);
+}
+.table-ng tbody .table-ng__row--empty {
+  text-align: center;
+}
+.table-ng--striped tbody .table-ng__row:nth-child(even) {
+  background: var(--f-background-grid-striped, #f4f4f4);
+  color: var(--f-text-color-default, #1b1e23);
+}
+
+.table-ng__cell {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  text-wrap: nowrap;
+  border: 2px solid transparent;
+}
+.table-ng__cell:focus, .table-ng__cell:focus-within {
+  box-shadow: none;
+  border: 2px solid var(--f-color-focus, #1b1e23);
+}
+.table-ng__cell input:focus,
+.table-ng__cell button:focus,
+.table-ng__cell a:focus,
+.table-ng__cell [role=combobox]:focus {
+  box-shadow: none;
+}
+.table-ng__cell--select, .table-ng__cell--text {
+  padding: 0 0.25rem;
+}
+.table-ng__cell--select:focus-visible .table-ng__editable__icon, .table-ng__cell--text:focus-visible .table-ng__editable__icon {
+  visibility: visible;
+}
+.table-ng__cell--text:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.table-ng__cell--text.table-ng__cell--error:not(:focus-within) .table-ng__editable__icon {
+  visibility: visible;
+}
+.table-ng__cell--text .table-ng__editable {
+  border-width: 2px;
+  border-style: solid;
+  border-color: transparent;
+}
+.table-ng__cell--text .table-ng__editable:focus-within .table-ng__editable__text {
+  display: none;
+}
+.table-ng__cell--text .table-ng__editable:focus-within .table-ng__textedit {
+  flex: 1 0 auto;
+}
+.table-ng__cell--checkbox, .table-ng__cell--radio {
+  text-align: center;
+  padding: calc(0.25rem * var(--f-density-factor, 1));
+}
+.table-ng__cell--checkbox input, .table-ng__cell--radio input {
+  height: var(--f-icon-size-medium, 1.25rem);
+  width: var(--f-icon-size-medium, 1.25rem);
+}
+.table-ng__cell--button button {
+  background: inherit;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  min-width: var(--f-icon-size-medium, 1.25rem);
+  padding: 0;
+  width: 100%;
+}
+
+.table-ng__textedit {
+  flex: 0 1 0;
+  width: 0;
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+.table-ng__textedit:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.table-ng__editable {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  display: flex;
+  align-items: center;
+}
+.table-ng__editable:hover:not(:focus-within) .table-ng__editable__icon {
+  visibility: visible;
+}
+.table-ng__editable__text {
+  flex: 1 1 auto;
+}
+.table-ng__editable__icon {
+  visibility: hidden;
+  margin-left: 1rem;
+  flex: none;
+}
+
+.table-ng__cell--select:hover .table-ng__editable, .table-ng__cell--text:hover .table-ng__editable {
+  background: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
+}
+
+.table-ng__cell--text.table-ng__cell--error:not(:focus-within) .table-ng__editable, .table-ng__cell--text.table-ng__cell--error:hover:not(:focus-within) .table-ng__editable, .table-ng__cell--text.table-ng__cell--error:focus .table-ng__editable {
+  color: var(--fkds-color-feedback-text-negative, #ca1515);
+  border-bottom-color: var(--fkds-color-feedback-text-negative, #ca1515);
+}
+
+.table-ng__column {
+  padding: calc(0.25rem * var(--f-density-factor, 1)) 0.5rem;
+  border-bottom: 2px solid transparent;
+  border-right: 1px solid transparent;
+}
+.table-ng__column:focus, .table-ng__column:focus-within {
+  box-shadow: none;
+  border-bottom: 2px solid var(--f-color-focus, #1b1e23);
+  border-right: 1px solid var(--f-color-focus, #1b1e23);
+}
+.table-ng__column--checkbox {
+  text-align: center;
+  padding: calc(0.25rem * var(--f-density-factor, 1));
+}
+.table-ng__column--checkbox input {
+  height: var(--f-icon-size-medium, 1.25rem);
+  width: var(--f-icon-size-medium, 1.25rem);
+}
+.table-ng__column__sort-icon {
+  color: var(--f-icon-color-table-header, #1b1e23);
+  height: var(--f-icon-size-x-small, 0.75rem);
+  width: var(--f-icon-size-x-small, 0.75rem);
+  min-width: var(--f-icon-size-x-small, 0.75rem);
+}
+.table-ng__column__sort-icon--discrete {
+  color: var(--f-icon-color-table-header-discrete, #8d8e91);
+}
+
+.pager {
+  border-bottom: 1px solid var(--f-border-color-grid, #8d8e91);
+}
+
 .text-field {
   display: flex;
   flex-direction: column;
@@ -4947,7 +5121,6 @@ input[type=search]:focus,
   margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
   position: relative;
   width: var(--f-width-full, 100%);
-  /* stylelint-disable property-no-vendor-prefix */
 }
 @media (min-width: 640px) {
   .text-field--inline {
@@ -5042,6 +5215,9 @@ input[type=search]:focus,
   height: var(--f-icon-size-x-small, 0.75rem);
   width: var(--f-icon-size-x-small, 0.75rem);
 }
+.text-field {
+  /* stylelint-disable property-no-vendor-prefix */
+}
 .text-field input[type=search]::-webkit-search-decoration,
 .text-field input[type=search]::-webkit-search-cancel-button,
 .text-field input[type=search]::-webkit-search-results-button,