smart-webcomponents-react 19.0.0 → 19.0.5

package/source/styles/default/smart.switchbutton.css

@@ -1,294 +1,294 @@
-/* smart-switch-button */
-smart-switch-button {
-  width: var(--smart-switch-button-default-width);
-  height: var(--smart-switch-button-default-height);
-}
-smart-switch-button[orientation=vertical] {
-  height: var(--smart-switch-button-default-width);
-  width: var(--smart-switch-button-default-height);
-}
-smart-switch-button.smart-element {
-  display: inline-block;
-  border: none;
-  background: none;
-  overflow: visible;
-}
-
-.smart-switch-button .smart-thumb {
-  border: var(--smart-border-width) solid var(--smart-border);
-  border-radius: 100%;
-  width: var(--smart-switch-button-thumb-size);
-  height: var(--smart-switch-button-thumb-size);
-  background-color: var(--smart-surface);
-  box-shadow: var(--smart-elevation-2);
-  align-self: center;
-  position: relative;
-  cursor: pointer;
-  order: 2;
-  pointer-events: all;
-}
-.smart-switch-button .smart-thumb:before {
-  background-color: var(--smart-primary);
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  left: 50%;
-  top: 50%;
-  transition: 0.2s;
-  display: block;
-  border-radius: 100%;
-  content: "";
-  transform: scale(0) translate(-50%, -50%);
-  transform-origin: left top;
-  opacity: 0.2;
-}
-.smart-switch-button .smart-thumb:active:before {
-  animation: button-wave-effect 0.1s ease-in;
-  transform: scale(1) translate(-50%, -50%);
-}
-.smart-switch-button .smart-container {
-  font-size: inherit;
-  position: relative;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  touch-action: none;
-}
-.smart-switch-button .smart-container:before {
-  content: "";
-  position: absolute;
-  width: 90%;
-  height: 50%;
-  left: 5%;
-  top: 25%;
-  border-radius: 10px;
-  background-color: var(--smart-surface);
-}
-.smart-switch-button .smart-inner-container {
-  width: calc(200% - var(--smart-switch-button-thumb-size));
-  height: 100%;
-  position: absolute;
-  color: inherit;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  pointer-events: none;
-  left: 0;
-}
-.smart-switch-button .smart-true-content,
-.smart-switch-button .smart-false-content {
-  font-size: inherit;
-  font-weight: inherit;
-  display: inline-block;
-  text-align: center;
-  box-sizing: border-box;
-  color: inherit;
-}
-.smart-switch-button .smart-true-content-container,
-.smart-switch-button .smart-false-content-container {
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-clip: content-box;
-  padding: 2px 0px 2px 0px;
-  color: inherit;
-  overflow: hidden;
-  order: 1;
-  width: calc((100% - var(--smart-switch-button-thumb-size)) / 2);
-}
-.smart-switch-button .smart-true-content-container {
-  order: 1;
-}
-.smart-switch-button .smart-false-content-container {
-  order: 3;
-}
-.smart-switch-button:not([animation=none]) .smart-container:before {
-  transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
-}
-.smart-switch-button:not([animation=none]):not([dragged]):not([checked=null]) .smart-inner-container {
-  transition: left 0.2s ease-in-out;
-}
-.smart-switch-button:not([animation=none])[orientation=vertical]:not([dragged]):not([checked=null]) .smart-inner-container {
-  transition: top 0.2s ease-in-out;
-}
-.smart-switch-button[hover] {
-  border-color: var(--smart-ui-state-hover);
-}
-.smart-switch-button:focus .smart-thumb {
-  background-color: var(--smart-primary);
-  border-color: var(--smart-primary);
-}
-.smart-switch-button:focus .smart-thumb:before {
-  transform: scale(1) translate(-50%, -50%);
-  background-color: var(--smart-primary);
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[readonly] {
-  pointer-events: none;
-}
-.smart-switch-button[disabled] .smart-thumb:before {
-  content: none;
-}
-.smart-switch-button[checked] .smart-thumb {
-  background-color: var(--smart-primary);
-  border-color: var(--smart-primary);
-}
-.smart-switch-button[checked] .smart-thumb:active:before {
-  transform: scale(1) translate(-50%, -50%);
-  background-color: var(--smart-primary);
-}
-.smart-switch-button[checked] .smart-container:before {
-  background-color: var(--smart-primary);
-  opacity: 0.4;
-}
-.smart-switch-button[checked] .smart-inner-container {
-  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-.smart-switch-button[checked]:focus .smart-thumb:before {
-  transform: scale(1) translate(-50%, -50%);
-  background-color: var(--smart-primary);
-}
-.smart-switch-button[checked][inverted] .smart-inner-container {
-  left: 0;
-}
-.smart-switch-button[checked]:not([animation=none]) .smart-thumb:active:before {
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[checked]:not([animation=none]):focus .smart-thumb:before {
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[checked][orientation=vertical] .smart-thumb {
-  background-color: var(--smart-primary);
-}
-.smart-switch-button[checked][orientation=vertical] .smart-thumb:active:before {
-  transform: scale(1) translate(-50%, -50%);
-  background-color: var(--smart-primary);
-}
-.smart-switch-button[checked][orientation=vertical] .smart-container:before {
-  background-color: var(--smart-primary);
-  opacity: 0.4;
-}
-.smart-switch-button[checked][orientation=vertical]:focus .smart-thumb:before {
-  transform: scale(1) translate(-50%, -50%);
-  background-color: var(--smart-primary);
-}
-.smart-switch-button[checked][orientation=vertical]:not([animation=none]) .smart-thumb:active:before {
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[checked][orientation=vertical]:not([animation=none]):focus .smart-thumb:before {
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[checked=null] .smart-thumb {
-  background-color: var(--smart-surface);
-  border-color: var(--smart-border);
-}
-.smart-switch-button[checked=null] .smart-inner-container {
-  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
-}
-.smart-switch-button[checked=null] .smart-true-content,
-.smart-switch-button[checked=null] .smart-false-content {
-  visibility: hidden;
-}
-.smart-switch-button[checked=null] .smart-true-content-container,
-.smart-switch-button[checked=null] .smart-false-content-container {
-  color: transparent;
-}
-.smart-switch-button[checked=null][inverted] .smart-inner-container {
-  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
-}
-.smart-switch-button[inverted] .smart-inner-container {
-  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-.smart-switch-button[inverted] .smart-true-content-container {
-  order: 3;
-}
-.smart-switch-button[inverted] .smart-false-content-container {
-  order: 1;
-}
-.smart-switch-button[orientation=vertical] .smart-thumb {
-  width: var(--smart-switch-button-thumb-size);
-  height: var(--smart-switch-button-thumb-size);
-  box-shadow: var(--smart-elevation-2);
-}
-.smart-switch-button[orientation=vertical] .smart-thumb:before {
-  border: var(--smart-border-width) solid var(--smart-border);
-}
-.smart-switch-button[orientation=vertical] .smart-thumb:active:before {
-  animation: button-wave-effect 0.1s ease-in;
-  transform: scale(1) translate(-50%, -50%);
-}
-.smart-switch-button[orientation=vertical] .smart-thumb:focus .smart-thumb:before {
-  transform: scale(1) translate(-50%, -50%);
-}
-.smart-switch-button[orientation=vertical] .smart-container:before {
-  content: "";
-  position: absolute;
-  width: 50%;
-  height: 90%;
-  left: 25%;
-  top: 5%;
-  border-radius: 10px;
-}
-.smart-switch-button[orientation=vertical] .smart-inner-container {
-  height: calc(200% - var(--smart-switch-button-thumb-size));
-  width: 100%;
-  flex-direction: column;
-  left: 0;
-  top: 0;
-}
-.smart-switch-button[orientation=vertical] .smart-true-content-container,
-.smart-switch-button[orientation=vertical] .smart-false-content-container {
-  width: 100%;
-  padding: 0px 2px 0px 2px;
-  height: calc((100% - var(--smart-switch-button-thumb-size)) / 2);
-}
-.smart-switch-button[orientation=vertical]:focus .smart-thumb:before {
-  animation: button-wave-effect 0.1s ease-in;
-}
-.smart-switch-button[orientation=vertical][checked] .smart-inner-container {
-  left: 0;
-  top: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-.smart-switch-button[orientation=vertical][checked][inverted] .smart-inner-container {
-  top: 0;
-}
-.smart-switch-button[orientation=vertical][checked=null] .smart-inner-container {
-  top: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
-}
-.smart-switch-button[orientation=vertical][checked=null][inverted] .smart-inner-container {
-  left: 0;
-  top: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
-}
-.smart-switch-button[orientation=vertical][inverted] .smart-inner-container {
-  left: 0;
-  top: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-
-@keyframes button-wave-effect {
-  0% {
-    transform: scale(0.2) translate(-50%, -50%);
-  }
-  50% {
-    transform: scale(0.5) translate(-50%, -50%);
-  }
-  100% {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-.smart-switch-button[right-to-left][checked]:not([orientation=vertical]) .smart-inner-container {
-  left: 0;
-}
-.smart-switch-button[right-to-left][inverted]:not([orientation=vertical]) .smart-inner-container {
-  left: 0;
-}
-.smart-switch-button[right-to-left][checked][inverted]:not([orientation=vertical]) .smart-inner-container {
-  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-.smart-switch-button[right-to-left]:not([orientation=vertical]) .smart-inner-container {
-  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
-}
-.smart-switch-button[right-to-left][checked=null]:not([orientation=vertical]) .smart-inner-container {
-  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
+/* smart-switch-button */
+smart-switch-button {
+  width: var(--smart-switch-button-default-width);
+  height: var(--smart-switch-button-default-height);
+}
+smart-switch-button[orientation=vertical] {
+  height: var(--smart-switch-button-default-width);
+  width: var(--smart-switch-button-default-height);
+}
+smart-switch-button.smart-element {
+  display: inline-block;
+  border: none;
+  background: none;
+  overflow: visible;
+}
+
+.smart-switch-button .smart-thumb {
+  border: var(--smart-border-width) solid var(--smart-border);
+  border-radius: 100%;
+  width: var(--smart-switch-button-thumb-size);
+  height: var(--smart-switch-button-thumb-size);
+  background-color: var(--smart-surface);
+  box-shadow: var(--smart-elevation-2);
+  align-self: center;
+  position: relative;
+  cursor: pointer;
+  order: 2;
+  pointer-events: all;
+}
+.smart-switch-button .smart-thumb:before {
+  background-color: var(--smart-primary);
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  left: 50%;
+  top: 50%;
+  transition: 0.2s;
+  display: block;
+  border-radius: 100%;
+  content: "";
+  transform: scale(0) translate(-50%, -50%);
+  transform-origin: left top;
+  opacity: 0.2;
+}
+.smart-switch-button .smart-thumb:active:before {
+  animation: button-wave-effect 0.1s ease-in;
+  transform: scale(1) translate(-50%, -50%);
+}
+.smart-switch-button .smart-container {
+  font-size: inherit;
+  position: relative;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  touch-action: none;
+}
+.smart-switch-button .smart-container:before {
+  content: "";
+  position: absolute;
+  width: 90%;
+  height: 50%;
+  left: 5%;
+  top: 25%;
+  border-radius: 10px;
+  background-color: var(--smart-surface);
+}
+.smart-switch-button .smart-inner-container {
+  width: calc(200% - var(--smart-switch-button-thumb-size));
+  height: 100%;
+  position: absolute;
+  color: inherit;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  pointer-events: none;
+  left: 0;
+}
+.smart-switch-button .smart-true-content,
+.smart-switch-button .smart-false-content {
+  font-size: inherit;
+  font-weight: inherit;
+  display: inline-block;
+  text-align: center;
+  box-sizing: border-box;
+  color: inherit;
+}
+.smart-switch-button .smart-true-content-container,
+.smart-switch-button .smart-false-content-container {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-clip: content-box;
+  padding: 2px 0px 2px 0px;
+  color: inherit;
+  overflow: hidden;
+  order: 1;
+  width: calc((100% - var(--smart-switch-button-thumb-size)) / 2);
+}
+.smart-switch-button .smart-true-content-container {
+  order: 1;
+}
+.smart-switch-button .smart-false-content-container {
+  order: 3;
+}
+.smart-switch-button:not([animation=none]) .smart-container:before {
+  transition: opacity 0.2s ease-in-out, background 0.2s ease-in-out;
+}
+.smart-switch-button:not([animation=none]):not([dragged]):not([checked=null]) .smart-inner-container {
+  transition: left 0.2s ease-in-out;
+}
+.smart-switch-button:not([animation=none])[orientation=vertical]:not([dragged]):not([checked=null]) .smart-inner-container {
+  transition: top 0.2s ease-in-out;
+}
+.smart-switch-button[hover] {
+  border-color: var(--smart-ui-state-hover);
+}
+.smart-switch-button:focus .smart-thumb {
+  background-color: var(--smart-primary);
+  border-color: var(--smart-primary);
+}
+.smart-switch-button:focus .smart-thumb:before {
+  transform: scale(1) translate(-50%, -50%);
+  background-color: var(--smart-primary);
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[readonly] {
+  pointer-events: none;
+}
+.smart-switch-button[disabled] .smart-thumb:before {
+  content: none;
+}
+.smart-switch-button[checked] .smart-thumb {
+  background-color: var(--smart-primary);
+  border-color: var(--smart-primary);
+}
+.smart-switch-button[checked] .smart-thumb:active:before {
+  transform: scale(1) translate(-50%, -50%);
+  background-color: var(--smart-primary);
+}
+.smart-switch-button[checked] .smart-container:before {
+  background-color: var(--smart-primary);
+  opacity: 0.4;
+}
+.smart-switch-button[checked] .smart-inner-container {
+  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+.smart-switch-button[checked]:focus .smart-thumb:before {
+  transform: scale(1) translate(-50%, -50%);
+  background-color: var(--smart-primary);
+}
+.smart-switch-button[checked][inverted] .smart-inner-container {
+  left: 0;
+}
+.smart-switch-button[checked]:not([animation=none]) .smart-thumb:active:before {
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[checked]:not([animation=none]):focus .smart-thumb:before {
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[checked][orientation=vertical] .smart-thumb {
+  background-color: var(--smart-primary);
+}
+.smart-switch-button[checked][orientation=vertical] .smart-thumb:active:before {
+  transform: scale(1) translate(-50%, -50%);
+  background-color: var(--smart-primary);
+}
+.smart-switch-button[checked][orientation=vertical] .smart-container:before {
+  background-color: var(--smart-primary);
+  opacity: 0.4;
+}
+.smart-switch-button[checked][orientation=vertical]:focus .smart-thumb:before {
+  transform: scale(1) translate(-50%, -50%);
+  background-color: var(--smart-primary);
+}
+.smart-switch-button[checked][orientation=vertical]:not([animation=none]) .smart-thumb:active:before {
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[checked][orientation=vertical]:not([animation=none]):focus .smart-thumb:before {
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[checked=null] .smart-thumb {
+  background-color: var(--smart-surface);
+  border-color: var(--smart-border);
+}
+.smart-switch-button[checked=null] .smart-inner-container {
+  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
+}
+.smart-switch-button[checked=null] .smart-true-content,
+.smart-switch-button[checked=null] .smart-false-content {
+  visibility: hidden;
+}
+.smart-switch-button[checked=null] .smart-true-content-container,
+.smart-switch-button[checked=null] .smart-false-content-container {
+  color: transparent;
+}
+.smart-switch-button[checked=null][inverted] .smart-inner-container {
+  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
+}
+.smart-switch-button[inverted] .smart-inner-container {
+  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+.smart-switch-button[inverted] .smart-true-content-container {
+  order: 3;
+}
+.smart-switch-button[inverted] .smart-false-content-container {
+  order: 1;
+}
+.smart-switch-button[orientation=vertical] .smart-thumb {
+  width: var(--smart-switch-button-thumb-size);
+  height: var(--smart-switch-button-thumb-size);
+  box-shadow: var(--smart-elevation-2);
+}
+.smart-switch-button[orientation=vertical] .smart-thumb:before {
+  border: var(--smart-border-width) solid var(--smart-border);
+}
+.smart-switch-button[orientation=vertical] .smart-thumb:active:before {
+  animation: button-wave-effect 0.1s ease-in;
+  transform: scale(1) translate(-50%, -50%);
+}
+.smart-switch-button[orientation=vertical] .smart-thumb:focus .smart-thumb:before {
+  transform: scale(1) translate(-50%, -50%);
+}
+.smart-switch-button[orientation=vertical] .smart-container:before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 90%;
+  left: 25%;
+  top: 5%;
+  border-radius: 10px;
+}
+.smart-switch-button[orientation=vertical] .smart-inner-container {
+  height: calc(200% - var(--smart-switch-button-thumb-size));
+  width: 100%;
+  flex-direction: column;
+  left: 0;
+  top: 0;
+}
+.smart-switch-button[orientation=vertical] .smart-true-content-container,
+.smart-switch-button[orientation=vertical] .smart-false-content-container {
+  width: 100%;
+  padding: 0px 2px 0px 2px;
+  height: calc((100% - var(--smart-switch-button-thumb-size)) / 2);
+}
+.smart-switch-button[orientation=vertical]:focus .smart-thumb:before {
+  animation: button-wave-effect 0.1s ease-in;
+}
+.smart-switch-button[orientation=vertical][checked] .smart-inner-container {
+  left: 0;
+  top: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+.smart-switch-button[orientation=vertical][checked][inverted] .smart-inner-container {
+  top: 0;
+}
+.smart-switch-button[orientation=vertical][checked=null] .smart-inner-container {
+  top: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
+}
+.smart-switch-button[orientation=vertical][checked=null][inverted] .smart-inner-container {
+  left: 0;
+  top: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
+}
+.smart-switch-button[orientation=vertical][inverted] .smart-inner-container {
+  left: 0;
+  top: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+
+@keyframes button-wave-effect {
+  0% {
+    transform: scale(0.2) translate(-50%, -50%);
+  }
+  50% {
+    transform: scale(0.5) translate(-50%, -50%);
+  }
+  100% {
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+.smart-switch-button[right-to-left][checked]:not([orientation=vertical]) .smart-inner-container {
+  left: 0;
+}
+.smart-switch-button[right-to-left][inverted]:not([orientation=vertical]) .smart-inner-container {
+  left: 0;
+}
+.smart-switch-button[right-to-left][checked][inverted]:not([orientation=vertical]) .smart-inner-container {
+  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+.smart-switch-button[right-to-left]:not([orientation=vertical]) .smart-inner-container {
+  left: calc(-1 * (100% - var(--smart-switch-button-thumb-size)));
+}
+.smart-switch-button[right-to-left][checked=null]:not([orientation=vertical]) .smart-inner-container {
+  left: calc(-50% + var(--smart-switch-button-thumb-size) / 2);
 }