@cloudbase/weda-ui 0.2.16 → 1.0.24

package/src/web/components/lottery/index.css

@@ -0,0 +1,327 @@
+/* pc style start */
+.weda-lottery {
+  width: 326px;
+  height: 326px;
+  position: relative;
+}
+.weda-lottery .weda-lottery__wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #FF465C;
+  border: 1px solid rgba(255, 255, 255, 0.6);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+}
+
+.weda-lottery .weda-lottery__dot-top {
+  position: absolute;
+  top: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-bottom {
+  position: absolute;
+  bottom: 4px;
+  left: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-left {
+  position: absolute;
+  left: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot-right {
+  position: absolute;
+  right: 4px;
+  top: calc((100% - 217px) / 2);
+}
+
+.weda-lottery .weda-lottery__dot {
+  display: flex;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal {
+  flex-direction: row;
+}
+
+.weda-lottery .weda-lottery__dot-vertical {
+  flex-direction: column;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item,
+.weda-lottery .weda-lottery__dot-single {
+  width: 9px;
+  height: 9px;
+  box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+  border-radius: 50%;
+  background: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
+  background: #FFEE52;
+}
+
+.weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
+  background: #FFFFFF
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
+  margin-right: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item:last-child {
+  margin-right: 0 !important;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item {
+  margin-bottom: 43px;
+}
+
+.weda-lottery .weda-lottery__dot-vertical .weda-lottery__dot-item:last-child {
+  margin-bottom: 0 !important;
+}
+
+.weda-lottery .weda-lottery__dot-left-top {
+  position: absolute;
+  top: 9px;
+  left: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-right-top {
+  position: absolute;
+  top: 9px;
+  right: 6px;
+}
+
+.weda-lottery .weda-lottery__dot-left-bottom {
+  position: absolute;
+  left: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__dot-right-bottom {
+  position: absolute;
+  right: 6px;
+  bottom: 9px;
+}
+
+.weda-lottery .weda-lottery__inner {
+  padding: 18px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__inner-wrap {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #DD0D00 0%, #D80027 100%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
+  border-radius: 10px;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__list {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  box-sizing: border-box;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
+  position: absolute;
+  width: calc((100% - 32px)/ 3);
+  height: calc((100% - 32px)/ 3);
+  font-size: 0;
+  text-align: center;
+  background: #FFF8EE;
+  box-shadow: inset 0px -2px 0px #FFDDBD;
+  border-radius: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
+  background: #FFF8EE;
+  box-shadow: 0px 0px 6px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
+  background: #FF6666;
+  box-shadow: inset 0px -2px 0px #FFA4A4;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
+  top: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
+  top: 8px;
+  left: calc((100% - 32px)/ 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
+  top: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
+  top: calc((100% - 32px)/ 3 + 16px);
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(5) {
+  bottom: 8px;
+  right: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
+  bottom: 8px;
+  left: calc((100% - 32px)/ 3 + 16px);
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
+  bottom: 8px;
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
+  bottom: calc((100% - 32px)/ 3 + 16px);
+  left: 8px;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived .weda-lottery__turntable-cell {
+  border-color: #FFE05F;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-icon {
+  display: block;
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-desc {
+  margin-top: 6px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 17px;
+  text-align: center;
+  color: #BA0000;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  width: 100%;
+}
+
+.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected .weda-lottery__turntable-cell-desc {
+  color: #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__turntable-btn {
+  z-index: 2;
+  position: absolute;
+  width: calc((100% - 32px)/ 3);
+  height: calc((100% - 32px)/ 3);
+  top: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px)/ 3 + 16px);
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px -2px 0px #FF7A00;
+  border-radius: 50%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived {
+  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
+  box-shadow: inset 0px 2px 0px #FFFFFF;
+}
+
+.weda-lottery .weda-lottery__btn-inner {
+  padding: 9px;
+  width: 100%;
+  height: 100%;
+}
+
+.weda-lottery .weda-lottery__btn {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
+  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
+}
+
+.weda-lottery .weda-lottery__btn-image {
+  padding: 11px 15px;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  text-decoration: none
+}
+
+.weda-lottery .weda-lottery__btn-image  .weda-lottery__btn-text {
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  text-align: center;
+  color: #FFFFFF;
+  text-shadow: 0px 0.5px 0px #E42B27;
+  max-height: 100%;
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  width: 100%;
+}
+
+.weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn-image {
+  opacity: 0.6;
+}
+/* pc style end */
+
+/* mobile style start */
+.weda-lottery-mobile {
+  width: 100%;
+}
+
+.weda-lottery-mobile .weda-lottery__wrap,
+.weda-lottery-mobile .weda-lottery__content {
+  width: 100%;
+}
+/* mobile style end */