@lolmath/ui 1.0.1 → 1.0.3

package/temp/button/button.css

@@ -1,503 +0,0 @@
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled)
-  .content-wrapper {
-  font-kerning: normal;
-  -webkit-font-feature-settings: "kern" 1;
-  -webkit-font-smoothing: antialiased;
-}
-:host {
-  text-transform: uppercase;
-}
-
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled)
-  .content-wrapper {
-  color: #a09b8c;
-  font-size: 12px;
-  font-weight: normal;
-  line-height: 16px;
-  letter-spacing: 0.025em;
-  -webkit-font-smoothing: subpixel-antialiased;
-}
-
-:host {
-  --flat-button-height: 100%;
-  --flat-button-width: inherit;
-  --flat-button-min-height: 32px;
-  --flat-button-border-transition-opacity: 0;
-  --flat-button-glow-animation: initial;
-  --flat-button-bg-opacity: 0;
-  --flat-button-inner-height: 100%;
-  --flat-button-border-width: 2px;
-  --flat-button-border-offset: -2px;
-  --flat-button-disabled-color: #5c5b57;
-}
-:host {
-  color: #cdbe91;
-  font-size: var(--font-size, 14px);
-  font-family: var(--font-family, var(--font-display));
-  font-weight: bold;
-  letter-spacing: 1px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  justify-content: center;
-  white-space: nowrap;
-  padding: 5px 1.3em;
-  height: var(--flat-button-height);
-  width: var(--flat-button-width);
-  min-height: var(--flat-button-min-height);
-  cursor: pointer;
-  -webkit-user-select: none;
-  box-shadow: 0 0 1px 1px #010a13, inset 0 0 1px 1px #010a13;
-  background: #1e2328;
-  border: var(--flat-button-border-width) solid transparent;
-}
-
-:host .border-idle {
-  position: absolute;
-  top: var(--flat-button-border-offset);
-  left: var(--flat-button-border-offset);
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border: var(--flat-button-border-width) solid transparent;
-  border-image: linear-gradient(
-    to top,
-    #785b28 0%,
-    #c89c3c 55%,
-    #c8a355 71%,
-    #c8aa6e 100%
-  );
-  border-image-slice: 1;
-  transition: opacity 300ms linear;
-}
-:host .border-transition {
-  position: absolute;
-  top: var(--flat-button-border-offset);
-  left: var(--flat-button-border-offset);
-  width: 100%;
-  height: 100%;
-  opacity: var(--flat-button-border-transition-opacity);
-  border: var(--flat-button-border-width) solid transparent;
-}
-
-:host .sheen {
-  position: absolute;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 150%;
-  transform: translateY(-100%);
-  background: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0) 0%,
-    rgba(255, 255, 255, 0.15) 92%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  -webkit-filter: blur(2px);
-}
-:host .bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition: opacity 400ms cubic-bezier(0, 0, 0.33, 1);
-  opacity: var(--flat-button-bg-opacity);
-  background-image: linear-gradient(
-    to bottom,
-    #1e232a 0%,
-    #1e232a 40%,
-    rgba(118, 97, 51, 0.8) 140%
-  );
-}
-:host .intro .border-transition {
-  border-image: linear-gradient(to top, #fff 0%, #fff 33%, #fff 66%, #fff 100%);
-  border-image-slice: 1;
-}
-:host .hover {
-  color: #f0e6d2;
-  animation: 600ms cubic-bezier(0, 0, 0.33, 1) 1 hoverTextShadow;
-}
-:host .hover.disabled {
-  color: var(--flat-button-disabled-color);
-  animation: none;
-}
-:host .hover .border-transition {
-  opacity: 1;
-  border-image: linear-gradient(
-    to top,
-    #c89c3c 0%,
-    #dcc188 50%,
-    #e1c998 71%,
-    #f0e6d8 100%
-  );
-  border-image-slice: 1;
-}
-:host .hover .glow {
-  animation: 600ms cubic-bezier(0, 0, 0.33, 1) 1 hoverGlow;
-}
-
-:host .hover {
-  background: #f0e6d2;
-}
-:host .down {
-  color: #5c5b57;
-  transition: color 100ms linear;
-  animation: none;
-}
-:host .down .bg {
-  opacity: 0;
-}
-:host .down .border-transition {
-  opacity: 1;
-  border-image: linear-gradient(to bottom, #463817 0%, #694f27 100%);
-  border-image-slice: 1;
-}
-:host .down {
-  background: #5c5b57;
-}
-:host .click {
-  color: #e4e1d8;
-  border-image: linear-gradient(to top, #fff 0%, #fff 33%, #fff 66%, #fff 100%);
-  border-image-slice: 1;
-  animation: 130ms linear clickScale 1, 400ms linear 1 hoverTextShadow;
-}
-:host .click .border-transition {
-  border-image: linear-gradient(
-    to top,
-    #c89c3c 0%,
-    #dcc188 50%,
-    #e1c998 71%,
-    #f0e6d8 100%
-  );
-  border-image-slice: 1;
-  transition: opacity 400ms linear;
-  opacity: 1;
-}
-:host .click .glow {
-  animation: 600ms cubic-bezier(0, 0, 0.33, 1) hoverGlow 1;
-}
-:host .click .sheen {
-  animation: 330ms clickSheen 1 linear;
-}
-:host .click .bg {
-  opacity: 1;
-}
-:host .click .flare:before {
-  animation: 400ms cubic-bezier(0, 0, 0.33, 1) 0ms 1 clickFlare;
-}
-
-:host .click {
-  background: #e4e1d8;
-}
-
-:host .disabled {
-  cursor: default;
-  color: var(--flat-button-disabled-color);
-  background: #1e2328;
-  border: 2px solid var(--flat-button-disabled-color);
-  border-image: initial;
-  transition: all 300ms linear;
-}
-:host .disabled:hover {
-  cursor: default;
-  color: var(--flat-button-disabled-color);
-  background: #1e2328;
-  border-color: var(--flat-button-disabled-color);
-  border-image: initial;
-  background-image: initial;
-  animation: none;
-}
-:host .disabled .flare,
-:host .disabled .glow,
-:host .disabled .sheen-wrapper,
-:host .disabled .bg {
-  display: none;
-}
-:host .disabled .border-transition {
-  transition: opacity 300ms linear;
-  opacity: 0;
-}
-:host .disabled .border-idle {
-  opacity: 0;
-}
-:host .disabled {
-  background: var(--flat-button-disabled-color);
-}
-:host .no-min-height {
-  min-height: 0;
-}
-:host .no-padding {
-  padding: 0 0;
-}
-:host .back {
-  background-image: url("/fe/lol-uikit/images/back.png");
-  background-position: center;
-  background-repeat: no-repeat;
-}
-:host .back:hover {
-  background-image: url("/fe/lol-uikit/images/back-hover.png");
-}
-:host .back.disabled,
-:host .back:active {
-  background-image: url("/fe/lol-uikit/images/back-disabled.png");
-}
-.wrapper {
-  min-width: inherit;
-  width: inherit;
-  height: 100%;
-  position: relative;
-}
-.inner {
-  height: var(--flat-button-inner-height);
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .primary:not(.back):not(.disabled) {
-  background: linear-gradient(to bottom, #5a401f 0%, #332717 100%);
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .primary:not(.back):not(.disabled)
-  .bg {
-  background: linear-gradient(to bottom, #604522 0%, #846745 100%);
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .primary:not(.back):not(.disabled).down {
-  color: #785a28;
-  background: linear-gradient(to bottom, #362715 0%, #17130e 100%);
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .primary:not(.back):not(.disabled).down {
-  background: #785a28;
-}
-:host(:not([type="next"]):not([type="purchase"])) .secondary:not(.disabled) {
-  border-width: 1px;
-  text-transform: none;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled).hover
-  .content-wrapper {
-  color: #f0e6d2;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled).click
-  .content-wrapper {
-  color: #e4e1d8;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled).down
-  .content-wrapper {
-  color: #5c5b57;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled)
-  .border-idle {
-  border-width: 1px;
-  top: -1px;
-  left: -1px;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled)
-  .border-transition {
-  border-width: 1px;
-  top: -1px;
-  left: -1px;
-}
-:host(:not([type="next"]):not([type="purchase"]))
-  .secondary:not(.disabled)
-  .content-wrapper {
-  color: #cdbe91;
-}
-:host([type="purchase"]:not([type="next"])) .primary:not(.back):not(.disabled) {
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.3) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-  color: #fde9f8;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled)
-  .bg {
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.3) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled)
-  .border-idle {
-  border-image: linear-gradient(
-    to bottom,
-    rgba(245, 155, 247, 0.8) 0%,
-    rgba(232, 216, 227, 0.8) 0.01%,
-    rgba(237, 153, 239, 0.8) 100%
-  );
-  border-image-slice: 1;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).hover {
-  color: #fde9f8;
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.5) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).hover
-  .bg {
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.5) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).hover.disabled {
-  color: #fde9f8;
-  animation: none;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).hover
-  .border-transition {
-  border-image: linear-gradient(
-    to bottom,
-    #f59bf7 0%,
-    #e8d8e3 0.01%,
-    #ed99ef 100%
-  );
-  border-image-slice: 1;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).disabled {
-  color: #fde9f8;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).down {
-  color: #fde9f8;
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.2) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).down
-  .bg {
-  background: linear-gradient(
-      to bottom,
-      rgba(255, 44, 170, 0.2) 0%,
-      rgba(255, 44, 170, 0) 100%
-    ),
-    #1e2328;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).down
-  .border-transition {
-  border-image: linear-gradient(
-    to bottom,
-    rgba(245, 155, 247, 0.4) 0%,
-    rgba(232, 216, 227, 0.4) 0.01%,
-    rgba(237, 153, 239, 0.4) 100%
-  );
-  border-image-slice: 1;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).down
-  .border-idle {
-  border-image: linear-gradient(
-    to bottom,
-    rgba(245, 155, 247, 0.4) 0%,
-    rgba(232, 216, 227, 0.4) 0.01%,
-    rgba(237, 153, 239, 0.4) 100%
-  );
-  border-image-slice: 1;
-}
-:host([type="purchase"]:not([type="next"]))
-  .primary:not(.back):not(.disabled).down {
-  background: #fde9f8;
-}
-:host([type="next"]) .wrapper .flare,
-:host([type="next"]) .wrapper .glow,
-:host([type="next"]) .wrapper .border-idle,
-:host([type="next"]) .wrapper .border-transition,
-:host([type="next"]) .wrapper .sheen-wrapper,
-:host([type="next"]) .wrapper .bg {
-  display: none;
-}
-:host([type="next"]) .wrapper .inner {
-  -webkit-clip-path: polygon(
-    0% 0%,
-    calc(100% - 17px) 0%,
-    calc(100% - 1px) 50%,
-    calc(100% - 17px) 100%,
-    0% 100%
-  );
-}
-:host([type="next"]) .wrapper .inner {
-  -webkit-clip-path: polygon(
-    0% 0%,
-    calc(100% - 19px) 0%,
-    calc(100% - 4px) 50%,
-    calc(100% - 19px) 100%,
-    0% 100%
-  );
-}
-:host([type="next"]) .wrapper:active .inner {
-  background: linear-gradient(to top, #005a82 0%, #08495f 50%, #0d404c 100%);
-}
-:host([type="next"]) .wrapper:active .inner {
-  color: #005a82;
-}
-:host([type="next"]) .wrapper.disabled .inner {
-  background: var(--flat-button-disabled-color);
-}
-:host([type="next"]) .wrapper.disabled .inner {
-  color: var(--flat-button-disabled-color);
-  background: #1e2328;
-}
-:host([type="next"]) .extra {
-  position: absolute;
-}
-:host([type="next"]):host([box-outline]) .extra {
-  width: 20px;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  border: 2px solid #0a323c;
-  border-left: 0;
-}
-:host([type="next"]):host([box-outline]) .disabled .extra {
-  border: 2px solid #1e2328;
-}
-:host([type="next"]) .inner {
-  position: relative;
-  background: linear-gradient(to top, #005a82 0%, #0596aa 50%, #08b1b2 100%);
-  padding: 2px 0 2px 2px;
-}
-:host([type="next"]) .inner {
-  border: 0;
-  padding-right: 31px;
-  color: #a3c7c7;
-  min-height: 28px;
-  box-shadow: 0 0 1px 0px #010a13, inset 0 0 1px 1px #010a13;
-}
-:host([type="next"]) .inner :hover {
-  color: #cdfafa;
-}
-:host([type="next"]) .inner .click {
-  animation: none;
-}
-:host([type="next"]) .inner:hover {
-  background: linear-gradient(to top, #3097c6 0%, #0ecaba 50%, #cdfafa 100%);
-}

package/temp/button/keyframes.css

@@ -1,63 +0,0 @@
-@keyframes hoverTextShadow {
-  0% {
-    text-shadow: 0 0 4px rgba(240, 230, 216, 1);
-  }
-  50% {
-    text-shadow: 0 0 4px rgba(240, 230, 216, 0.5);
-  }
-  100% {
-    text-shadow: 0 0 4px rgba(240, 230, 216, 0);
-  }
-}
-
-@keyframes hoverGlow {
-  0% {
-    box-shadow: 0px 0px 5px 4px rgba(240, 230, 216, 0.5),
-      0px 0px 2px 1px rgba(240, 230, 216, 0.5) inset;
-  }
-  50% {
-    box-shadow: 0px 0px 5px 4px rgba(240, 230, 216, 0.3),
-      0px 0px 2px 1px rgba(240, 230, 216, 0.3) inset;
-  }
-  100% {
-    box-shadow: 0px 0px 5px 4px rgba(240, 230, 216, 0),
-      0px 0px 2px 1px rgba(240, 230, 216, 0) inset;
-  }
-}
-
-@keyframes clickFlare {
-  0% {
-    opacity: 0;
-  }
-  25% {
-    opacity: 0.6;
-  }
-  50% {
-    opacity: 0.3;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes clickScale {
-  from {
-    transform: scale(0.94);
-  }
-
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes clickSheen {
-  from {
-    transform: translateY(-100%) rotate(0deg);
-  }
-  10% {
-    transform: translateY(-80%) rotate(-5deg);
-  }
-  to {
-    transform: translateY(100%) rotate(0deg);
-  }
-}

package/temp/select/dropdown.css

@@ -1,166 +0,0 @@
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  font-family: var(--font-display);
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  -webkit-user-select: none;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  font-kerning: normal;
-  -webkit-font-feature-settings: "kern" 1;
-  -webkit-font-smoothing: antialiased;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  text-transform: uppercase;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(ko-kr),
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(ja-jp),
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(tr-tr),
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(el-gr),
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(th-th),
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(zh-tw) {
-  text-transform: none;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  text-transform: none;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  color: #f0e6d2;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
-  letter-spacing: 0.075em;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(ar-ae) {
-  letter-spacing: 0;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  letter-spacing: 0.0375em;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(ar-ae) {
-  letter-spacing: 0;
-}
-:host {
-  --dropdown-option-flat-height: 40px;
-  --dropdown-option-flat-font-weight: 700;
-  --dropdown-option-flat-overflow: visible;
-  --dropdown-option-flat-text-overflow: clip;
-  --dropdown-option-flat-white-space: inherit;
-  --dropdown-option-direction-rtl: rtl;
-  --dropdown-option-framed-line-height: 30px;
-  --dropdown-option-framed-white-space: nowrap;
-  --dropdown-option-framed-overflow-wrap: unset;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option {
-  height: var(--dropdown-option-flat-height);
-  font-weight: var(--dropdown-option-flat-font-weight);
-  overflow: var(--dropdown-option-flat-overflow);
-  text-overflow: var(--dropdown-option-flat-text-overflow);
-  white-space: var(--dropdown-option-flat-white-space);
-  color: #cdbe91;
-  cursor: pointer;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-  border-bottom: thin solid #1e2328;
-  padding: 0 10px;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:lang(ar-ae) {
-  padding: 0 10px 0 30px;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option.ui-dropdown-option-disabled {
-  color: #888;
-  cursor: default;
-}
-:host(.flat-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-disabled:hover {
-  color: #888;
-  background-color: rgba(30, 35, 40, 0);
-}
-:host(.flat-dropdown-type) .ui-dropdown-option.ui-dropdown-option-unselectable {
-  border-bottom: none;
-}
-:host(.flat-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-selected::after {
-  background: url(/fe/lol-uikit/dropdown-check.png) center no-repeat;
-  width: 14px;
-  height: 11px;
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translate(0, -50%);
-  content: "";
-}
-:host(.flat-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-selected:lang(ar-ae)::after {
-  right: auto;
-  left: 10px;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:hover {
-  color: #f0e6d2;
-  background-color: #1e2328;
-}
-:host(.flat-dropdown-type) .ui-dropdown-option:active {
-  color: #463714;
-  background-color: rgba(30, 35, 40, 0.5);
-}
-:host(.framed-dropdown-type) .ui-dropdown-option {
-  align-items: center;
-  border-top: thin solid #1f2123;
-  color: #cdbe91;
-  cursor: pointer;
-  display: block;
-  min-height: 30px;
-  line-height: var(--dropdown-option-framed-line-height);
-  margin: 0;
-  overflow: hidden;
-  padding: 2px 9px 2px 7px;
-  position: relative;
-  text-overflow: ellipsis;
-  white-space: var(--dropdown-option-framed-white-space);
-  overflow-wrap: var(--dropdown-option-framed-overflow-wrap);
-}
-:host(.framed-dropdown-type) .ui-dropdown-option:lang(ar-ae) {
-  direction: var(--dropdown-option-direction-rtl);
-}
-:host(.framed-dropdown-type) .ui-dropdown-option.ui-dropdown-option-disabled {
-  color: #888;
-  cursor: default;
-}
-:host(.framed-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-disabled:hover {
-  color: #888;
-  background-color: #1e232800;
-}
-:host(.framed-dropdown-type) .ui-dropdown-option.ui-dropdown-option-selected {
-  padding-right: 31px;
-}
-:host(.framed-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-selected:lang(ar-ae) {
-  padding-right: 7px;
-  padding-left: 31px;
-}
-:host(.framed-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-selected::after {
-  background: url(/fe/lol-uikit/dropdown-check.png) center no-repeat;
-  width: 14px;
-  height: 11px;
-  position: absolute;
-  right: 13px;
-  top: 50%;
-  transform: translate(0, -50%);
-  content: "";
-}
-:host(.framed-dropdown-type)
-  .ui-dropdown-option.ui-dropdown-option-selected:lang(ar-ae)::after {
-  right: auto;
-  left: 13px;
-}
-:host(.framed-dropdown-type) .ui-dropdown-option:hover {
-  color: #f0e6d2;
-  background-color: #1e2328;
-}
-:host(.framed-dropdown-type) .ui-dropdown-option:active {
-  color: #463714;
-  background-color: #1e232880;
-}