smart-webcomponents-react 19.0.0 → 19.0.5

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

@@ -1,176 +1,176 @@
-/* smart-check-box and smart-radio-button*/
-.smart-toggle-box {
-  display: inline-block;
-  outline: none;
-  height: var(--smart-editor-height);
-  cursor: pointer;
-}
-.smart-toggle-box.smart-element {
-  border: none;
-  background: transparent;
-}
-.smart-toggle-box .smart-container, .smart-toggle-box.smart-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.smart-toggle-box .smart-ripple {
-  background: var(--smart-primary);
-}
-.smart-toggle-box .smart-overlay {
-  top: 0;
-  height: 100%;
-  background: var(--smart-primary);
-  width: var(--smart-editor-height);
-  position: absolute;
-  left: 2px;
-  border-radius: 100%;
-  padding: 0px;
-  opacity: 0;
-  box-sizing: content-box;
-  transition: opacity 280ms ease-in-out;
-  margin: 0px;
-}
-.smart-toggle-box .smart-label {
-  color: var(--smart-background-color);
-  background: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  margin: 0 8px 0 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: auto;
-}
-.smart-toggle-box.smart-check-box .smart-input {
-  width: var(--smart-check-box-default-size);
-  min-width: var(--smart-check-box-default-size);
-  height: var(--smart-check-box-default-size);
-  min-height: var(--smart-check-box-default-size);
-  background-color: var(--smart-background);
-  box-sizing: initial;
-  border: var(--smart-border-width) solid var(--smart-border);
-  display: inline-block;
-  color: var(--smart-background-color);
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-  margin: 0 0 0 8px;
-  transition: background linear 0.2s;
-  position: relative;
-}
-.smart-toggle-box.smart-check-box .smart-input:after {
-  font-family: var(--smart-font-family-icon);
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  height: 100%;
-  align-items: center;
-}
-.smart-toggle-box.smart-check-box[checked] .smart-input:after {
-  font-weight: 100;
-  content: var(--smart-icon-check);
-  pointer-events: none;
-}
-.smart-toggle-box.smart-check-box[checked=null] .smart-input:after {
-  content: "-";
-  margin-top: -1px;
-}
-.smart-toggle-box.smart-radio-button .smart-input {
-  width: var(--smart-radio-button-default-size);
-  min-width: var(--smart-radio-button-default-size);
-  height: var(--smart-radio-button-default-size);
-  min-height: var(--smart-radio-button-default-size);
-  background-color: var(--smart-background);
-  box-sizing: initial;
-  border-style: solid;
-  border-width: var(--smart-border-width);
-  border-color: var(--smart-border);
-  display: inline-block;
-  border-radius: 100%;
-  color: var(--smart-background-color);
-  margin: 0 0 0 8px;
-  position: relative;
-}
-.smart-toggle-box.smart-radio-button .smart-input:after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 50%;
-  height: 50%;
-  font-style: normal;
-  text-decoration: inherit;
-  font-variant: normal;
-  text-transform: none;
-  color: inherit;
-  border-radius: 50%;
-  line-height: 100%;
-}
-.smart-toggle-box.smart-radio-button[checked] .smart-input:after {
-  font-size: 15px;
-  font-weight: 100;
-  background: var(--smart-primary-color);
-}
-.smart-toggle-box.smart-radio-button[checked][hover]:not([focus]) .smart-input::after {
-  background: var(--smart-ui-state-color-hover);
-}
-.smart-toggle-box[active] .smart-input {
-  border-color: var(--smart-ui-state-border-active);
-  background-color: var(--smart-ui-state-active);
-  color: var(--smart-ui-state-color-active);
-}
-.smart-toggle-box[active]:focus .smart-overlay, .smart-toggle-box[active][focus] .smart-overlay {
-  opacity: 0.4;
-}
-.smart-toggle-box[checked] .smart-input {
-  border-color: var(--smart-ui-state-border-active);
-  background-color: var(--smart-ui-state-active);
-  color: var(--smart-ui-state-color-active);
-}
-.smart-toggle-box[hover] .smart-input {
-  border-color: var(--smart-ui-state-border-hover);
-  background-color: var(--smart-ui-state-hover);
-  color: var(--smart-ui-state-color-hover);
-}
-.smart-toggle-box:focus .smart-input, .smart-toggle-box[focus] .smart-input {
-  outline: none;
-  overflow: visible;
-  border-color: var(--smart-primary);
-  background-color: var(--smart-primary);
-  color: var(--smart-primary-color);
-}
-.smart-toggle-box:focus .smart-overlay, .smart-toggle-box[focus] .smart-overlay {
-  opacity: 0.3;
-}
-.smart-toggle-box[readonly] {
-  cursor: initial;
-}
-.smart-toggle-box[readonly] .smart-input,
-.smart-toggle-box[readonly] .smart-label {
-  cursor: initial;
-}
-.smart-toggle-box[check-mode=input] {
-  cursor: default;
-}
-.smart-toggle-box[check-mode=input] .smart-input {
-  cursor: pointer;
-}
-.smart-toggle-box[check-mode=label] .smart-label {
-  cursor: pointer;
-}
-
-/* smart-check-box and smart-radio-button*/
-.smart-toggle-box[right-to-left] .smart-container,
-.smart-toggle-box[right-to-left] .smart-hidden-input {
-  direction: rtl;
-}
-.smart-toggle-box[right-to-left] .smart-overlay {
-  left: initial;
-  right: 2px;
-}
-.smart-toggle-box[right-to-left] .smart-input {
-  margin: 0 8px 0 0;
+/* smart-check-box and smart-radio-button*/
+.smart-toggle-box {
+  display: inline-block;
+  outline: none;
+  height: var(--smart-editor-height);
+  cursor: pointer;
+}
+.smart-toggle-box.smart-element {
+  border: none;
+  background: transparent;
+}
+.smart-toggle-box .smart-container, .smart-toggle-box.smart-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.smart-toggle-box .smart-ripple {
+  background: var(--smart-primary);
+}
+.smart-toggle-box .smart-overlay {
+  top: 0;
+  height: 100%;
+  background: var(--smart-primary);
+  width: var(--smart-editor-height);
+  position: absolute;
+  left: 2px;
+  border-radius: 100%;
+  padding: 0px;
+  opacity: 0;
+  box-sizing: content-box;
+  transition: opacity 280ms ease-in-out;
+  margin: 0px;
+}
+.smart-toggle-box .smart-label {
+  color: var(--smart-background-color);
+  background: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  margin: 0 8px 0 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+}
+.smart-toggle-box.smart-check-box .smart-input {
+  width: var(--smart-check-box-default-size);
+  min-width: var(--smart-check-box-default-size);
+  height: var(--smart-check-box-default-size);
+  min-height: var(--smart-check-box-default-size);
+  background-color: var(--smart-background);
+  box-sizing: initial;
+  border: var(--smart-border-width) solid var(--smart-border);
+  display: inline-block;
+  color: var(--smart-background-color);
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+  margin: 0 0 0 8px;
+  transition: background linear 0.2s;
+  position: relative;
+}
+.smart-toggle-box.smart-check-box .smart-input:after {
+  font-family: var(--smart-font-family-icon);
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  height: 100%;
+  align-items: center;
+}
+.smart-toggle-box.smart-check-box[checked] .smart-input:after {
+  font-weight: 100;
+  content: var(--smart-icon-check);
+  pointer-events: none;
+}
+.smart-toggle-box.smart-check-box[checked=null] .smart-input:after {
+  content: "-";
+  margin-top: -1px;
+}
+.smart-toggle-box.smart-radio-button .smart-input {
+  width: var(--smart-radio-button-default-size);
+  min-width: var(--smart-radio-button-default-size);
+  height: var(--smart-radio-button-default-size);
+  min-height: var(--smart-radio-button-default-size);
+  background-color: var(--smart-background);
+  box-sizing: initial;
+  border-style: solid;
+  border-width: var(--smart-border-width);
+  border-color: var(--smart-border);
+  display: inline-block;
+  border-radius: 100%;
+  color: var(--smart-background-color);
+  margin: 0 0 0 8px;
+  position: relative;
+}
+.smart-toggle-box.smart-radio-button .smart-input:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  height: 50%;
+  font-style: normal;
+  text-decoration: inherit;
+  font-variant: normal;
+  text-transform: none;
+  color: inherit;
+  border-radius: 50%;
+  line-height: 100%;
+}
+.smart-toggle-box.smart-radio-button[checked] .smart-input:after {
+  font-size: 15px;
+  font-weight: 100;
+  background: var(--smart-primary-color);
+}
+.smart-toggle-box.smart-radio-button[checked][hover]:not([focus]) .smart-input::after {
+  background: var(--smart-ui-state-color-hover);
+}
+.smart-toggle-box[active] .smart-input {
+  border-color: var(--smart-ui-state-border-active);
+  background-color: var(--smart-ui-state-active);
+  color: var(--smart-ui-state-color-active);
+}
+.smart-toggle-box[active]:focus .smart-overlay, .smart-toggle-box[active][focus] .smart-overlay {
+  opacity: 0.4;
+}
+.smart-toggle-box[checked] .smart-input {
+  border-color: var(--smart-ui-state-border-active);
+  background-color: var(--smart-ui-state-active);
+  color: var(--smart-ui-state-color-active);
+}
+.smart-toggle-box[hover] .smart-input {
+  border-color: var(--smart-ui-state-border-hover);
+  background-color: var(--smart-ui-state-hover);
+  color: var(--smart-ui-state-color-hover);
+}
+.smart-toggle-box:focus .smart-input, .smart-toggle-box[focus] .smart-input {
+  outline: none;
+  overflow: visible;
+  border-color: var(--smart-primary);
+  background-color: var(--smart-primary);
+  color: var(--smart-primary-color);
+}
+.smart-toggle-box:focus .smart-overlay, .smart-toggle-box[focus] .smart-overlay {
+  opacity: 0.3;
+}
+.smart-toggle-box[readonly] {
+  cursor: initial;
+}
+.smart-toggle-box[readonly] .smart-input,
+.smart-toggle-box[readonly] .smart-label {
+  cursor: initial;
+}
+.smart-toggle-box[check-mode=input] {
+  cursor: default;
+}
+.smart-toggle-box[check-mode=input] .smart-input {
+  cursor: pointer;
+}
+.smart-toggle-box[check-mode=label] .smart-label {
+  cursor: pointer;
+}
+
+/* smart-check-box and smart-radio-button*/
+.smart-toggle-box[right-to-left] .smart-container,
+.smart-toggle-box[right-to-left] .smart-hidden-input {
+  direction: rtl;
+}
+.smart-toggle-box[right-to-left] .smart-overlay {
+  left: initial;
+  right: 2px;
+}
+.smart-toggle-box[right-to-left] .smart-input {
+  margin: 0 8px 0 0;
 }

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

@@ -1,125 +1,125 @@
-/* .smart-tooltip */
-smart-tooltip {
-  position: absolute;
-  text-align: center;
-  z-index: var(--smart-editor-drop-down-z-index);
-  font-family: var(--smart-font-family);
-  font-size: var(--smart-font-size);
-  visibility: hidden;
-  pointer-events: none;
-}
-smart-tooltip.smart-element {
-  background: transparent;
-  overflow: visible;
-}
-smart-tooltip .smart-tooltip-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: var(--smart-tooltip-padding);
-  background-color: var(--smart-secondary);
-  color: var(--smart-secondary-color);
-  border: var(--smart-border-width) solid var(--smart-secondary);
-  width: 100%;
-  height: 100%;
-  opacity: 0.9;
-  box-shadow: var(--smart-elevation-6);
-  font-family: var(--smart-font-family);
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-}
-smart-tooltip.auto {
-  height: auto;
-}
-smart-tooltip.auto .smart-container {
-  height: auto;
-}
-smart-tooltip.auto .smart-tooltip-content {
-  height: auto;
-}
-smart-tooltip[visible] {
-  visibility: visible;
-  pointer-events: auto;
-}
-smart-tooltip[arrow] {
-  padding-bottom: var(--smart-tooltip-arrow-width);
-}
-smart-tooltip[arrow] .smart-tooltip-content:after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: var(--smart-tooltip-arrow-width) solid transparent;
-  border-right: var(--smart-tooltip-arrow-width) solid transparent;
-  border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
-  position: absolute;
-  bottom: 0;
-  left: calc(50% - var(--smart-tooltip-arrow-width));
-  transform: translateX(var(--smart-tooltip-arrow-translate));
-}
-smart-tooltip[arrow][arrow-direction=bottom] {
-  padding-bottom: var(--smart-tooltip-arrow-width);
-}
-smart-tooltip[arrow][arrow-direction=bottom] .smart-tooltip-content:after {
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: var(--smart-tooltip-arrow-width) solid transparent;
-  border-right: var(--smart-tooltip-arrow-width) solid transparent;
-  border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
-  position: absolute;
-  bottom: 0;
-  left: calc(50% - var(--smart-tooltip-arrow-width));
-  transform: translateX(var(--smart-tooltip-arrow-translate));
-}
-smart-tooltip[arrow][arrow-direction=top] {
-  padding-bottom: initial;
-  padding-top: var(--smart-tooltip-arrow-width);
-}
-smart-tooltip[arrow][arrow-direction=top] .smart-tooltip-content:after {
-  border-left: var(--smart-tooltip-arrow-width) solid transparent;
-  border-right: var(--smart-tooltip-arrow-width) solid transparent;
-  border-bottom: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
-  border-top: initial;
-  top: 0;
-  bottom: calc(100% + var(--smart-tooltip-arrow-width));
-  transform: translateX(var(--smart-tooltip-arrow-translate));
-}
-smart-tooltip[arrow][arrow-direction=left] {
-  padding-bottom: initial;
-  padding-left: var(--smart-tooltip-arrow-width);
-}
-smart-tooltip[arrow][arrow-direction=left] .smart-tooltip-content:after {
-  border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
-  border-top: var(--smart-tooltip-arrow-width) solid transparent;
-  border-right: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
-  border-left: initial;
-  left: 0;
-  top: calc(50% - var(--smart-tooltip-arrow-width));
-  transform: translateY(var(--smart-tooltip-arrow-translate));
-}
-smart-tooltip[arrow][arrow-direction=right] {
-  padding-bottom: initial;
-  padding-right: var(--smart-tooltip-arrow-width);
-}
-smart-tooltip[arrow][arrow-direction=right] .smart-tooltip-content:after {
-  border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
-  border-top: var(--smart-tooltip-arrow-width) solid transparent;
-  border-left: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
-  border-right: initial;
-  left: calc(100% - var(--smart-tooltip-arrow-width));
-  top: calc(50% - var(--smart-tooltip-arrow-width));
-  transform: translateY(var(--smart-tooltip-arrow-translate));
-}
-smart-tooltip:not([animation=none]) {
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-smart-tooltip:not([animation=none])[visible] {
-  opacity: 1;
-}
-
-/* .smart-tooltip */
-smart-tooltip[right-to-left] .smart-tooltip-content {
-  direction: rtl;
+/* .smart-tooltip */
+smart-tooltip {
+  position: absolute;
+  text-align: center;
+  z-index: var(--smart-editor-drop-down-z-index);
+  font-family: var(--smart-font-family);
+  font-size: var(--smart-font-size);
+  visibility: hidden;
+  pointer-events: none;
+}
+smart-tooltip.smart-element {
+  background: transparent;
+  overflow: visible;
+}
+smart-tooltip .smart-tooltip-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: var(--smart-tooltip-padding);
+  background-color: var(--smart-secondary);
+  color: var(--smart-secondary-color);
+  border: var(--smart-border-width) solid var(--smart-secondary);
+  width: 100%;
+  height: 100%;
+  opacity: 0.9;
+  box-shadow: var(--smart-elevation-6);
+  font-family: var(--smart-font-family);
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+}
+smart-tooltip.auto {
+  height: auto;
+}
+smart-tooltip.auto .smart-container {
+  height: auto;
+}
+smart-tooltip.auto .smart-tooltip-content {
+  height: auto;
+}
+smart-tooltip[visible] {
+  visibility: visible;
+  pointer-events: auto;
+}
+smart-tooltip[arrow] {
+  padding-bottom: var(--smart-tooltip-arrow-width);
+}
+smart-tooltip[arrow] .smart-tooltip-content:after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: var(--smart-tooltip-arrow-width) solid transparent;
+  border-right: var(--smart-tooltip-arrow-width) solid transparent;
+  border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - var(--smart-tooltip-arrow-width));
+  transform: translateX(var(--smart-tooltip-arrow-translate));
+}
+smart-tooltip[arrow][arrow-direction=bottom] {
+  padding-bottom: var(--smart-tooltip-arrow-width);
+}
+smart-tooltip[arrow][arrow-direction=bottom] .smart-tooltip-content:after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: var(--smart-tooltip-arrow-width) solid transparent;
+  border-right: var(--smart-tooltip-arrow-width) solid transparent;
+  border-top: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
+  position: absolute;
+  bottom: 0;
+  left: calc(50% - var(--smart-tooltip-arrow-width));
+  transform: translateX(var(--smart-tooltip-arrow-translate));
+}
+smart-tooltip[arrow][arrow-direction=top] {
+  padding-bottom: initial;
+  padding-top: var(--smart-tooltip-arrow-width);
+}
+smart-tooltip[arrow][arrow-direction=top] .smart-tooltip-content:after {
+  border-left: var(--smart-tooltip-arrow-width) solid transparent;
+  border-right: var(--smart-tooltip-arrow-width) solid transparent;
+  border-bottom: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
+  border-top: initial;
+  top: 0;
+  bottom: calc(100% + var(--smart-tooltip-arrow-width));
+  transform: translateX(var(--smart-tooltip-arrow-translate));
+}
+smart-tooltip[arrow][arrow-direction=left] {
+  padding-bottom: initial;
+  padding-left: var(--smart-tooltip-arrow-width);
+}
+smart-tooltip[arrow][arrow-direction=left] .smart-tooltip-content:after {
+  border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
+  border-top: var(--smart-tooltip-arrow-width) solid transparent;
+  border-right: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
+  border-left: initial;
+  left: 0;
+  top: calc(50% - var(--smart-tooltip-arrow-width));
+  transform: translateY(var(--smart-tooltip-arrow-translate));
+}
+smart-tooltip[arrow][arrow-direction=right] {
+  padding-bottom: initial;
+  padding-right: var(--smart-tooltip-arrow-width);
+}
+smart-tooltip[arrow][arrow-direction=right] .smart-tooltip-content:after {
+  border-bottom: var(--smart-tooltip-arrow-width) solid transparent;
+  border-top: var(--smart-tooltip-arrow-width) solid transparent;
+  border-left: var(--smart-tooltip-arrow-width) solid var(--smart-tooltip-arrow-color);
+  border-right: initial;
+  left: calc(100% - var(--smart-tooltip-arrow-width));
+  top: calc(50% - var(--smart-tooltip-arrow-width));
+  transform: translateY(var(--smart-tooltip-arrow-translate));
+}
+smart-tooltip:not([animation=none]) {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+smart-tooltip:not([animation=none])[visible] {
+  opacity: 1;
+}
+
+/* .smart-tooltip */
+smart-tooltip[right-to-left] .smart-tooltip-content {
+  direction: rtl;
 }