tdesign-react 0.45.6-alpha.1 → 0.45.6-alpha.2

package/es/switch/style/index.css

@@ -1 +1,235 @@
-.t-switch{font:var(--td-font-body-medium);color:var(--td-text-color-primary);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none;border:0;padding:0;margin:0;height:var(--td-comp-size-xxs);line-height:var(--td-comp-size-xxs);border-radius:calc(var(--td-comp-size-xxs)/2);min-width:calc(var(--td-comp-size-xxs)/.618);-webkit-transition:all .2s cubic-bezier(.38,0,.24,1);transition:all .2s cubic-bezier(.38,0,.24,1);background-color:var(--td-bg-color-secondarycomponent);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.t-switch:hover{background-color:var(--td-bg-color-secondarycomponent-hover)}.t-switch__handle{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:4px;left:4px;width:calc(var(--td-comp-size-xxs) - 8px);height:calc(var(--td-comp-size-xxs) - 8px);border-radius:var(--td-radius-extraLarge);-webkit-transition:all .2s cubic-bezier(.38,0,.24,1);transition:all .2s cubic-bezier(.38,0,.24,1);-webkit-box-shadow:var(--td-shadow-1);box-shadow:var(--td-shadow-1)}.t-switch__handle .t-icon{font-size:calc(var(--td-comp-size-xxs) - 4px);color:transparent}.t-switch__handle:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--td-radius-extraLarge);background-color:#fff;-webkit-transition:all .2s cubic-bezier(.38,0,.24,1);transition:all .2s cubic-bezier(.38,0,.24,1)}.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle:before{left:0;right:-6px}.t-switch:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle:before{right:0;left:-6px}.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__content{opacity:0}.t-switch__content{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--td-text-color-anti);padding:0 var(--td-comp-margin-xs) 0 calc(var(--td-comp-size-xxs)/.618/2 + 2px);font-size:var(--td-font-size-body-small);min-width:calc(var(--td-comp-size-xxs)/.618);-webkit-transition:padding .2s cubic-bezier(.38,0,.24,1),opacity .2s linear;transition:padding .2s cubic-bezier(.38,0,.24,1),opacity .2s linear}.t-switch__content .t-icon{font-size:var(--td-font-size-body-large)}.t-switch.t-is-checked{background-color:var(--td-brand-color)}.t-switch.t-is-checked:hover{background-color:var(--td-brand-color-hover)}.t-switch.t-is-checked .t-switch__handle{left:calc(100% - 2.5px);-webkit-transform:translate(-100%);transform:translate(-100%);width:calc(var(--td-comp-size-xxs) - 5px);height:calc(var(--td-comp-size-xxs) - 5px);top:2.5px}.t-switch.t-is-checked .t-switch__content{padding:0 calc(var(--td-comp-size-xxs)/.618/2 + 2px) 0 var(--td-comp-margin-xs);color:var(--td-text-color-anti)}.t-switch.t-is-loading{cursor:not-allowed;background-color:var(--td-bg-color-component-disabled)}.t-switch.t-is-loading .t-loading{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.t-switch.t-is-loading .t-switch__handle .t-icon{color:var(--td-bg-color-component-disabled)}.t-switch.t-is-loading.t-is-checked{background-color:var(--td-brand-color-focus)}.t-switch.t-is-loading.t-is-checked .t-switch__handle .t-icon{color:var(--td-brand-color-focus)}.t-switch.t-is-disabled{cursor:not-allowed;background-color:var(--td-bg-color-component-disabled)}.t-switch.t-is-disabled .t-switch__handle{-webkit-box-shadow:none;box-shadow:none}.t-switch.t-is-disabled.t-is-checked{background-color:var(--td-brand-color-disabled)}.t-switch.t-is-disabled.t-is-checked .t-switch__handle{-webkit-box-shadow:none;box-shadow:none}.t-switch.t-is-disabled.t-is-checked .t-switch__handle .t-icon{color:var(--td-brand-color-disabled)}.t-switch.t-size-l{min-width:calc(var(--td-comp-size-xs)/.618);height:var(--td-comp-size-xs);line-height:var(--td-comp-size-xs);border-radius:calc(var(--td-comp-size-xs)/2)}.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle:before{left:0;right:-8px}.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle:before{right:0;left:-8px}.t-switch.t-size-l .t-switch__handle{top:5px;left:5px;width:calc(var(--td-comp-size-xs) - 10px);height:calc(var(--td-comp-size-xs) - 10px)}.t-switch.t-size-l .t-switch__handle .t-icon{font-size:calc(var(--td-comp-size-xs) - 4px)}.t-switch.t-size-l .t-switch__content{padding:0 var(--td-comp-margin-s) 0 calc(var(--td-comp-size-xs)/.618/2 + 4px);min-width:calc(var(--td-comp-size-xs)/.618);font-size:9px}.t-switch.t-size-l .t-switch__content .t-icon{font-size:var(--td-font-size-body-large)}.t-switch.t-size-l.t-is-checked .t-switch__handle{left:calc(100% - 3px);top:3px;width:calc(var(--td-comp-size-xs) - 6px);height:calc(var(--td-comp-size-xs) - 6px)}.t-switch.t-size-l.t-is-checked .t-switch__content{padding:0 calc(var(--td-comp-size-xs)/.618/2 + 4px) 0 var(--td-comp-margin-s)}.t-switch.t-size-s{min-width:calc(var(--td-comp-size-xxxs)/.618);height:var(--td-comp-size-xxxs);line-height:var(--td-comp-size-xxxs);border-radius:calc(var(--td-comp-size-xxxs)/2)}.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle:before{left:0;right:-4px}.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle:before{right:0;left:-4px}.t-switch.t-size-s .t-switch__handle{top:3px;left:3px;width:calc(var(--td-comp-size-xxxs) - 6px);height:calc(var(--td-comp-size-xxxs) - 6px)}.t-switch.t-size-s .t-switch__handle .t-icon{font-size:calc(var(--td-comp-size-xxxs) - 4px)}.t-switch.t-size-s .t-switch__content{padding:0 var(--td-comp-margin-xxs) 0 calc(var(--td-comp-size-xxxs)/.618/2 + 2px);min-width:calc(var(--td-comp-size-xxxs)/.618);font-size:9px}.t-switch.t-size-s .t-switch__content .t-icon{font-size:var(--td-font-size-body-large)}.t-switch.t-size-s.t-is-checked .t-switch__handle{left:calc(100% - 2px);top:2px;width:calc(var(--td-comp-size-xxxs) - 4px);height:calc(var(--td-comp-size-xxxs) - 4px)}.t-switch.t-size-s.t-is-checked .t-switch__content{padding:0 calc(var(--td-comp-size-xxxs)/.618/2 + 2px) 0 var(--td-comp-margin-xxs)}
+.t-switch {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  list-style: none;
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: middle;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  height: var(--td-comp-size-xxs);
+  line-height: var(--td-comp-size-xxs);
+  border-radius: calc(var(--td-comp-size-xxs) / 2);
+  min-width: calc(var(--td-comp-size-xxs) / 0.618);
+  -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  background-color: var(--td-bg-color-secondarycomponent);
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.t-switch:hover {
+  background-color: var(--td-bg-color-secondarycomponent-hover);
+}
+.t-switch__handle {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  top: 4px;
+  left: 4px;
+  width: calc(var(--td-comp-size-xxs) - 2 * 4px);
+  height: calc(var(--td-comp-size-xxs) - 2 * 4px);
+  border-radius: var(--td-radius-extraLarge);
+  -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  -webkit-box-shadow: var(--td-shadow-1);
+          box-shadow: var(--td-shadow-1);
+}
+.t-switch__handle .t-icon {
+  font-size: calc(var(--td-comp-size-xxs) - 4px);
+  color: transparent;
+}
+.t-switch__handle::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--td-radius-extraLarge);
+  background-color: #fff;
+  -webkit-transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+  transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
+}
+.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
+  left: 0;
+  right: -6px;
+}
+.t-switch:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
+  right: 0;
+  left: -6px;
+}
+.t-switch:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__content {
+  opacity: 0;
+}
+.t-switch__content {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  color: var(--td-text-color-anti);
+  padding: 0 var(--td-comp-margin-xs) 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px);
+  font-size: var(--td-font-size-body-small);
+  min-width: calc(var(--td-comp-size-xxs) / 0.618);
+  -webkit-transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear;
+  transition: padding 0.2s cubic-bezier(0.38, 0, 0.24, 1), opacity 0.2s linear;
+}
+.t-switch__content .t-icon {
+  font-size: var(--td-font-size-body-large);
+}
+.t-switch.t-is-checked {
+  background-color: var(--td-brand-color);
+}
+.t-switch.t-is-checked:hover {
+  background-color: var(--td-brand-color-hover);
+}
+.t-switch.t-is-checked .t-switch__handle {
+  left: calc(100% - 2.5px);
+  -webkit-transform: translate(-100%, 0);
+          transform: translate(-100%, 0);
+  width: calc(var(--td-comp-size-xxs) - 2 * 2.5px);
+  height: calc(var(--td-comp-size-xxs) - 2 * 2.5px);
+  top: 2.5px;
+}
+.t-switch.t-is-checked .t-switch__content {
+  padding: 0 calc(calc(var(--td-comp-size-xxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xs);
+  color: var(--td-text-color-anti);
+}
+.t-switch.t-is-loading {
+  cursor: not-allowed;
+  background-color: var(--td-bg-color-component-disabled);
+}
+.t-switch.t-is-loading .t-loading {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.t-switch.t-is-loading .t-switch__handle .t-icon {
+  color: var(--td-bg-color-component-disabled);
+}
+.t-switch.t-is-loading.t-is-checked {
+  background-color: var(--td-brand-color-focus);
+}
+.t-switch.t-is-loading.t-is-checked .t-switch__handle .t-icon {
+  color: var(--td-brand-color-focus);
+}
+.t-switch.t-is-disabled {
+  cursor: not-allowed;
+  background-color: var(--td-bg-color-component-disabled);
+}
+.t-switch.t-is-disabled .t-switch__handle {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-switch.t-is-disabled.t-is-checked {
+  background-color: var(--td-brand-color-disabled);
+}
+.t-switch.t-is-disabled.t-is-checked .t-switch__handle {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-switch.t-is-disabled.t-is-checked .t-switch__handle .t-icon {
+  color: var(--td-brand-color-disabled);
+}
+.t-switch.t-size-l {
+  min-width: calc(var(--td-comp-size-xs) / 0.618);
+  height: var(--td-comp-size-xs);
+  line-height: var(--td-comp-size-xs);
+  border-radius: calc(var(--td-comp-size-xs) / 2);
+}
+.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
+  left: 0;
+  right: -8px;
+}
+.t-switch.t-size-l:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
+  right: 0;
+  left: -8px;
+}
+.t-switch.t-size-l .t-switch__handle {
+  top: 5px;
+  left: 5px;
+  width: calc(var(--td-comp-size-xs) - 2 * 5px);
+  height: calc(var(--td-comp-size-xs) - 2 * 5px);
+}
+.t-switch.t-size-l .t-switch__handle .t-icon {
+  font-size: calc(var(--td-comp-size-xs) - 4px);
+}
+.t-switch.t-size-l .t-switch__content {
+  padding: 0 var(--td-comp-margin-s) 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px);
+  min-width: calc(var(--td-comp-size-xs) / 0.618);
+  font-size: 9px;
+}
+.t-switch.t-size-l .t-switch__content .t-icon {
+  font-size: var(--td-font-size-body-large);
+}
+.t-switch.t-size-l.t-is-checked .t-switch__handle {
+  left: calc(100% - 3px);
+  top: 3px;
+  width: calc(var(--td-comp-size-xs) - 2 * 3px);
+  height: calc(var(--td-comp-size-xs) - 2 * 3px);
+}
+.t-switch.t-size-l.t-is-checked .t-switch__content {
+  padding: 0 calc(calc(var(--td-comp-size-xs) / 0.618) / 2 + 4px) 0 var(--td-comp-margin-s);
+}
+.t-switch.t-size-s {
+  min-width: calc(var(--td-comp-size-xxxs) / 0.618);
+  height: var(--td-comp-size-xxxs);
+  line-height: var(--td-comp-size-xxxs);
+  border-radius: calc(var(--td-comp-size-xxxs) / 2);
+}
+.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading) .t-switch__handle::before {
+  left: 0;
+  right: -4px;
+}
+.t-switch.t-size-s:active:not(.t-is-disabled):not(.t-is-loading).t-is-checked .t-switch__handle::before {
+  right: 0;
+  left: -4px;
+}
+.t-switch.t-size-s .t-switch__handle {
+  top: 3px;
+  left: 3px;
+  width: calc(var(--td-comp-size-xxxs) - 2 * 3px);
+  height: calc(var(--td-comp-size-xxxs) - 2 * 3px);
+}
+.t-switch.t-size-s .t-switch__handle .t-icon {
+  font-size: calc(var(--td-comp-size-xxxs) - 4px);
+}
+.t-switch.t-size-s .t-switch__content {
+  padding: 0 var(--td-comp-margin-xxs) 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px);
+  min-width: calc(var(--td-comp-size-xxxs) / 0.618);
+  font-size: 9px;
+}
+.t-switch.t-size-s .t-switch__content .t-icon {
+  font-size: var(--td-font-size-body-large);
+}
+.t-switch.t-size-s.t-is-checked .t-switch__handle {
+  left: calc(100% - 2px);
+  top: 2px;
+  width: calc(var(--td-comp-size-xxxs) - 2 * 2px);
+  height: calc(var(--td-comp-size-xxxs) - 2 * 2px);
+}
+.t-switch.t-size-s.t-is-checked .t-switch__content {
+  padding: 0 calc(calc(var(--td-comp-size-xxxs) / 0.618) / 2 + 2px) 0 var(--td-comp-margin-xxs);
+}