tgui-core 1.1.11 → 1.1.13

package/lib/styles/components/Button.module.scss

@@ -1,157 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$color-default: colors.bg(colors.$primary) !default;
-$color-disabled: #999999 !default;
-$color-selected: colors.bg(colors.$green) !default;
-$color-caution: colors.bg(colors.$yellow) !default;
-$color-danger: colors.bg(colors.$red) !default;
-$color-transparent-text: rgba(255, 255, 255, 0.5) !default;
-$border-radius: base.$border-radius !default;
-$bg-map: colors.$bg-map !default;
-
-@mixin button-color($color) {
-  // Adapt text color to background luminance to ensure high contast
-  $luminance: luminance($color);
-  $text-color: if($luminance > 0.4, rgba(0, 0, 0, 1), rgba(255, 255, 255, 1));
-
-  transition:
-    color 50ms,
-    background-color 50ms;
-  background-color: $color;
-  color: $text-color;
-
-  &:focus {
-    transition:
-      color 100ms,
-      background-color 100ms;
-  }
-
-  &:hover {
-    background-color: lighten($color, 30%);
-    color: $text-color;
-  }
-}
-
-.button {
-  position: relative;
-  display: inline-block;
-  line-height: 1.667em;
-  padding: 0 0.5em;
-  margin-right: base.em(2px);
-  white-space: nowrap;
-  outline: 0;
-  border-radius: $border-radius;
-  margin-bottom: base.em(2px);
-  // Disable selection in buttons
-  user-select: none;
-  -ms-user-select: none;
-
-  &:last-child {
-    margin-right: 0;
-    margin-bottom: 0;
-  }
-
-  .fa,
-  .fas,
-  .far {
-    margin-left: -0.25em;
-    margin-right: -0.25em;
-    min-width: 1.333em;
-    text-align: center;
-  }
-}
-
-.dropdown {
-  line-height: base.em(16px);
-  height: base.em(22px);
-  padding: 0.2rem 0.5rem;
-}
-
-.ellipsis {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.fluid {
-  display: block;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.circular {
-  border-radius: 50%;
-}
-
-.compact {
-  padding: 0 0.25em;
-  line-height: 1.333em;
-}
-
-@each $color-name, $color-value in $bg-map {
-  .color__#{$color-name} {
-    @include button-color($color-value);
-  }
-}
-
-.color__default {
-  @include button-color($color-default);
-}
-
-.color__caution {
-  @include button-color($color-caution);
-}
-
-.color__danger {
-  @include button-color($color-danger);
-}
-
-.color__transparent {
-  @include button-color(base.$color-bg);
-  background-color: rgba(base.$color-bg, 0);
-  color: $color-transparent-text;
-}
-
-.disabled {
-  background-color: $color-disabled !important;
-}
-
-.selected {
-  @include button-color($color-selected);
-}
-
-.flex {
-  display: inline-flex; //Inline even for fluid
-  flex-direction: column;
-}
-
-.flex__fluid {
-  width: 100%;
-}
-
-.verticalAlignContent__top {
-  justify-content: flex-start;
-}
-
-.verticalAlignContent__middle {
-  justify-content: center;
-}
-
-.verticalAlignContent__bottom {
-  justify-content: flex-end;
-}
-
-.content {
-  display: block;
-  align-self: stretch;
-}
-
-.textMargin {
-  margin-left: 0.4rem;
-}

package/lib/styles/components/Button.module.scss.d.ts

@@ -1,46 +0,0 @@
-declare const classNames: {
-  readonly button: "button";
-  readonly circular: "circular";
-  readonly color__average: "color__average";
-  readonly color__bad: "color__bad";
-  readonly color__black: "color__black";
-  readonly color__blue: "color__blue";
-  readonly color__brown: "color__brown";
-  readonly color__caution: "color__caution";
-  readonly color__danger: "color__danger";
-  readonly color__default: "color__default";
-  readonly color__good: "color__good";
-  readonly color__green: "color__green";
-  readonly color__grey: "color__grey";
-  readonly color__label: "color__label";
-  readonly "color__light-grey": "color__light-grey";
-  readonly color__olive: "color__olive";
-  readonly color__orange: "color__orange";
-  readonly color__pink: "color__pink";
-  readonly color__purple: "color__purple";
-  readonly color__red: "color__red";
-  readonly color__teal: "color__teal";
-  readonly color__transparent: "color__transparent";
-  readonly color__violet: "color__violet";
-  readonly color__white: "color__white";
-  readonly color__yellow: "color__yellow";
-  readonly compact: "compact";
-  readonly content: "content";
-  readonly disabled: "disabled";
-  readonly dropdown: "dropdown";
-  readonly ellipsis: "ellipsis";
-  readonly fa: "fa";
-  readonly far: "far";
-  readonly fas: "fas";
-  readonly flex: "flex";
-  readonly flex__fluid: "flex__fluid";
-  readonly fluid: "fluid";
-  readonly hasContent: "hasContent";
-  readonly iconPosition__right: "iconPosition__right";
-  readonly selected: "selected";
-  readonly textMargin: "textMargin";
-  readonly verticalAlignContent__bottom: "verticalAlignContent__bottom";
-  readonly verticalAlignContent__middle: "verticalAlignContent__middle";
-  readonly verticalAlignContent__top: "verticalAlignContent__top";
-};
-export = classNames;

package/lib/styles/components/ColorBox.module.scss

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.colorBox {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  line-height: 1em;
-  text-align: center;
-}

package/lib/styles/components/ColorBox.module.scss.d.ts

@@ -1,4 +0,0 @@
-declare const classNames: {
-  readonly colorBox: "colorBox";
-};
-export = classNames;

package/lib/styles/components/Dialog.module.scss

@@ -1,60 +0,0 @@
-@use '../base';
-
-$background-color: base.$color-bg !default;
-
-.dialog {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.content {
-  background-color: $background-color;
-  font-family: Consolas, monospace;
-  font-size: base.em(14px);
-  display: flex;
-  flex-direction: column;
-}
-
-.header {
-  display: flex;
-  height: 2em;
-  line-height: 1.928em;
-  background-color: rgba(0, 0, 0, 0.5);
-  user-select: none;
-}
-
-.title {
-  display: inline;
-  font-style: italic;
-  margin-left: 1rem;
-  margin-right: 2rem;
-  flex-grow: 1;
-  opacity: 0.33;
-}
-
-.body {
-  margin: 2rem 1rem 2rem 1rem;
-  flex-grow: 1;
-}
-
-.footer {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-.button {
-  margin: 0 1rem 0 1rem;
-  height: 2rem;
-  min-width: 6rem;
-  text-align: center;
-}

package/lib/styles/components/Dialog.module.scss.d.ts

@@ -1,10 +0,0 @@
-declare const classNames: {
-  readonly body: "body";
-  readonly button: "button";
-  readonly content: "content";
-  readonly dialog: "dialog";
-  readonly footer: "footer";
-  readonly header: "header";
-  readonly title: "title";
-};
-export = classNames;

package/lib/styles/components/Dimmer.module.scss

@@ -1,22 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-$background-dimness: 0.75 !default;
-
-.dimmer {
-  // Align everything in the middle.
-  // A fat middle finger for anything less than IE11.
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  // Fill positioned parent
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  // Dim everything around it
-  background-color: rgba(0, 0, 0, $background-dimness);
-  z-index: 1;
-}

package/lib/styles/components/Dimmer.module.scss.d.ts

@@ -1,4 +0,0 @@
-declare const classNames: {
-  readonly dimmer: "dimmer";
-};
-export = classNames;

package/lib/styles/components/Divider.module.scss

@@ -1,27 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-$color: rgba(255, 255, 255, 0.1) !default;
-$thickness: base.em(2px) !default;
-$spacing: 0.5em;
-
-.horizontal {
-  margin: $spacing 0;
-
-  &:not(.hidden) {
-    border-top: $thickness solid $color;
-  }
-}
-
-.vertical {
-  height: 100%;
-  margin: 0 $spacing;
-
-  &:not(.hidden) {
-    border-left: $thickness solid $color;
-  }
-}

package/lib/styles/components/Divider.module.scss.d.ts

@@ -1,6 +0,0 @@
-declare const classNames: {
-  readonly hidden: "hidden";
-  readonly horizontal: "horizontal";
-  readonly vertical: "vertical";
-};
-export = classNames;

package/lib/styles/components/Dropdown.scss

@@ -1,72 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-
-.Dropdown {
-  display: flex;
-  align-items: flex-start;
-}
-
-.Dropdown__control {
-  flex: 1;
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  overflow: hidden;
-  user-select: none;
-  width: base.em(100px);
-}
-
-.Dropdown__arrow-button {
-  float: right;
-  padding-left: 0.35em;
-  width: 1.2em;
-  border-left: base.em(1px) solid rgba(0, 0, 0, 0.25);
-}
-
-.Dropdown__menu {
-  overflow-y: auto;
-  align-items: center;
-  max-height: base.em(200px);
-  border-radius: 0 0 base.em(2px) base.em(2px);
-  color: #fff;
-  background-color: #000;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.Dropdown__menu-scroll {
-  overflow-y: scroll;
-}
-
-.Dropdown__menuentry {
-  padding: base.em(2px) base.em(4px);
-  font-family: Verdana, sans-serif;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  transition: background-color 100ms ease-out;
-
-  &.selected {
-    background-color: rgba(255, 255, 255, 0.5) !important;
-    transition: background-color 0ms;
-  }
-
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.2);
-    transition: background-color 0ms;
-  }
-}
-
-.Dropdown__over {
-  top: auto;
-  bottom: 100%;
-}
-
-.Dropdown__selected-text {
-  display: inline-block;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  height: base.em(17px);
-  width: calc(100% - 1.2em);
-}

package/lib/styles/components/Flex.module.scss

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-.flex {
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.inline {
-  display: inline-flex;
-}

package/lib/styles/components/Flex.module.scss.d.ts

@@ -1,5 +0,0 @@
-declare const classNames: {
-  readonly flex: "flex";
-  readonly inline: "inline";
-};
-export = classNames;

package/lib/styles/components/Icon.module.scss

@@ -1,25 +0,0 @@
-/**
- * @file
- * @copyright 2020
- * @author ThePotato97 (https://github.com/ThePotato97)
- * @license ISC
- */
-
-.iconStack > .icon {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-}
-
-.iconStack {
-  position: relative;
-  display: inline-block;
-  height: 1.2em;
-  line-height: 2em;
-  vertical-align: middle;
-
-  &:after {
-    color: transparent;
-    content: '.';
-  }
-}

package/lib/styles/components/Icon.module.scss.d.ts

@@ -1,5 +0,0 @@
-declare const classNames: {
-  readonly icon: 'icon';
-  readonly iconStack: 'iconStack';
-};
-export = classNames;

package/lib/styles/components/Input.module.scss

@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../functions.scss' as *;
-@use '../input.scss';
-
-.input {
-  position: relative;
-  display: inline-block;
-  width: base.em(120px);
-  border: base.em(1px) solid input.$border-color;
-  border: base.em(1px) solid rgba(input.$border-color, 0.75);
-  border-radius: input.$border-radius;
-  color: input.$text-color;
-  background-color: input.$background-color;
-  padding: 0 base.em(4px);
-  margin-right: base.em(2px);
-  line-height: base.em(17px);
-  overflow: visible;
-}
-
-.fluid {
-  display: block;
-  width: auto;
-}
-
-.baseline {
-  display: inline-block;
-  color: transparent;
-}
-
-.inner {
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 0;
-  outline: 0;
-  width: 100%;
-  font-size: base.em(12px);
-  line-height: base.em(17px);
-  height: base.em(17px);
-  margin: 0;
-  padding: 0 0.5em;
-  font-family: Verdana, sans-serif;
-  background-color: transparent;
-  color: input.$text-color;
-  color: inherit;
-
-  &:-ms-input-placeholder {
-    font-style: italic;
-    color: #777;
-    color: rgba(255, 255, 255, 0.45);
-  }
-}
-
-.monospace .inner {
-  font-family: 'Consolas', monospace;
-}

package/lib/styles/components/Input.module.scss.d.ts

@@ -1,8 +0,0 @@
-declare const classNames: {
-  readonly baseline: 'baseline';
-  readonly fluid: 'fluid';
-  readonly inner: 'inner';
-  readonly input: 'input';
-  readonly monospace: 'monospace';
-};
-export = classNames;

package/lib/styles/components/Knob.module.scss

@@ -1,131 +0,0 @@
-/**
- * Copyright (c) 2020 Aleksej Komarov
- * SPDX-License-Identifier: MIT
- */
-
-@use '../base.scss';
-@use '../colors.scss';
-@use '../functions.scss' as *;
-
-$bg-map: colors.$bg-map !default;
-$fg-map: colors.$fg-map !default;
-$ring-color: #6a96c9 !default;
-$knob-color: #333333 !default;
-$popup-background-color: #000000 !default;
-$popup-text-color: #ffffff !default;
-
-$inner-padding: 0.1em;
-
-.knob {
-  position: relative;
-  font-size: 1rem;
-  width: 2.6em;
-  height: 2.6em;
-  margin: 0 auto;
-  margin-bottom: -0.2em;
-  cursor: n-resize;
-
-  // Adjusts a baseline in a way, that makes knob middle-aligned
-  // when it flows with the text.
-  &:after {
-    content: '.';
-    color: transparent;
-    line-height: 2.5em;
-  }
-}
-
-.circle {
-  position: absolute;
-  top: $inner-padding;
-  bottom: $inner-padding;
-  left: $inner-padding;
-  right: $inner-padding;
-  margin: 0.3em;
-  background-color: $knob-color;
-  background-image: linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0) 100%
-  );
-  border-radius: 50%;
-  box-shadow: 0 0.05em 0.5em 0 rgba(0, 0, 0, 0.5);
-}
-
-.cursorBox {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.cursor {
-  position: relative;
-  top: 0.05em;
-  margin: 0 auto;
-  width: 0.2em;
-  height: 0.8em;
-  background-color: rgba(255, 255, 255, 0.9);
-}
-
-.popupValue {
-  position: absolute;
-  top: -2rem;
-  right: 50%;
-  font-size: 1rem;
-  text-align: center;
-  padding: 0.25rem 0.5rem;
-  color: $popup-text-color;
-  background-color: $popup-background-color;
-  transform: translateX(50%);
-  white-space: nowrap;
-}
-
-.ring {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: $inner-padding;
-}
-
-$pi: 3.1416;
-
-.ringTrackPivot {
-  transform: rotateZ(135deg);
-}
-
-.ringTrack {
-  // transform-origin: 50% 50%;
-  fill: transparent;
-  stroke: rgba(255, 255, 255, 0.1);
-  stroke-width: 8;
-  stroke-linecap: round;
-  stroke-dasharray: 75 * $pi;
-}
-
-.ringFillPivot {
-  transform: rotateZ(135deg);
-}
-
-.bipolar .ringFillPivot {
-  transform: rotateZ(270deg);
-}
-
-.ringFill {
-  fill: transparent;
-  stroke: $ring-color;
-  stroke-width: 8;
-  stroke-linecap: round;
-  stroke-dasharray: 100 * $pi;
-  transition: stroke 50ms ease-out;
-}
-
-@each $color-name, $color-value in $fg-map {
-  .color__#{$color-name} {
-    .ringFill {
-      stroke: $color-value;
-    }
-  }
-}