@lolmath/ui 1.0.1

package/temp/button/button.css

@@ -0,0 +1,503 @@
+: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

@@ -0,0 +1,63 @@
+@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

@@ -0,0 +1,166 @@
+: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;
+}