coles-solid-library 0.0.1 → 0.0.8

package/dist/styles.css

@@ -1,752 +0,0 @@
-@charset "UTF-8";
-.menuButtons {
-  list-style: none;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-.menuButtons li {
-  margin: var(--spacing-1) 0;
-}
-.menuButtons svg {
-  width: 90%;
-  height: 90%;
-}
-
-.menuButton {
-  width: 100%;
-  height: 75%;
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-1);
-}
-.menuButton:hover {
-  cursor: pointer;
-}
-.menuButton:hover link {
-  background-color: var(--tertiary-color);
-}
-
-.customButtonStyle {
-  border-radius: var(--border-radius-lg);
-  padding: calc(var(--spacing-1) / 2) calc(var(--spacing-1));
-  border: none;
-  transition: transform 0.2s ease, background 0.2s ease;
-}
-.customButtonStyle:active {
-  transform: scale(0.9);
-  box-shadow: var(--shadow-elevation-2);
-}
-.customButtonStyle:not(:disabled):hover {
-  cursor: pointer;
-  box-shadow: var(--shadow-elevation-3);
-}
-.customButtonStyle:disabled:hover {
-  cursor: not-allowed;
-}
-
-.primary {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.primary:hover {
-  background-color: var(--primary-color-hover);
-}
-.primary:active {
-  background-color: var(--primary-color-active);
-}
-
-.accent {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.accent:hover {
-  background-color: var(--secondary-color-hover);
-}
-.accent:active {
-  background-color: var(--secondary-color-active);
-}
-
-.tertiary {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.tertiary:hover {
-  background-color: var(--tertiary-color-hover);
-}
-.tertiary:active {
-  background-color: var(--tertiary-color-active);
-}
-
-.transparent {
-  background-color: inherit !important;
-  color: inherit !important;
-  border: none;
-  outline: none;
-  padding: 0px;
-  margin: 0px;
-}
-
-.chipbar {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
-.chipContainer {
-  display: flex;
-  flex-direction: row;
-  overflow-x: hidden;
-  max-width: 88%;
-  scroll-behavior: smooth;
-  margin: 0px auto;
-}
-.chipContainer button {
-  width: max-content;
-  padding: 5px;
-}
-
-.leftArrow {
-  margin-right: 10px;
-  align-self: flex-start;
-  margin: auto 0px;
-}
-
-.rightArrow {
-  margin-left: 10px;
-  align-self: flex-end;
-  margin: auto 0px;
-}
-
-.Chip {
-  display: flex;
-  flex-direction: row;
-  padding: 5px 10px;
-  margin: 0 5px;
-  border-radius: 15px;
-  height: min-content;
-  width: max-content;
-  min-width: min-content;
-  margin: 5px;
-}
-.Chip :nth-child(n) {
-  margin: 0px 2px;
-  height: min-content;
-}
-.Chip button {
-  font-size: 1rem !important;
-  height: min-content;
-}
-
-.removeChipButton {
-  margin: 0 !important;
-  margin-left: 5px !important;
-  padding: 0 !important;
-  font-size: 1rem !important;
-}
-
-.compBody {
-  width: 70%;
-  margin: 0 auto;
-  border-radius: 15px;
-  padding: 8px;
-  padding-top: 0px;
-}
-@media screen and (max-width: 768px) {
-  .compBody {
-    width: 95%;
-    margin: 0 auto;
-  }
-}
-
-/* Container and control (trigger) */
-.solid-select {
-  position: relative;
-  display: inline-block;
-  width: max-content;
-  height: max-content;
-  margin-right: calc(var(--spacing-1) * 1.5);
-  text-align: left;
-}
-
-.solid-select__control {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: calc(var(--spacing-1) * 0.5) var(--spacing-1);
-  border-radius: var(--border-radius-md);
-  cursor: pointer;
-}
-.solid-select__control .solid-select__value {
-  flex-grow: 1;
-}
-.solid-select__control .solid-select__arrow {
-  float: right;
-}
-
-.solid-select__control:hover {
-  border-color: #999;
-}
-
-/* Placeholder text style */
-.solid-select__placeholder {
-  color: #888;
-}
-
-/* Dropdown arrow icon */
-.solid-select__arrow {
-  font-size: 0.7em;
-  margin-left: 8px;
-}
-
-/* Dropdown menu */
-.solid-select__dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 90000;
-  width: fit-content !important;
-  min-height: var(--spacing-4);
-  max-height: 200px;
-  overflow-y: auto;
-  border: 1px solid #ccc;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-.solid-select__dropdown .solid-select__option {
-  width: fit-content;
-}
-.solid-select__dropdown .solid-select__option .option-label {
-  width: fit-content;
-}
-.solid-select__dropdown .solid-select__option:hover {
-  cursor: pointer;
-}
-
-.solid-select__transparent {
-  background-color: transparent;
-  color: var(--on-background-color);
-}
-
-.solid-select__primary {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.solid-select__primary .solid-select__option {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.solid-select__primary .solid-select__option:hover {
-  background: var(--primary-color-dark);
-}
-.solid-select__primary .solid-select__option.selected {
-  background: var(--primary-color-dark);
-}
-
-.solid-select__primary_dropdown {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.solid-select__primary_dropdown .solid-select__option {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.solid-select__primary_dropdown .solid-select__option:hover {
-  background: var(--primary-color-dark);
-}
-.solid-select__primary_dropdown .solid-select__option.selected {
-  background: var(--primary-color-dark);
-}
-
-.solid-select__accent {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.solid-select__accent .solid-select__option {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.solid-select__accent .solid-select__option:hover {
-  background: var(--secondary-color-dark);
-}
-.solid-select__accent .solid-select__option.selected {
-  background: var(--secondary-color-dark);
-}
-
-.solid-select__accent_dropdown {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.solid-select__accent_dropdown .solid-select__option {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.solid-select__accent_dropdown .solid-select__option:hover {
-  background: var(--secondary-color-dark);
-}
-.solid-select__accent_dropdown .solid-select__option.selected {
-  background: var(--secondary-color-dark);
-}
-
-.solid-select__tertiary {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.solid-select__tertiary .solid-select__option {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.solid-select__tertiary .solid-select__option:hover {
-  background: var(--tertiary-color-dark);
-}
-.solid-select__tertiary .solid-select__option.selected {
-  background: var(--tertiary-color-dark);
-}
-
-.solid-select__tertiary_dropdown {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.solid-select__tertiary_dropdown .solid-select__option {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.solid-select__tertiary_dropdown .solid-select__option:hover {
-  background: var(--tertiary-color-dark);
-}
-.solid-select__tertiary_dropdown .solid-select__option.selected {
-  background: var(--tertiary-color-dark);
-}
-
-/* Option items */
-.solid-select__option {
-  padding: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  min-height: var(--spacing-4);
-}
-
-/* Selected option styling */
-.solid-select__option.selected {
-  font-weight: bold;
-}
-
-/* Checkmark before option label */
-.solid-select__option .checkmark {
-  display: inline-block;
-  width: 1.2em; /* reserve space for the checkmark */
-  margin-right: 4px;
-  text-align: center;
-}
-
-.formField {
-  display: inline-block;
-  border-radius: var(--border-radius-md);
-  box-sizing: border-box;
-  width: 100%;
-}
-.formField label {
-  position: relative;
-  top: -0.5rem;
-  padding-right: 10px;
-}
-.formField:has(textarea) {
-  position: relative;
-  margin-top: var(--spacing-1);
-  margin-bottom: var(--spacing-1);
-}
-.formField:has(textarea) textarea {
-  width: auto;
-  min-width: 95%;
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  padding-right: var(--spacing-3);
-  padding-bottom: var(--spacing-1);
-  border: none;
-}
-.formField:has(textarea) textarea:focus {
-  outline: none;
-}
-.formField:has(textarea) legend {
-  height: var(--spacing-3);
-  position: absolute;
-  top: calc(var(--spacing-2) * -1);
-  left: var(--spacing-1);
-  transition: all 0.2s ease;
-}
-.formField:has(input[type=text]) {
-  height: calc(var(--spacing-4) + var(--spacing-1));
-  position: relative;
-  margin-top: var(--spacing-2);
-  margin-bottom: var(--spacing-2);
-}
-.formField:has(input[type=text]) legend {
-  height: var(--spacing-3);
-  position: absolute;
-  top: calc(var(--spacing-2) * -1);
-  left: var(--spacing-1);
-  transition: all 0.2s ease;
-}
-.formField:has(input[type=text]) input[type=text] {
-  background-color: transparent !important;
-  height: calc(var(--spacing-4) + var(--spacing-1) - var(--spacing-3));
-  border-radius: var(--border-radius-sm);
-  margin: auto 0px;
-  margin-top: var(--spacing-1);
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  width: auto;
-  min-width: 95%;
-}
-.formField:has(input[type=text]) input[type=text]::placeholder {
-  opacity: 0.75;
-}
-@media screen and (max-width: 768px) {
-  .formField {
-    max-width: 75%;
-  }
-}
-
-.primary {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.primary:has(input[type=text]) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--primary-color) 40%);
-}
-.primary:has(input[type=text]) input[type=text] {
-  color: var(--on-primary-color);
-}
-.primary:has(textarea) {
-  width: 100%;
-  height: auto;
-}
-.primary:has(textarea) textarea {
-  background-color: var(--primary-color);
-  color: var(--on-primary-color);
-}
-.primary:has(textarea) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--primary-color) 40%);
-}
-
-.accent {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.accent:has(input[type=text]) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color) 40%);
-}
-.accent:has(input[type=text]) input[type=text] {
-  color: var(--on-secondary-color);
-}
-.accent:has(textarea) textarea {
-  background-color: var(--secondary-color);
-  color: var(--on-secondary-color);
-}
-.accent:has(textarea) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--secondary-color) 40%);
-}
-
-.tertiary {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.tertiary:has(input[type=text]) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color) 40%);
-}
-.tertiary:has(input[type=text]) input[type=text] {
-  color: var(--on-tertiary-color);
-}
-.tertiary:has(textarea) textarea {
-  background-color: var(--tertiary-color);
-  color: var(--on-tertiary-color);
-}
-.tertiary:has(textarea) legend {
-  background: linear-gradient(to bottom, transparent 60%, var(--tertiary-color) 40%);
-}
-
-.moveLegendInside {
-  display: none;
-}
-
-.checkboxPadding {
-  padding: 0px;
-  padding-bottom: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.input {
-  width: 100%;
-  max-width: 400px;
-  border-radius: var(--border-radius-lg);
-  font-size: var(--font-size-base);
-}
-@media screen and (max-width: 768px) {
-  .input {
-    width: 100%;
-    max-width: 100%;
-  }
-}
-.input[type=checkbox] {
-  width: min-content;
-  -webkit-appearance: none;
-  border: 1px solid #cacece;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
-  padding: var(--spacing-1);
-  border-radius: var(--border-radius-sm);
-  display: inline-block;
-  position: relative;
-}
-.input[type=checkbox]:checked {
-  background-color: inherit;
-  border: 1px solid #adb8c0;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
-  color: inherit;
-}
-.input[type=checkbox]:checked:after {
-  content: "✔";
-  position: absolute;
-  top: -15%;
-  left: 15%;
-  width: 10px;
-  height: 10px;
-  border-radius: 10%;
-}
-.input:focus {
-  outline: none;
-}
-.input.error {
-  border: 1px solid var(--warn-color);
-}
-.input.success {
-  border: 1px solid green;
-}
-.input.warning {
-  border: 1px solid orange;
-}
-.input.info {
-  border: 1px solid blue;
-}
-.input.disabled {
-  border: 1px solid gray;
-}
-
-.checkbox {
-  cursor: pointer;
-}
-
-.transparent {
-  background-color: inherit !important;
-  opacity: 1;
-  color: inherit !important;
-  border: none;
-}
-.transparent :focus {
-  outline: none;
-}
-
-.snack {
-  position: fixed;
-  bottom: 10px;
-  left: 45vw;
-  right: 45vw;
-  border-radius: 15px;
-  margin: 0;
-  padding: 0;
-  z-index: 9999;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  max-width: 10vw;
-  padding: 5px;
-}
-@media screen and (max-width: 768px) {
-  .snack {
-    left: 8vw;
-    right: 8vw;
-    bottom: 20vh;
-    max-width: 70vw;
-  }
-}
-.snack span {
-  flex-grow: 1;
-  margin: auto 0;
-  text-wrap: wrap;
-}
-.snack button {
-  margin: auto 0;
-}
-
-.error {
-  border: 2px solid red;
-  border-color: red;
-  color: red;
-  font-weight: bold;
-}
-
-.success {
-  border-color: #4caf50;
-  border: 2px solid #4caf50;
-  color: #4caf50;
-}
-
-.warning {
-  border-color: #ff9800;
-  border: 2px solid #ff9800;
-  color: #ff9800;
-}
-
-.open {
-  animation: slideIn 0.5s forwards;
-}
-
-.close {
-  animation: slideOut 0.5s forwards;
-}
-
-.tabs {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.singleTabs {
-  display: flex;
-  flex-direction: row;
-  border-radius: 10px;
-  border-bottom: 1px solid white;
-}
-
-.tabHeader {
-  display: flex;
-  flex-direction: row;
-  max-width: 88%;
-  scroll-behavior: smooth;
-  overflow: hidden;
-  font-size: 1rem;
-  padding: 0;
-  float: left;
-}
-@media screen and (max-width: 768px) {
-  .tabHeader {
-    margin: 0px auto;
-    max-width: 100%;
-  }
-}
-.tabHeader :first-child {
-  border-left: none;
-}
-.tabHeader span {
-  height: inherit;
-  padding: 10px 20px;
-  border-left: 1px solid white;
-}
-@media screen and (max-width: 768px) {
-  .tabHeader span {
-    padding-bottom: 0px;
-  }
-}
-
-.tabBody {
-  width: 100%;
-  height: 100%;
-  border-radius: 10px;
-  padding: 5px;
-}
-
-.leftArrow {
-  margin-right: 10px;
-  align-self: flex-start;
-  margin: auto 0px;
-}
-
-.rightArrow {
-  margin-left: 10px;
-  align-self: flex-end;
-  margin: auto 0px;
-}
-
-.transparent {
-  background: inherit;
-}
-
-.header {
-  width: 100%;
-  max-width: 100%;
-  border-bottom: 1px solid;
-  display: flex;
-  flex-direction: row;
-  border-radius: 10px;
-  box-shadow: inset 1px 1px 5px 1px;
-  height: min-content;
-  text-wrap: wrap;
-}
-.header :first-child {
-  flex-grow: 1;
-}
-.header :last-child {
-  align-self: flex-end;
-  padding: 10px;
-}
-.header button {
-  height: min-content;
-  background: none;
-}
-.header button svg {
-  height: 50%;
-}
-
-.body {
-  border-radius: 10px;
-  width: 100%;
-  max-width: 100%;
-}
-.body :nth-child(n) {
-  text-wrap: wrap !important;
-}
-
-.totalPanel {
-  max-width: 100%;
-  display: flex !important;
-  flex-direction: column !important;
-  border: 1px solid;
-  border-radius: 10px;
-  padding: 1rem;
-}
-
-.areaStyle {
-  padding: 0.5rem;
-  margin-right: 5px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  width: 98%;
-  height: 100%;
-  resize: none;
-}
-@media screen and (max-width: 768px) {
-  .areaStyle {
-    width: 90%;
-  }
-}
-
-.picButton {
-  padding: 3px 8px !important;
-  background-color: transparent;
-  border-top: 1px solid white;
-  border-bottom: 1px solid white;
-}
-
-.transparent {
-  background-color: transparent;
-  border: none;
-  color: white;
-  padding: 0.5rem;
-  width: inherit;
-  height: 100%;
-  resize: none;
-}
-.transparent:focus {
-  outline: none;
-  border: none;
-}