cty-mui-core 1.0.0

package/dist/collection/components/cascader/cascader-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/cascader/cascader.css

@@ -0,0 +1,155 @@
+* {
+  box-sizing: border-box;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  padding: 0;
+}
+
+.cty-button-native {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+  line-height: 1;
+  border: 0;
+  outline: none;
+  user-select: none;
+  appearance: none;
+  border-radius: 0;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+:host {
+  --cty-cascader-background: #FFF;
+  --cty-cascader-overlay-background: rgba(0, 0, 0, 0.3);
+  --cty-cascader-header-height: 44px;
+  --cty-cascader-header-button-size: 14px;
+  --cty-cascader-title-size: 16px;
+  --cty-cascader-title-color: var(--cty-text-color-dark);
+  --cty-cascader-title-weight: 500;
+  --cty-cascader-cancel-color: var(--cty-color-medium);
+  --cty-cascader-confirm-color: var(--cty-color-primary);
+  --cty-cascader-option-text-color: var(--cty-text-color-dark);
+  --cty-cascader-picked-border-color:var(--cty-border-color);
+  --cty-cascader-mask-background-image:linear-gradient(180deg,
+  rgba(255, 255, 255, 0.9),
+  rgba(255, 255, 255, 0.4)), linear-gradient(0deg,
+  rgba(255, 255, 255, 0.9),
+  rgba(255, 255, 255, 0.4));
+}
+
+:host(.overlay-hidden) {
+  display: none;
+}
+
+cty-overlay {
+  --cty-overlay-background: var(--cty-cascader-overlay-background, rgba(0, 0, 0, 0.3));
+}
+
+.cty-cascader-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--cty-cascader-background);
+  user-select: none;
+}
+
+.cascader {
+  width: 100%;
+  background: var(--cty-cascader-background);
+}
+
+.cty-cascader-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--cty-cascader-header-height, 44px);
+}
+.cty-cascader-header button {
+  font-size: var(--cty-cascader-header-button-size);
+}
+.cty-cascader-header button.cancel {
+  color: var(--cty-cascader-cancel-color);
+}
+.cty-cascader-header button.confirm {
+  color: var(--cty-cascader-confirm-color);
+}
+.cty-cascader-header .cty-cascader-title {
+  color: var(--cty-cascader-title-color);
+  font-size: var(--cty-cascader-title-size);
+  font-weight: var(--cty-cascader-title-weight);
+}
+
+.cty-cascader-columns {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+}
+
+.cty-cascader-column {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+.cty-cascader-scroller {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.cty-cascader-option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  cursor: pointer;
+}
+.cty-cascader-option .cty-cascader-text {
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--cty-cascader-option-text-color);
+}
+
+.cty-cascader-picked {
+  position: absolute;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  border-top: 1px solid var(--cty-cascader-picked-border-color);
+  border-bottom: 1px solid var(--cty-cascader-picked-border-color);
+}
+
+.cty-cascader-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: var(--cty-cascader-mask-background-image);
+  background-repeat: no-repeat;
+  background-position: top, bottom;
+  pointer-events: none;
+}