@bagelink/vue 0.0.158 → 0.0.162

package/src/styles/inputs.css

@@ -12,16 +12,25 @@ select {
     text-align: start;
     margin-bottom: 0.5rem;
     width: 100%;
+    color: var(--bgl-black);
 }
 
-.bagel-input label {
+.bagel-input::placeholder .bagel-input label {
     display: block;
     font-size: var(--input-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
-    color: var(--input-color);
 }
 
+.bagel-input::placeholder {
+    color: var(--placeholder-color);
+}
+
+.bagel-input label {
+    color: var(--label-color);
+}
+
+
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {
@@ -42,6 +51,13 @@ select {
     width: 100%;
 }
 
+.bagel-input input::placeholder,
+.bagel-input textarea::placeholder,
+.bagel-input select::placeholder,
+.custom-select .input::placeholder {
+    color: var(--placeholder-color);
+}
+
 .bagel-input.search-wrap {
     display: flex;
     flex-direction: row;
@@ -84,11 +100,7 @@ select {
 }
 
 .bagel-input:focus-within label {
-    color: var(--bgl-blue);
-}
-
-.bagel-input:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .bagel-input select.no-edit,
@@ -105,7 +117,7 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 label.active {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .inline-80 {
@@ -130,7 +142,7 @@ label.active {
 }
 
 button.formkit-input {
-    background: var(--bgl-blue);
+    background: var(--bgl-primary);
     color: var(--bgl-white);
     border: none;
     padding: 0 1.5rem;
@@ -182,7 +194,7 @@ button.formkit-input:active {
     font-size: var(--input-font-size);
     margin-bottom: 2px;
     line-height: 1.3;
-    color: var(--input-color);
+    color: var(--label-color);
 }
 
 .formkit-outer input,
@@ -256,11 +268,11 @@ button.formkit-input:active {
 }
 
 .formkit-outer:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .formkit-outer:focus-within label {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .formkit-outer select.no-edit,
@@ -277,7 +289,7 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 label.active {
-    color: var(--bgl-blue);
+    color: var(--bgl-primary);
 }
 
 .label-count-0 label {
@@ -297,6 +309,38 @@ label.active {
     display: none;
 }
 
+input[type="color"] {
+    padding: 0.025rem 0.05rem;
+    display: block;
+    width: var(--input-height);
+    height: var(--input-height);
+    border: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+}
+
+input[type="color"]::-webkit-color-swatch {
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-moz-color-swatch {
+    border-radius: var(--input-border-radius);
+    border: none;
+    transition: box-shadow 200ms ease;
+}
+
+input[type="color"]::-webkit-color-swatch:hover {
+    box-shadow: inset 0 0 10px #00000050;
+}
+
+input[type="color"]::-moz-color-swatch:hover {
+    box-shadow: inset 0 0 10px #00000050;
+}
+
 @media screen and (max-width: 910px) {
     .bagel-input.wider input {
         min-width: 120px;

package/src/styles/layout.css

@@ -61,6 +61,10 @@
     grid-auto-flow: column;
 }
 
+.grid-2-col {
+    grid-template-columns: 1fr 1fr;
+}
+
 .justify-content-between {
     justify-content: space-between;
 }
@@ -265,4 +269,43 @@
 
 .me-3 {
     margin-inline-end: 1rem;
+}
+
+.pb-1 {
+    padding-bottom: 1rem;
+}
+
+.pb-2 {
+    padding-bottom: 2rem;
+}
+
+.pt-1 {
+    padding-top: 1rem;
+}
+
+.pt-2 {
+    padding-top: 2rem;
+}
+
+
+.flex {
+    display: flex;
+    align-items: center;
+}
+
+.flex-stretch {
+    display: flex;
+    align-items: stretch;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
+}
+
+.flex-end {
+    justify-content: flex-end;
+}
+
+.space-between {
+    justify-content: space-between;
 }

package/src/styles/text.css

@@ -7,29 +7,102 @@ h6 {
     width: max-content;
 }
 
-h1 {
+h1 {}
+
+h2 {}
+
+h3 {}
+
+h4 {}
+
+h5 {}
+
+h6 {}
+
+.txt-center {
+    text-align: center;
 }
 
-h2 {
+
+.smalltxt {
+    font-size: 12px;
 }
 
-h3 {
+
+.txt20 {
+    font-size: 20px;
 }
 
-h4 {
+.txt18 {
+    font-size: 18px;
 }
 
-h5 {
+.txt16 {
+    font-size: 16px;
 }
 
-h6 {
+.txt14 {
+    font-size: 14px;
 }
 
-.txt-center {
-    text-align: center;
+.txt12 {
+    font-size: 12px;
 }
 
+.txt10 {
+    font-size: 10px;
+}
 
-.smalltxt {
-    font-size: 12px;
+.txt9 {
+    font-size: 9px;
 }
+
+.no-margin {
+    margin: 0;
+}
+
+.txtgray {
+    color: var(--bgl-gray);
+}
+
+.txtblue {
+    color: var(--bgl-primary);
+}
+
+.font-light {
+    font-weight: 100;
+}
+
+.bold {
+    font-weight: 700;
+}
+
+.ellipsis {
+    overflow: hidden;
+    display: block;
+    width: 100%;
+    text-overflow: ellipsis;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.icon-font {
+    font-family: "Material Symbols Outlined", serif;
+}
+
+
+@media screen and (max-width: 910px) {
+    .txt20 {
+        font-size: 18px;
+    }
+
+    .txt16 {
+        font-size: 14px;
+    }
+
+    .txt14 {
+        font-size: 12px;
+    }
+}

package/src/styles/theme.css

@@ -3,26 +3,28 @@
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
+
 :root {
-  --bgl-blue: #19b8ea;
-  --bgl-blue-tint: #19b8ea80;
+  --bgl-primary: #2E5BFF;
+  --bgl-primary-tint: #2E5BFF80;
+
   --bgl-blue-20: rgba(46, 91, 255, 20%);
   --bgl-blue-dark: #191c30;
-  --bgl-red: #ed6c6f;
-  --bgl-red-tint: #fbe2e2;
-  --bgl-yellow: #ffbb00;
-  --bgl-yellow-light: #fff6d5;
+  --bgl-blue-light: #eef6ff;
+  --bgl-black: #282929;
+  --bgl-black-tint: #28292980;
   --bgl-white: #fff;
-  --bgl-pink: #f1416c;
   --bgl-gray: #b7b7b7;
   --bgl-gray-light: #f5f8fa;
   --bgl-gray-80: #e8ecef;
   --bgl-gray-20: rgba(183, 183, 183, 0.2);
-  --bgl-blue-light: #eef6ff;
+  --bgl-pink: #f1416c;
+  --bgl-red: #ed6c6f;
+  --bgl-red-tint: #fbe2e2;
+  --bgl-yellow: #ffbb00;
+  --bgl-yellow-light: #fff6d5;
   --bgl-green: #75c98f;
   --border-color: #eff2f5;
-  --bgl-black: #282929;
-  --bgl-black-tint: #28292980;
   --bgl-bg: #f4f6fa;
   --bgl-shadow: #4c577d26;
   --whatsapp-gray: #89959f;
@@ -33,7 +35,9 @@
   --btn-border-radius: 10px;
   --btn-padding: 30px;
   --input-bg: #f5f8fa;
-  --input-color: #00000080;
+  --label-color: #00000080;
+  --input-color: #000000;
+  --placeholder-color: #00000040;
   --input-height: 40px;
   --btn-height: 40px;
   --input-font-size: 12px;
@@ -43,7 +47,6 @@
   --bgl-font: "Lexend", "Ploni", sans-serif;
 }
 
-[theme="dark"] {}
 
 .Vue-Toastification__toast {
   border-radius: var(--card-border-radius);
@@ -51,7 +54,7 @@
 }
 
 .Vue-Toastification__toast--default {
-  background: var(--bgl-blue);
+  background: var(--bgl-primary);
 }
 
 .Vue-Toastification__close-button {
@@ -153,14 +156,9 @@ body {
   margin-top: 1rem;
 }
 
-.btn.thin {
-  height: calc(var(--btn-height) * 0.7);
-  line-height: calc(var(--btn-height) * 0.7);
-}
-
 .login-card .btn {
   width: 100%;
-  background: var(--bgl-blue);
+  background: var(--bgl-primary);
   color: var(--bgl-white);
 }
 
@@ -172,7 +170,7 @@ body {
 
 .login-card .forgot-password:active {
   filter: brightness(70%);
-  color: var(--bgl-blue);
+  color: var(--bgl-primary);
 }
 
 .login-card .error {
@@ -191,10 +189,6 @@ body {
   text-align: center;
 }
 
-.icon-font {
-  font-family: "Material Symbols Outlined", serif;
-}
-
 .tabs {
   column-gap: 1rem;
   margin-top: 20px;
@@ -211,10 +205,6 @@ body {
   margin-bottom: 1rem;
 }
 
-.card>.card {
-  /* padding: 0; */
-}
-
 .card .card.tabs-top {
   padding: 0;
 }
@@ -233,12 +223,12 @@ body {
 }
 
 .tab.active {
-  color: var(--bgl-blue);
-  border-bottom: 2px solid var(--bgl-blue);
+  color: var(--bgl-primary);
+  border-bottom: 2px solid var(--bgl-primary);
 }
 
 .tab:hover {
-  color: var(--bgl-blue);
+  color: var(--bgl-primary);
 }
 
 .tab:active {
@@ -259,12 +249,12 @@ body {
 }
 
 .router-tab.router-link-active {
-  color: var(--bgl-blue);
-  border-bottom: 2px solid var(--bgl-blue);
+  color: var(--bgl-primary);
+  border-bottom: 2px solid var(--bgl-primary);
 }
 
 .router-tab:hover {
-  color: var(--bgl-blue);
+  color: var(--bgl-primary);
 }
 
 .router-tab:active {
@@ -282,7 +272,7 @@ body {
 
 .pill.blue {
   background: var(--bgl-blue-light);
-  color: var(--bgl-blue);
+  color: var(--bgl-primary);
 }
 
 .pill.red {
@@ -367,34 +357,12 @@ body {
   transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
-.flex {
-  display: flex;
-  align-items: center;
-}
-
-.flex-stretch {
-  display: flex;
-  align-items: stretch;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
 .FormRow {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 1rem;
 }
 
-.flex-end {
-  justify-content: flex-end;
-}
-
-.space-between {
-  justify-content: space-between;
-}
-
 .detail-main {
   overflow-y: auto;
 }
@@ -403,42 +371,6 @@ body {
   margin: 0 0 10px 0;
 }
 
-.txt20 {
-  font-size: 20px;
-}
-
-.txt16 {
-  font-size: 16px;
-}
-
-.txt14 {
-  font-size: 14px;
-}
-
-.txt12 {
-  font-size: 12px;
-}
-
-.txt9 {
-  font-size: 9px;
-}
-
-.no-margin {
-  margin: 0;
-}
-
-.txtgray {
-  color: var(--bgl-gray);
-}
-
-.txtblue {
-  color: var(--bgl-blue);
-}
-
-.font-light {
-  font-weight: 100;
-}
-
 .id {
   color: var(--bgl-gray);
   font-size: 9px;
@@ -518,10 +450,6 @@ body {
   inset-inline-start: 0;
 }
 
-/* [dir="rtl"] .DonationsDashbored .tabs-top {
-  inset-inline-start: 8vw;
-} */
-
 .copy-url {
   background-color: var(--bgl-gray-light);
   border-radius: var(--btn-border-radius);
@@ -531,7 +459,6 @@ body {
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
-  /* gap: 1rem; */
 }
 
 .copy-url a {
@@ -583,52 +510,8 @@ body {
   overflow: hidden;
 }
 
-input[type="color"] {
-  padding: 0.025rem 0.05rem;
-  display: block;
-  width: var(--input-height);
-  height: var(--input-height);
-  border: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: pointer;
-}
-
-input[type="color"]::-webkit-color-swatch {
-  border-radius: var(--input-border-radius);
-  border: none;
-  transition: box-shadow 200ms ease;
-}
-
-input[type="color"]::-moz-color-swatch {
-  border-radius: var(--input-border-radius);
-  border: none;
-  transition: box-shadow 200ms ease;
-}
-
-input[type="color"]::-webkit-color-swatch:hover {
-  box-shadow: inset 0 0 10px #00000050;
-}
-
-input[type="color"]::-moz-color-swatch:hover {
-  box-shadow: inset 0 0 10px #00000050;
-}
-
-.ellipsis {
-  overflow: hidden;
-  display: block;
-  width: 100%;
-  text-overflow: ellipsis;
-}
 
 @media screen and (max-width: 1000px) {
-  :root {
-    /* --input-font-size: 16px;
---input-height: 46px;
---btn-height: 46px; */
-  }
-
   .entity-container {
     grid-template-columns: minmax(22vw, 1fr) 2fr;
   }
@@ -679,7 +562,6 @@ input[type="color"]::-moz-color-swatch:hover {
   }
 
   .login-card {
-    /* padding: 1rem 2.3rem; */
     width: 94%;
     max-width: 400px;
   }
@@ -721,16 +603,4 @@ input[type="color"]::-moz-color-swatch:hover {
     font-weight: 400;
     margin-inline-start: 0.5rem;
   }
-
-  .txt20 {
-    font-size: 18px;
-  }
-
-  .txt16 {
-    font-size: 14px;
-  }
-
-  .txt14 {
-    font-size: 12px;
-  }
 }