coles-solid-library 0.0.1

package/dist/styles.css

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