@bagelink/vue 0.0.302 → 0.0.304

package/src/styles/theme.css

@@ -4,611 +4,322 @@
 @import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 :root {
-  --bgl-primary: #2e5bff;
-  --bgl-primary-tint: #2e5bff80;
-  --bgl-primary-light: #eef6ff;
-  --bgl-blue-20: rgba(46, 91, 255, 20%);
-  --bgl-blue-dark: #191c30;
-  --bgl-blue-light: #eef6ff;
-  --bgl-black: #282929;
-  --bgl-black-tint: #28292980;
-  --bgl-white: #fff;
-  --bgl-gray: #b7b7b7;
-  --bgl-gray-light: #f5f8fa;
-  --bgl-gray-80: #e8ecef;
-  --bgl-gray-20: rgba(183, 183, 183, 0.2);
-  --bgl-pink: #f1416c;
-  --bgl-red: #ed6c6f;
-  --bgl-red-tint: #fbe2e2;
-  --bgl-yellow: #ffbb00;
-  --bgl-yellow-light: #fff6d5;
-  --bgl-green: #75c98f;
-  --border-color: #00000020;
-  --bgl-bg: #f4f6fa;
-  --bgl-shadow: #4c577d26;
-  --whatsapp-gray: #89959f;
-  --whatsapp-green: #e0fcd6;
-  --whatsapp-blue: #71bce6;
-  --input-border-radius: 7px;
-  --card-border-radius: 15px;
-  --placeholder-color: #00000040;
-  --label-color: #00000080;
-  --label-font-size: 12px;
-  --input-bg: #f5f8fa;
-  --input-color: #000000;
-  --input-height: 40px;
-  --input-font-size: 14px;
-  --btn-border-radius: 10px;
-  --btn-padding: 30px;
-  --btn-height: 40px;
-  --bgl-transition: all 200ms ease;
-  --bgl-hover-filter: brightness(90%);
-  --bgl-active-filter: brightness(70%);
-  --bgl-font: "Lexend", "Ploni", sans-serif;
+    --bgl-primary: #2e5bff;
+    --bgl-primary-tint: #2e5bff80;
+    --bgl-primary-light: #eef6ff;
+    --bgl-blue-20: rgba(46, 91, 255, 20%);
+    --bgl-blue-dark: #191c30;
+    --bgl-blue-light: #eef6ff;
+    --bgl-black: #282929;
+    --bgl-black-tint: #28292980;
+    --bgl-white: #fff;
+    --bgl-gray: #b7b7b7;
+    --bgl-gray-light: #f5f8fa;
+    --bgl-gray-80: #e8ecef;
+    --bgl-gray-20: rgba(183, 183, 183, 0.2);
+    --bgl-pink: #f1416c;
+    --bgl-red: #ed6c6f;
+    --bgl-red-tint: #fbe2e2;
+    --bgl-yellow: #ffbb00;
+    --bgl-yellow-light: #fff6d5;
+    --bgl-green: #75c98f;
+    --border-color: #00000020;
+    --bgl-bg: #f4f6fa;
+    --bgl-shadow: #4c577d26;
+    --whatsapp-gray: #89959f;
+    --whatsapp-green: #e0fcd6;
+    --whatsapp-blue: #71bce6;
+    --input-border-radius: 7px;
+    --card-border-radius: 15px;
+    --placeholder-color: #00000040;
+    --label-color: #00000080;
+    --label-font-size: 12px;
+    --input-bg: #f5f8fa;
+    --input-color: #000000;
+    --input-height: 40px;
+    --input-font-size: 14px;
+    --btn-border-radius: 10px;
+    --btn-padding: 30px;
+    --btn-height: 40px;
+    --bgl-transition: all 200ms ease;
+    --bgl-hover-filter: brightness(90%);
+    --bgl-active-filter: brightness(70%);
+    --bgl-font: "Lexend", "Ploni", sans-serif;
 }
 
 .Vue-Toastification__toast {
-  border-radius: var(--card-border-radius);
-  box-shadow: none;
+    border-radius: var(--card-border-radius);
+    box-shadow: none;
 }
 
 .Vue-Toastification__toast--default {
-  background: var(--bgl-primary);
+    background: var(--bgl-primary);
 }
 
 .Vue-Toastification__close-button {
-  height: 1rem;
-  line-height: 1rem;
+    height: 1rem;
+    line-height: 1rem;
 }
 
 ::-moz-selection {
-  color: var(--bgl-white);
-  background: var(--bgl-blue-dark);
+    color: var(--bgl-white);
+    background: var(--bgl-blue-dark);
 }
 
 ::selection {
-  color: var(--bgl-white);
-  background: var(--bgl-blue-dark);
+    color: var(--bgl-white);
+    background: var(--bgl-blue-dark);
 }
 
-.top-title {
-  font-weight: 600;
-  font-size: 20px;
-}
 
-.page-top {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.modal-title {
-  text-align: center;
-  font-weight: 600;
-  font-size: 20px;
-  margin-top: 0.5rem;
-  margin-bottom: 0 !important;
-  width: 100%;
-  -webkit-padding-end: 40px;
-  padding-inline-end: 40px;
-  line-height: 2;
-  display: -webkit-box;
-  max-width: 100%;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.modal-footer {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.modal-footer>div {
-  gap: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-.display-block {
-  display: block;
-}
-
-.card {
-  border-radius: var(--card-border-radius);
-  background: var(--bgl-white);
-  padding: 2rem 2rem;
-}
-
-.card.gray {
-  background: var(--bgl-gray-20);
-}
-
-.card.border {
-  border: 1px solid var(--border-color);
-  background-color: transparent;
-}
-
-.card.thin {
-  padding: 1rem 1rem;
-}
-
-.login-card h3 {
-  font-size: 1.4rem;
-}
-
-.login-card .bagel-input input {
-  min-width: calc(var(--input-height) * 2);
-}
-
-.login-card .loader-wrapper {
-  width: 100%;
-  margin-top: 1rem;
-}
-
-.login-card .bgl_btn {
-  width: 100%;
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
-}
-
-.login-card .forgot-password {
-  margin: -5px 0 10px;
-  color: var(--bgl-black);
-  text-decoration: none;
-}
-
-.login-card .forgot-password:active {
-  -webkit-filter: brightness(70%);
-  filter: brightness(70%);
-  color: var(--bgl-primary);
-}
-
-.login-card .error {
-  color: var(--bgl-red);
-  font-size: 0.8rem;
-  margin-top: -0.75rem;
-  margin-bottom: 0.75rem;
-}
 
 .popup {
-  border-radius: 15px;
-  background: var(--bgl-white);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-  padding: 2rem;
-  min-width: 300px;
-  text-align: center;
+    border-radius: 15px;
+    background: var(--bgl-white);
+    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+    padding: 2rem;
+    min-width: 300px;
+    text-align: center;
 }
 
 .tabs {
-  -moz-column-gap: 1rem;
-  column-gap: 1rem;
-  margin-top: 20px;
-  margin-bottom: -2rem;
-  border-top: 1px solid var(--border-color);
-  width: calc(100% + 4rem);
-  -webkit-margin-start: -2rem;
-  margin-inline-start: -2rem;
-  -webkit-padding-start: 2rem;
-  padding-inline-start: 2rem;
-  overflow: auto;
-  display: flex;
-}
-
-.card.thin .tabs {
-  margin-bottom: 1rem;
-}
-
-.card .card.tabs-top {
-  padding: 0;
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+    margin-top: 20px;
+    margin-bottom: -2rem;
+    border-top: 1px solid var(--border-color);
+    width: calc(100% + 4rem);
+    -webkit-margin-start: -2rem;
+    margin-inline-start: -2rem;
+    -webkit-padding-start: 2rem;
+    padding-inline-start: 2rem;
+    overflow: auto;
+    display: flex;
 }
 
 .tab {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 2.5;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  border-bottom: 2px solid transparent;
-  padding: 0 5px;
-  white-space: nowrap;
-  text-decoration: none;
-  color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.5;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    border-bottom: 2px solid transparent;
+    padding: 0 5px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
 }
 
 .tab.active {
-  color: var(--bgl-primary);
-  border-bottom: 2px solid var(--bgl-primary);
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
 }
 
 .tab:hover {
-  color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .tab:active {
-  -webkit-filter: brightness(70%);
-  filter: brightness(70%);
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
 }
 
 .router-tab {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 2.5;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  border-bottom: 2px solid transparent;
-  padding: 0 5px;
-  white-space: nowrap;
-  text-decoration: none;
-  color: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 2.5;
+    cursor: pointer;
+    transition: var(--bgl-transition);
+    border-bottom: 2px solid transparent;
+    padding: 0 5px;
+    white-space: nowrap;
+    text-decoration: none;
+    color: inherit;
 }
 
 .router-tab.router-link-active {
-  color: var(--bgl-primary);
-  border-bottom: 2px solid var(--bgl-primary);
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
 }
 
 .router-tab:hover {
-  color: var(--bgl-primary);
+    color: var(--bgl-primary);
 }
 
 .router-tab:active {
-  -webkit-filter: brightness(70%);
-  filter: brightness(70%);
-}
-
-.pill {
-  border-radius: 10px;
-  padding: 4px 8px;
-  font-size: 10px;
-  background: var(--bgl-gray-light);
-  white-space: nowrap;
-  display: inline;
-}
-
-.pill.blue {
-  background: var(--bgl-blue-light);
-  color: var(--bgl-primary);
-}
-
-.pill.red {
-  background-color: var(--bgl-red-tint);
-  color: var(--bgl-red);
-}
-
-.hide {
-  display: none;
-}
-
-.pill.green {
-  background-color: var(--bgl-green);
-  color: var(--bgl-white);
-}
-
-.pill.orange {
-  background-color: var(--bgl-yellow);
-  color: var(--bgl-black);
-}
-
-.block {
-  display: block;
-  width: 100%;
-}
-
-.pill.yellow {
-  background-color: var(--bgl-yellow);
-}
-
-.pill.Paid,
-.pill.Active {
-  background-color: var(--bgl-green);
-  color: white;
-}
-
-.pill.Error {
-  background-color: var(--bgl-red-tint);
-  color: var(--bgl-red);
-}
-
-.list-item {
-  padding: 0.5rem 1rem;
-  min-height: -webkit-fit-content;
-  min-height: -moz-fit-content;
-  min-height: fit-content;
-  margin: 0.25rem 0;
-  border-radius: 10px;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  color: var(--bgl-black);
-  text-decoration: none;
-  position: relative;
-}
-
-.list-item::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -0.25rem;
-  border-bottom: 1px solid var(--border-color);
-}
-
-.list-item:hover,
-.list-item.router-link-active {
-  background-color: var(--bgl-blue-light);
-}
-
-.list-item:active {
-  -webkit-filter: var(--bgl-hover-filter);
-  filter: var(--bgl-hover-filter);
+    -webkit-filter: brightness(70%);
+    filter: brightness(70%);
 }
 
 .entity-container {
-  display: grid;
-  height: 100%;
-  /* grid-template-columns: 2fr 0fr; */
-  grid-template-columns: minmax(300px, 1fr) 3fr;
-  grid-gap: 1rem;
-  -moz-column-gap: 1rem;
-  column-gap: 1rem;
-  grid-template-rows: 1fr;
-  grid-template-areas: "list-view detail-view";
-  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
-    -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-  transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    display: grid;
+    height: 100%;
+    grid-template-columns: minmax(300px, 1fr) 3fr;
+    grid-gap: 1rem;
+    -moz-column-gap: 1rem;
+    column-gap: 1rem;
+    grid-template-rows: 1fr;
+    grid-template-areas: "list-view detail-view";
+    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
+        -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+    transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
 .detail-main {
-  overflow-y: auto;
+    overflow-y: auto;
 }
 
 .content-row p {
-  margin: 0 0 10px 0;
+    margin: 0 0 10px 0;
 }
 
 .id {
-  color: var(--bgl-gray);
-  font-size: 9px;
+    color: var(--bgl-gray);
+    font-size: 9px;
 }
 
 .field {
-  --field-count: 1;
-  --width: calc(100% / var(--field-count));
-  grid-auto-columns: minmax(var(--width), var(--width));
-  font-size: 10px;
-  text-align: z;
-}
-
-.card.BagelTable {
-  height: 100%;
-  overflow: auto;
-  padding-top: 0;
+    --field-count: 1;
+    --width: calc(100% / var(--field-count));
+    grid-auto-columns: minmax(var(--width), var(--width));
+    font-size: 10px;
+    text-align: z;
 }
 
 .detail-view-inner {
-  display: grid;
-  height: 100%;
-  overflow: hidden;
-  grid-template-rows: -webkit-max-content 1fr;
-  grid-template-rows: max-content 1fr;
-  gap: 1rem;
+    display: grid;
+    height: 100%;
+    overflow: hidden;
+    grid-template-rows: -webkit-max-content 1fr;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
 }
 
 .detail-view-inner-wrap {
-  height: 100%;
-  overflow: hidden;
-  transition: var(--bgl-transition);
+    height: 100%;
+    overflow: hidden;
+    transition: var(--bgl-transition);
 }
 
 .table-list-wrap {
-  overflow: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.list-logo {
-  width: 50px;
-  aspect-ratio: 1;
-  -o-object-fit: contain;
-  object-fit: contain;
-  line-height: 1;
-}
-
-.list-content {
-  grid-auto-rows: -webkit-max-content;
-  grid-auto-rows: max-content;
-  overflow-y: auto;
-}
-
-.DonationsDashbored {
-  position: relative;
-}
-
-.DonationsDashbored .list-content {
-  overflow-y: visible !important;
-}
-
-.DonationsDashbored .tabs-top {
-  position: -webkit-sticky;
-  position: sticky;
-  padding-top: 1rem;
-  inset-inline-start: 0;
-}
-
-.DonationsDashbored .tabs {
-  border-bottom: 1px solid var(--border-color);
-  border-top: none;
+    overflow: auto;
 }
 
 .copy-url {
-  background-color: var(--bgl-gray-light);
-  border-radius: var(--btn-border-radius);
-  padding: 0.5rem 1rem;
-  align-items: center;
-  justify-content: flex-start;
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: space-between;
+    background-color: var(--bgl-gray-light);
+    border-radius: var(--btn-border-radius);
+    padding: 0.5rem 1rem;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: space-between;
 }
 
 .copy-url a {
-  margin: 0;
-  font-size: 12px;
-  opacity: 0.8;
-  color: var(--bgl-black);
-  word-break: break-all;
+    margin: 0;
+    font-size: 12px;
+    opacity: 0.8;
+    color: var(--bgl-black);
+    word-break: break-all;
 }
 
 .list-view {
-  grid-area: list-view;
-  grid-template-areas: "list-header""list-content";
-  grid-template-columns: 1fr;
-  overflow-y: auto;
-  grid-template-rows: -webkit-max-content 1fr;
-  grid-template-rows: max-content 1fr;
-  transition: var(--transition);
+    grid-area: list-view;
+    grid-template-areas: "list-header""list-content";
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+    grid-template-rows: -webkit-max-content 1fr;
+    grid-template-rows: max-content 1fr;
+    transition: var(--transition);
 }
 
 .shekel {
-  line-height: 0;
-}
-
-.slide-fade-enter-active {
-  transition: all 0.15s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.15s ease-in;
-}
-
-.slide-fade-enter-from {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-.slide-fade-leave-to {
-  transform: translateX(-20px);
-  opacity: 0;
-}
-
-.grid>* {
-  min-height: 0;
+    line-height: 0;
 }
 
 .view-wrapper {
-  height: 100%;
-  position: relative;
-  overflow: hidden;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
 }
 
 @media screen and (max-width: 1000px) {
-  .entity-container {
-    grid-template-columns: minmax(22vw, 1fr) 2fr;
-  }
+    .entity-container {
+        grid-template-columns: minmax(22vw, 1fr) 2fr;
+    }
 }
 
 @media screen and (max-width: 910px) {
-  .tab {
-    font-size: 12px;
-  }
-
-  .entity-container {
-    grid-template-columns: 1fr;
-    gap: 0;
-  }
-
-  .detail-view-inner {
-    border-radius: var(--card-border-radius);
-    background: var(--bgl-white);
-  }
-
-  .detail-view-inner-wrap {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    background: var(--bgl-bg);
-  }
-
-  .detail-view-inner-wrap.card {
-    background: var(--bgl-white);
-  }
-
-  .list-item {
-    padding: 0.5rem;
-  }
-
-  .card {
-    padding: 1rem 1rem;
-  }
-
-  .tabs {
-    -moz-column-gap: 10px;
-    column-gap: 10px;
-    margin-top: 10px;
-    margin-bottom: -15px;
-    box-sizing: border-box;
-    -webkit-margin-start: -1rem;
-    margin-inline-start: -1rem;
-    -webkit-padding-start: 1rem;
-    padding-inline-start: 1rem;
-    max-width: calc(100vw - 2rem);
-  }
-
-  .login-card {
-    width: 94%;
-    max-width: 400px;
-  }
-
-  .login-card .bagel-input.wider input {
-    min-width: 220px;
-  }
-
-  .popup {
-    border-radius: 15px;
-    background: var(--bgl-white);
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-    padding: 2rem;
-    min-width: 0;
-    max-width: 90%;
-    max-height: 90vh;
-    overflow-x: auto;
-    text-align: center;
-  }
-
-  .detail-main {
-    overflow-y: unset;
-  }
-
-  .detail-section {
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-
-  .field {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  .top-title {
-    font-size: 1.25em;
-    margin-bottom: 1rem;
-    font-weight: 400;
-    -webkit-margin-start: 0.5rem;
-    margin-inline-start: 0.5rem;
-  }
+    .tab {
+        font-size: 12px;
+    }
+
+    .entity-container {
+        grid-template-columns: 1fr;
+        gap: 0;
+    }
+
+    .detail-view-inner {
+        border-radius: var(--card-border-radius);
+        background: var(--bgl-white);
+    }
+
+    .detail-view-inner-wrap {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: var(--bgl-bg);
+    }
+
+    .detail-view-inner-wrap.bgl_card {
+        background: var(--bgl-white);
+    }
+
+    .bgl_card {
+        padding: 1rem 1rem;
+    }
+
+    .tabs {
+        -moz-column-gap: 10px;
+        column-gap: 10px;
+        margin-top: 10px;
+        margin-bottom: -15px;
+        box-sizing: border-box;
+        -webkit-margin-start: -1rem;
+        margin-inline-start: -1rem;
+        -webkit-padding-start: 1rem;
+        padding-inline-start: 1rem;
+        max-width: calc(100vw - 2rem);
+    }
+
+    .popup {
+        border-radius: 15px;
+        background: var(--bgl-white);
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+        padding: 2rem;
+        min-width: 0;
+        max-width: 90%;
+        max-height: 90vh;
+        overflow-x: auto;
+        text-align: center;
+    }
+
+    .detail-main {
+        overflow-y: unset;
+    }
+
+    .detail-section {
+        height: -webkit-fit-content;
+        height: -moz-fit-content;
+        height: fit-content;
+    }
+
+    .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
 }