@testgorilla/tgo-typing-test 1.0.0 → 2.0.0

package/src/lib/styles/inputs.scss

@@ -0,0 +1,290 @@
+input,
+textarea {
+  outline: none;
+  border: none;
+  border-radius: $--roundness;
+  background: $--sub-alt-color;
+  color: $--text-color;
+  padding: 0.5rem;
+  font-size: 1rem;
+  font-family: $--font;
+  caret-color: $--main-color;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  padding: 0;
+  width: 100%;
+  height: 1rem;
+  border-radius: $--roundness;
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    padding: 0;
+    border: none;
+    width: 25%;
+    height: 1rem;
+    border-radius: $--roundness;
+    background-color: $--main-color;
+    &:hover {
+      cursor: grab;
+    }
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    padding: 0;
+    border: none;
+    width: 25%;
+    height: 1rem;
+    border-radius: $--roundness;
+    background-color: $--main-color;
+    &:hover {
+      cursor: grab;
+    }
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}
+
+input[type="color"] {
+  height: 3px;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+input:disabled,
+textarea:disabled {
+  opacity: 0.33;
+}
+
+::-moz-color-swatch {
+  border: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+/* Change Autocomplete styles in Chrome*/
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  border: none;
+  outline: 2px solid $--main-color;
+  font-family: inherit;
+  -webkit-text-fill-color: $--text-color;
+  -webkit-box-shadow: 0 0 0 1000000px $--sub-alt-color inset;
+  caret-color: $--text-color;
+}
+
+.select2-dropdown {
+  background-color: $--bg-color;
+  color: $--text-color;
+  outline: none;
+}
+.select2-container--default.select2-container--disabled
+  .select2-selection--single {
+  background: $--sub-alt-color !important;
+  opacity: 0.33;
+  cursor: default;
+  pointer-events: none;
+}
+
+.select2-selection {
+  background: $--sub-alt-color;
+  height: fit-content;
+  height: -moz-fit-content;
+  padding: 5px;
+  border-radius: $--roundness;
+  color: $--text-color;
+  font: $--font;
+  border: none;
+  outline: none;
+}
+
+.select2-container--default
+  .select2-selection--single
+  .select2-selection__rendered {
+  color: $--text-color;
+  outline: none;
+}
+
+.select2-container--default
+  .select2-results__option--highlighted.select2-results__option--selectable {
+  background-color: $--text-color;
+  color: $--bg-color;
+}
+
+.select2-container--default .select2-results__option--selected {
+  background-color: $--main-color;
+  color: $--bg-color;
+}
+
+.select2-container--open .select2-dropdown--below,
+.select2-container--open .select2-dropdown--above {
+  border-color: $--sub-alt-color;
+  background: $--bg-color;
+  color: $--sub-color;
+  border-radius: $--roundness;
+}
+
+.select2-container--default .select2-selection--single {
+  color: $--text-color;
+  background: $--sub-alt-color;
+  outline: none;
+  border: none;
+  height: auto;
+  border-radius: $--roundness;
+}
+
+.select2-container--default.select2-container--disabled
+  .select2-selection--single {
+  background: #5051517a;
+}
+
+.select2-selection:focus {
+  height: fit-content;
+  height: -moz-fit-content;
+  padding: 5px;
+  border-radius: $--roundness;
+  color: $--text-color;
+  font: $--font;
+  border: none;
+  outline: none;
+}
+.select2-selection:active {
+  height: fit-content;
+  height: -moz-fit-content;
+  padding: 5px;
+  border-radius: $--roundness;
+  color: $--text-color;
+  font: $--font;
+  border: none;
+  outline: none;
+}
+
+.select2-container--default
+  .select2-selection--single
+  .select2-selection__arrow {
+  height: 35px;
+}
+
+.select2-container--default
+  .select2-selection--single
+  .select2-selection__arrow
+  b {
+  border-color: $--text-color transparent transparent transparent;
+}
+
+.select2-container--default.select2-container--open
+  .select2-selection--single
+  .select2-selection__arrow
+  b {
+  border-color: $--text-color transparent;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border-color: $--sub-alt-color;
+  background: $--bg-color;
+  color: $--text-color;
+  border-radius: $--roundness;
+}
+
+.select2-container--default .select2-results__group {
+  color: $--text-color;
+}
+
+.select2-container--default .select2-selection--multiple {
+  background: $--sub-alt-color;
+  border-radius: $--roundness;
+  color: $--text-color;
+  outline: none;
+  border: none;
+}
+
+.select2-selection__choice__display {
+  color: $--bg-color;
+}
+
+.select2-selection__choice__remove {
+  color: $--main-color !important;
+}
+
+.select2-container .select2-search--inline .select2-search__field {
+  margin: 0;
+  border-radius: 0;
+  font-family: $--font;
+  line-height: 1rem;
+}
+
+.select2-container--default.select2-container--focus
+  .select2-selection--multiple {
+  border: none;
+}
+
+.select2-container--default .select2-selection--multiple {
+  border: none;
+  padding: 0.5rem;
+  font-family: $--font;
+}
+
+.select2-container--default
+  .select2-selection--multiple
+  .select2-selection__choice {
+  background-color: $--main-color;
+  border: none;
+  border-radius: calc($--roundness / 2);
+  box-sizing: border-box;
+  display: inline-block;
+  margin-left: 0;
+  margin-top: 0;
+  margin-right: 0.5rem;
+  padding: 0;
+  padding-left: 1.25rem;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
+.select2-container--default
+  .select2-selection--multiple
+  .select2-selection__choice__remove {
+  line-height: 1.5rem;
+  border-right: 1px solid $--bg-color;
+  color: $--bg-color !important;
+  transition: 0.125s;
+}
+
+.select2-container--default
+  .select2-selection--multiple
+  .select2-selection__choice__remove:hover {
+  background-color: $--text-color;
+}