@olenbetong/synergi-react 1.0.6 → 2.1.0

package/dist/esm/ob.react.css

@@ -62,12 +62,17 @@
 .ObCheckbox-input:focus {
   outline: none;
 }
-.check_Label {
-  margin-bottom: 0;
-  flex-grow: 1;
+.ObCheckbox-label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  overflow: visible;
 }
-.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label {
-  animation: animOn 800ms 1 forwards;
+.ObCheckbox-root.Ob-reverse .ObCheckbox-label {
+  flex-direction: row-reverse;
+}
+.ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
+  animation: animOn 600ms 1 forwards;
 }
 .ObCheckbox-input:checked:not(:disabled) + .ObCheckbox-label .ObCheckbox-box {
   background: var(--bg-color-selected);
@@ -98,20 +103,19 @@
   }
 }
 
-/* src/ColorCard/index.scss */
+/* src/ColorCard/index.css */
 .ObColorCard-root {
   --bg-color-border: black;
   --bg-color-main: white;
   --bg-size: 0.75rem;
   --card-color: rgb(0, 0, 0);
+  display: flex;
   align-items: stretch;
-  background-image:
-    linear-gradient(
-      to right,
-      hsl(186, 72%, 24%),
-      hsl(186, 72%, 24%) 0.75rem,
-      white 0.75rem,
-      white);
+  min-height: 10rem;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);
+  color: #666;
   background-image:
     linear-gradient(
       to right,
@@ -119,11 +123,6 @@
       var(--bg-color-border) var(--bg-size),
       var(--bg-color-main) var(--bg-size),
       var(--bg-color-main));
-  border-radius: 0.25rem;
-  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.15), 0 1px 6px rgba(0, 0, 0, 0.25);
-  color: #666;
-  cursor: pointer;
-  display: flex;
   font-family:
     "Variable Bahnschrift",
     "Bahnschrift",
@@ -139,34 +138,30 @@
     "Segoe UI Emoji",
     "Segoe UI Symbol";
   font-size: 1rem;
-  min-height: 10rem;
-  overflow: hidden;
   transition: all ease-in-out 300ms;
-}
-.ObColorCard-root:nth-of-type(5n+1) {
-  --bg-color-border: rgb(178, 108, 190);
-}
-.ObColorCard-root:nth-of-type(5n+2) {
-  --bg-color-border: rgb(79, 164, 61);
-}
-.ObColorCard-root:nth-of-type(5n+3) {
-  --bg-color-border: rgb(246, 170, 23);
-}
-.ObColorCard-root:nth-of-type(5n+4) {
-  --bg-color-border: rgb(218, 93, 83);
-}
-.ObColorCard-root:nth-of-type(5n+5) {
-  --bg-color-border: rgb(23, 162, 184);
-}
-.ObColorCard-root:hover,
-.ObColorCard-root:focus {
-  --bg-color-main: #f5f5f5;
-  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);
-  color: #666;
-  text-decoration: none;
-}
-@media screen and (min-width: 48rem) {
-  .ObColorCard-root {
+  cursor: pointer;
+  &:nth-of-type(5n+1) {
+    --bg-color-border: rgb(178, 108, 190);
+  }
+  &:nth-of-type(5n+2) {
+    --bg-color-border: rgb(79, 164, 61);
+  }
+  &:nth-of-type(5n+3) {
+    --bg-color-border: rgb(246, 170, 23);
+  }
+  &:nth-of-type(5n+4) {
+    --bg-color-border: rgb(218, 93, 83);
+  }
+  &:nth-of-type(5n+5) {
+    --bg-color-border: rgb(23, 162, 184);
+  }
+  &:hover,
+  &:focus {
+    --bg-color-main: #f5f5f5;
+    box-shadow: 0 3px 18px rgba(0, 0, 0, 0.15), 0 3px 12px rgba(0, 0, 0, 0.25);
+    text-decoration: none;
+  }
+  @media screen and (min-width: 48rem) {
     font-size: 1.2rem;
   }
 }
@@ -176,122 +171,119 @@
   flex-direction: column;
   justify-content: space-between;
   margin: 1rem 0;
-  overflow: hidden;
   padding: 0.5rem 1.5rem 0.5rem 1rem;
+  overflow: hidden;
   text-overflow: ellipsis;
-}
-.ObColorCard-column:first-child {
-  margin-left: 0.75rem;
-  margin-left: var(--bg-size);
-}
-.ObColorCard-column.ObColorCard-minor {
-  border-right: 1px solid #e3e3e3;
-  flex: 0 0 4rem;
-  transition: margin ease-in-out 300ms;
-}
-@media screen and (min-width: 48rem) {
-  .ObColorCard-column.ObColorCard-minor {
-    flex: 0 0 8rem;
+  &:first-child {
+    margin-left: var(--bg-size, 0.75rem);
+  }
+  &.ObColorCard-minor {
+    flex: 0 0 4rem;
+    border-right: 1px solid #e3e3e3;
+    transition: margin ease-in-out 300ms;
+    @media screen and (min-width: 48rem) {
+      flex: 0 0 8rem;
+    }
   }
 }
 .ObColorCard-detailLabel {
-  color: #ccc;
+  color: #696969;
   font-size: 0.8rem;
   text-transform: uppercase;
 }
-.ObColorCard-detail:not(:last-child) {
-  margin-right: 1.5rem;
-}
-.ObColorCard-detail.ObColorCard-primary,
-.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue {
-  font-size: 1.25rem;
-  font-weight: 300;
-}
-.ObColorCard-detail.ObColorCard-primary .ObColorCard-detailValue {
-  color: unset;
-}
-@media screen and (min-width: 48rem) {
-  .ObColorCard-detail {
+.ObColorCard-detail {
+  &:not(:last-child) {
+    margin-right: 1.5rem;
+  }
+  &.ObColorCard-primary,
+  &.ObColorCard-primary .ObColorCard-detailValue {
+    font-size: 1.25rem;
+    font-weight: 300;
+  }
+  &.ObColorCard-primary .ObColorCard-detailValue {
+    color: unset;
+  }
+  @media screen and (min-width: 48rem) {
     font-size: 1rem;
   }
 }
 .ObColorCard-detailValue {
-  color: #999;
+  color: #555555;
 }
-.ObColorCard-label {
-  position: relative;
-  padding-left: 1.5rem;
+.ObColorCard-stepList {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
-.ObColorCard-label:not(:last-child) {
-  margin-bottom: 1rem;
+.ObColorCard-step {
+  position: relative;
+  text-box-trim: trim-both;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
 }
-.ObColorCard-label:not(:last-child)::after {
+.ObColorCard-step::before {
+  flex: 0.6em 0 0;
   content: "";
-  position: absolute;
-  width: 0.2rem;
-  height: calc(100% + 1rem);
-  border-left: 0.2rem dotted #666;
-  left: 0.25rem;
-  top: 0.5rem;
-  z-index: 0;
-}
-.ObColorCard-label::before {
+  position: relative;
+  top: 0.25em;
+  width: 0.6em;
+  height: 0.6em;
   background: white;
-  border: 0.2rem solid hsl(186, 72%, 24%);
-  border: 0.2rem solid var(--bg-color-border);
+  border: 2px solid var(--bg-color-border, #999);
   border-radius: 50%;
+  box-sizing: border-box;
+  z-index: 1;
+}
+.ObColorCard-step:not(:last-child)::after {
   content: "";
-  display: block;
-  height: 0.75rem;
-  left: 0;
   position: absolute;
-  top: 0.3rem;
-  width: 0.75rem;
-  z-index: 1;
+  top: calc(0.25em + 0.6em + 0.15em);
+  left: calc(0.3em - 1px);
+  height: calc(100% - 0.95em + 1rem + 0.0625em);
+  border-left: 2px dotted #999;
+  z-index: 0;
 }
 
-/* src/DateNavigator/index.scss */
+/* src/DateNavigator/index.css */
+:root {
+  --ob-datenavigator-height: 3rem;
+}
 .ObDateNavigator-icon {
   display: inline-block;
-}
-.ObDateNavigator-icon svg {
-  width: 0.625em;
-  position: relative;
-  top: -1px;
+  svg {
+    width: 0.625em;
+    position: relative;
+    top: -1px;
+  }
 }
 .ObDateNavigator-root {
   background-color: hsl(220, 20%, 96%);
   background-color: var(--block-header-color-bg);
   display: flex;
   font-size: 1rem;
+  outline: none;
+  &:focus-visible {
+    outline: 2px solid var(--brand-dark, #336699);
+    outline-offset: 2px;
+  }
 }
 .ObDateNavigator-arrow {
-  background: none;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  -webkit-appearance: button;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   display: flex;
   align-items: center;
-  flex: 0 0 3rem;
+  flex: 0 0 var(--ob-datenavigator-height);
   justify-content: center;
-  height: 3rem;
+  height: var(--ob-datenavigator-height);
   cursor: pointer;
   text-align: center;
-}
-.ObDateNavigator-arrow::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-.ObDateNavigator-arrow:hover {
-  background-color: #e3e3e3;
-  background-color: var(--block-header-button-hover);
+  &:hover:not(:disabled) {
+    background-color: #e3e3e3;
+    background-color: var(--block-header-button-hover);
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: rgba(0 0 0 / 0.2);
+  }
 }
 .ObDateNavigator-arrowLeft {
   border-right: 1px solid #dddddd;
@@ -307,11 +299,36 @@
   flex-direction: column;
   justify-content: center;
   order: 2;
-  height: 3rem;
+  height: var(--ob-datenavigator-height);
   text-align: center;
 }
+.ObDateNavigator-today {
+  order: 4;
+  padding: 0 1rem;
+  height: var(--ob-datenavigator-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  color: var(--brand-dark, #336699);
+  text-transform: uppercase;
+  cursor: pointer;
+  text-wrap: nowrap;
+  border-left: 1px solid #dddddd;
+  &:hover:not(:disabled) {
+    background-color: var(--block-header-button-hover);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--brand-dark, #336699);
+    outline-offset: 2px;
+  }
+}
 
 /* src/LinkedCardList/index.scss */
+:root {
+  --ob-linked-list-bullet-size: 0.7em;
+  --ob-linked-list-line-width: 0.2em;
+}
 .ObLinkedList-root {
   list-style-type: none;
   margin-left: 0;
@@ -348,9 +365,10 @@
   position: absolute;
   left: 0;
   top: 50%;
-  transform: translate(-0.25em, -50%);
+  transform: translate(calc(-1 * var(--ob-linked-list-bullet-size) / 2 + var(--ob-linked-list-line-width) / 2), -50%);
 }
 .ObLinkedList-card {
+  display: block;
   background: white;
   border: 1px solid;
   border-color: #e5e6e9 #dfe0e4 #d0d1d5;
@@ -509,12 +527,12 @@
       rgba(0, 0, 0, 0.2)),
     linear-gradient(
       left,
-      var(--brand-primary, hsl(186, 72%, 24%)),
-      var(--brand-light, hsl(186, 72%, 37%)));
+      var(--brand-primary),
+      var(--brand-light));
   background-image:
     -webkit-linear-gradient(135deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
     -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-    -webkit-linear-gradient(left, var(--brand-primary), hsl(186, 72%, 24%), var(--brand-light, hsl(186, 72%, 37%)));
+    -webkit-linear-gradient(left, var(--brand-primary), var(--brand-light));
   background-size:
     35px 20px,
     100% 100%,
@@ -606,7 +624,11 @@
   visibility: visible;
 }
 
-/* src/Spinner/index.scss */
+/* src/Spinner/index.css */
+.ObSpinner-wrapper,
+.ObSpinner-fullPage {
+  --bullet-size: 0.5em;
+}
 .ObSpinner-root {
   display: inline-block;
 }
@@ -619,34 +641,34 @@
 }
 .ObSpinner-spinner {
   display: inline-block;
-  height: 0.75em;
+  height: calc(var(--bullet-size) * 1.5);
   position: relative;
-  width: 2.5em;
+  width: calc(var(--bullet-size) * 5);
 }
 .ObSpinner-bullet {
   animation-timing-function: cubic-bezier(0, 1, 1, 0);
   background: #666;
   border-radius: 50%;
-  height: 0.5em;
+  height: var(--bullet-size);
   position: absolute;
   top: 0.2rem;
-  width: 0.5em;
-}
-.ObSpinner-bullet:nth-child(1) {
-  animation: scaleAnimation 0.6s infinite ease-in-out;
-  left: 0.25em;
-}
-.ObSpinner-bullet:nth-child(2) {
-  animation: translateAnimation 0.6s infinite ease-in-out;
-  left: 0.25em;
-}
-.ObSpinner-bullet:nth-child(3) {
-  animation: translateAnimation 0.6s infinite ease-in-out;
-  left: 1.2em;
-}
-.ObSpinner-bullet:nth-child(4) {
-  animation: scaleAnimation 0.6s infinite ease-in-out reverse;
-  left: 2em;
+  width: var(--bullet-size);
+  &:nth-child(1) {
+    animation: scaleAnimation 0.6s infinite ease-in-out;
+    left: calc(var(--bullet-size) * 0.5);
+  }
+  &:nth-child(2) {
+    animation: translateAnimation 0.6s infinite ease-in-out;
+    left: calc(var(--bullet-size) * 0.5);
+  }
+  &:nth-child(3) {
+    animation: translateAnimation 0.6s infinite ease-in-out;
+    left: calc(var(--bullet-size) * 2.4);
+  }
+  &:nth-child(4) {
+    animation: scaleAnimation 0.6s infinite ease-in-out reverse;
+    left: calc(var(--bullet-size) * 4);
+  }
 }
 @keyframes scaleAnimation {
   from {
@@ -661,7 +683,7 @@
     transform: translate(0, 0);
   }
   to {
-    transform: translate(0.825em, 0);
+    transform: translate(calc(var(--bullet-size) * 1.65), 0);
   }
 }
 
@@ -701,45 +723,70 @@
   pointer-events: none;
 }
 
-/* src/ValueToggle/index.scss */
-.ObValueToggle-root {
+/* src/ValueToggleGroup/index.css */
+.ObValueToggleGroup {
+  padding: 0.25rem;
+  border: 2px solid rgb(0 0 0 / 0.2);
+  border-radius: 4px;
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  &.vertical {
+    flex-direction: column;
+    align-items: center;
+    & .ObValueToggleOption {
+      width: 100%;
+      & .ObValueToggleLabel {
+        width: 100%;
+        text-align: center;
+      }
+    }
+  }
+  &:focus-within {
+    border-color: rgb(0 0 0 / 0.8);
+  }
+}
+.ObValueToggleOption {
   display: flex;
   align-items: center;
+  margin: 0;
+  position: relative;
 }
-.ObValueToggle-option {
-  margin-bottom: 0;
+.ObValueToggleOption input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
 }
-.ObValueToggle-label {
-  cursor: pointer;
+.ObValueToggleLabel {
   font-size: 0.8em;
   margin: 0 0.2em;
   padding: 0.3em 0.5em;
   text-transform: uppercase;
+  transition: background 0.2s ease, color 0.2s ease;
+  border-radius: 4px;
 }
-.ObValueToggle-label:hover {
+.ObValueToggleOption:hover input:not(:disabled) + .ObValueToggleLabel {
+  cursor: pointer;
   background: #ccc;
 }
-.ObValueToggle-input:checked + .ObValueToggle-label {
+.ObValueToggleOption input:checked + .ObValueToggleLabel {
   --color-bg: var(--brand-dark);
-  background-color: #666;
   background-color: var(--color-bg);
-  cursor: default;
   color: white;
+  cursor: default;
 }
-.ObValueToggle-input:checked:focus-within + .ObValueToggle-label {
+.ObValueToggleOption input:disabled + .ObValueToggleLabel {
+  color: rgb(0 0 0 / 0.5);
+}
+.ObValueToggleOption input:checked:focus-visible + .ObValueToggleLabel {
   --color-bg: var(--brand-light);
+  outline: 2px solid var(--brand-light);
 }
-.ObValueToggle-input:checked:hover + .ObValueToggle-label {
-  background-color: #666;
+.ObValueToggleOption input:checked:hover + .ObValueToggleLabel {
   background-color: var(--color-bg);
 }
-.ObValueToggle-input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}