@bagelink/vue 0.0.439 → 0.0.447

package/src/styles/appearance.css

@@ -86,6 +86,311 @@
     pointer-events: all;
 }
 
+.bg-white {
+    background: var(--bgl-white) !important;
+}
+
+.color-white {
+    color: var(--bgl-white) !important;
+}
+
+.bg-primary {
+    background: var(--bgl-primary) !important;
+}
+
+.color-primary {
+    color: var(--bgl-primary) !important;
+}
+
+.bg-primary-tint {
+    background: var(--bgl-primary-tint) !important;
+}
+
+.color-primary-tint {
+    color: var(--bgl-primary-tint) !important;
+}
+
+.bg-primary-light {
+    background: var(--bgl-primary-light) !important;
+}
+
+.color-primary-light {
+    color: var(--bgl-primary-light) !important;
+}
+
+.bg-blue-20 {
+    background: var(--bgl-blue-20) !important;
+}
+
+.color-blue-20 {
+    color: var(--bgl-blue-20) !important;
+}
+
+.bg-blue-dark {
+    background: var(--bgl-blue-dark) !important;
+}
+
+.color-blue-dark {
+    color: var(--bgl-blue-dark) !important;
+}
+
+.bg-blue-light {
+    background: var(--bgl-blue-light) !important;
+}
+
+.color-blue-light {
+    color: var(--bgl-blue-light) !important;
+}
+
+.bg-black {
+    background: var(--bgl-black) !important;
+}
+
+.color-black {
+    color: var(--bgl-black) !important;
+}
+
+.bg-black-tint {
+    background: var(--bgl-black-tint) !important;
+}
+
+.color-black-tint {
+    color: var(--bgl-black-tint) !important;
+}
+
+.bg-gray {
+    background: var(--bgl-gray) !important;
+}
+
+.color-gray {
+    color: var(--bgl-gray) !important;
+}
+
+.bg-gray-light {
+    background: var(--bgl-gray-light) !important;
+}
+
+.color-gray-light {
+    color: var(--bgl-gray-light) !important;
+}
+
+.bg-gray-80 {
+    background: var(--bgl-gray-80) !important;
+}
+
+.color-gray-80 {
+    color: var(--bgl-gray-80) !important;
+}
+
+.bg-gray-20 {
+    background: var(--bgl-gray-20) !important;
+}
+
+.color-gray-20 {
+    color: var(--bgl-gray-20) !important;
+}
+
+.bg-pink {
+    background: var(--bgl-pink) !important;
+}
+
+.color-pink {
+    color: var(--bgl-pink) !important;
+}
+
+.bg-red {
+    background: var(--bgl-red) !important;
+}
+
+.color-red {
+    color: var(--bgl-red) !important;
+}
+
+.bg-red-tint {
+    background: var(--bgl-red-tint) !important;
+}
+
+.color-red-tint {
+    color: var(--bgl-red-tint) !important;
+}
+
+.bg-yellow {
+    background: var(--bgl-yellow) !important;
+}
+
+.color-yellow {
+    color: var(--bgl-yellow) !important;
+}
+
+.bg-yellow-light {
+    background: var(--bgl-yellow-light) !important;
+}
+
+.color-yellow-light {
+    color: var(--bgl-yellow-light) !important;
+}
+
+.bg-green {
+    background: var(--bgl-green) !important;
+}
+
+.color-green {
+    color: var(--bgl-green) !important;
+}
+
+.bg-input-white input {
+    background: var(--bgl-white) !important;
+}
+
+.color-input-white input {
+    color: var(--bgl-white) !important;
+}
+
+.bg-input-primary input {
+    background: var(--bgl-primary) !important;
+}
+
+.color-input-primary input {
+    color: var(--bgl-primary) !important;
+}
+
+.bg-input-primary-tint input {
+    background: var(--bgl-primary-tint) !important;
+}
+
+.color-input-primary-tint input {
+    color: var(--bgl-primary-tint) !important;
+}
+
+.bg-input-primary-light input {
+    background: var(--bgl-primary-light) !important;
+}
+
+.color-input-primary-light input {
+    color: var(--bgl-primary-light) !important;
+}
+
+.bg-input-blue-20 input {
+    background: var(--bgl-blue-20) !important;
+}
+
+.color-input-blue-20 input {
+    color: var(--bgl-blue-20) !important;
+}
+
+.bg-input-blue-dark input {
+    background: var(--bgl-blue-dark) !important;
+}
+
+.color-input-blue-dark input {
+    color: var(--bgl-blue-dark) !important;
+}
+
+.bg-input-blue-light input {
+    background: var(--bgl-blue-light) !important;
+}
+
+.color-input-blue-light input {
+    color: var(--bgl-blue-light) !important;
+}
+
+.bg-input-black input {
+    background: var(--bgl-black) !important;
+}
+
+.color-input-black input {
+    color: var(--bgl-black) !important;
+}
+
+.bg-input-black-tint input {
+    background: var(--bgl-black-tint) !important;
+}
+
+.color-input-black-tint input {
+    color: var(--bgl-black-tint) !important;
+}
+
+.bg-input-gray input {
+    background: var(--bgl-gray) !important;
+}
+
+.color-input-gray input {
+    color: var(--bgl-gray) !important;
+}
+
+.bg-input-gray-light input {
+    background: var(--bgl-gray-light) !important;
+}
+
+.color-input-gray-light input {
+    color: var(--bgl-gray-light) !important;
+}
+
+.bg-input-gray-80 input {
+    background: var(--bgl-gray-80) !important;
+}
+
+.color-input-gray-80 input {
+    color: var(--bgl-gray-80) !important;
+}
+
+.bg-input-gray-20 input {
+    background: var(--bgl-gray-20) !important;
+}
+
+.color-input-gray-20 input {
+    color: var(--bgl-gray-20) !important;
+}
+
+.bg-input-pink input {
+    background: var(--bgl-pink) !important;
+}
+
+.color-input-pink input {
+    color: var(--bgl-pink) !important;
+}
+
+.bg-input-red input {
+    background: var(--bgl-red) !important;
+}
+
+.color-input-red input {
+    color: var(--bgl-red) !important;
+}
+
+.bg-input-red-tint input {
+    background: var(--bgl-red-tint) !important;
+}
+
+.color-input-red-tint input {
+    color: var(--bgl-red-tint) !important;
+}
+
+.bg-input-yellow input {
+    background: var(--bgl-yellow) !important;
+}
+
+.color-input-yellow input {
+    color: var(--bgl-yellow) !important;
+}
+
+.bg-input-yellow-light input {
+    background: var(--bgl-yellow-light) !important;
+}
+
+.color-input-yellow-light input {
+    color: var(--bgl-yellow-light) !important;
+}
+
+.bg-input-green input {
+    background: var(--bgl-green) !important;
+}
+
+.color-input-green input {
+    color: var(--bgl-green) !important;
+}
+
+
 
 @media screen and (max-width: 910px) {
     .m_opacity-1 {
@@ -171,4 +476,309 @@
     .m_pointer-events-all {
         pointer-events: all;
     }
+
+
+    .m_bg-white {
+        background: var(--bgl-white) !important;
+    }
+
+    .m_color-white {
+        color: var(--bgl-white) !important;
+    }
+
+    .m_bg-primary {
+        background: var(--bgl-primary) !important;
+    }
+
+    .m_color-primary {
+        color: var(--bgl-primary) !important;
+    }
+
+    .m_bg-primary-tint {
+        background: var(--bgl-primary-tint) !important;
+    }
+
+    .m_color-primary-tint {
+        color: var(--bgl-primary-tint) !important;
+    }
+
+    .m_bg-primary-light {
+        background: var(--bgl-primary-light) !important;
+    }
+
+    .m_color-primary-light {
+        color: var(--bgl-primary-light) !important;
+    }
+
+    .m_bg-blue-20 {
+        background: var(--bgl-blue-20) !important;
+    }
+
+    .m_color-blue-20 {
+        color: var(--bgl-blue-20) !important;
+    }
+
+    .m_bg-blue-dark {
+        background: var(--bgl-blue-dark) !important;
+    }
+
+    .m_color-blue-dark {
+        color: var(--bgl-blue-dark) !important;
+    }
+
+    .m_bg-blue-light {
+        background: var(--bgl-blue-light) !important;
+    }
+
+    .m_color-blue-light {
+        color: var(--bgl-blue-light) !important;
+    }
+
+    .m_bg-black {
+        background: var(--bgl-black) !important;
+    }
+
+    .m_color-black {
+        color: var(--bgl-black) !important;
+    }
+
+    .m_bg-black-tint {
+        background: var(--bgl-black-tint) !important;
+    }
+
+    .m_color-black-tint {
+        color: var(--bgl-black-tint) !important;
+    }
+
+    .m_bg-gray {
+        background: var(--bgl-gray) !important;
+    }
+
+    .m_color-gray {
+        color: var(--bgl-gray) !important;
+    }
+
+    .m_bg-gray-light {
+        background: var(--bgl-gray-light) !important;
+    }
+
+    .m_color-gray-light {
+        color: var(--bgl-gray-light) !important;
+    }
+
+    .m_bg-gray-80 {
+        background: var(--bgl-gray-80) !important;
+    }
+
+    .m_color-gray-80 {
+        color: var(--bgl-gray-80) !important;
+    }
+
+    .m_bg-gray-20 {
+        background: var(--bgl-gray-20) !important;
+    }
+
+    .m_color-gray-20 {
+        color: var(--bgl-gray-20) !important;
+    }
+
+    .m_bg-pink {
+        background: var(--bgl-pink) !important;
+    }
+
+    .m_color-pink {
+        color: var(--bgl-pink) !important;
+    }
+
+    .m_bg-red {
+        background: var(--bgl-red) !important;
+    }
+
+    .m_color-red {
+        color: var(--bgl-red) !important;
+    }
+
+    .m_bg-red-tint {
+        background: var(--bgl-red-tint) !important;
+    }
+
+    .m_color-red-tint {
+        color: var(--bgl-red-tint) !important;
+    }
+
+    .m_bg-yellow {
+        background: var(--bgl-yellow) !important;
+    }
+
+    .m_color-yellow {
+        color: var(--bgl-yellow) !important;
+    }
+
+    .m_bg-yellow-light {
+        background: var(--bgl-yellow-light) !important;
+    }
+
+    .m_color-yellow-light {
+        color: var(--bgl-yellow-light) !important;
+    }
+
+    .m_bg-green {
+        background: var(--bgl-green) !important;
+    }
+
+    .m_color-green {
+        color: var(--bgl-green) !important;
+    }
+
+    .m_bg-input-white input {
+        background: var(--bgl-white) !important;
+    }
+
+    .m_color-input-white input {
+        color: var(--bgl-white) !important;
+    }
+
+    .m_bg-input-primary input {
+        background: var(--bgl-primary) !important;
+    }
+
+    .m_color-input-primary input {
+        color: var(--bgl-primary) !important;
+    }
+
+    .m_bg-input-primary-tint input {
+        background: var(--bgl-primary-tint) !important;
+    }
+
+    .m_color-input-primary-tint input {
+        color: var(--bgl-primary-tint) !important;
+    }
+
+    .m_bg-input-primary-light input {
+        background: var(--bgl-primary-light) !important;
+    }
+
+    .m_color-input-primary-light input {
+        color: var(--bgl-primary-light) !important;
+    }
+
+    .m_bg-input-blue-20 input {
+        background: var(--bgl-blue-20) !important;
+    }
+
+    .m_color-input-blue-20 input {
+        color: var(--bgl-blue-20) !important;
+    }
+
+    .m_bg-input-blue-dark input {
+        background: var(--bgl-blue-dark) !important;
+    }
+
+    .m_color-input-blue-dark input {
+        color: var(--bgl-blue-dark) !important;
+    }
+
+    .m_bg-input-blue-light input {
+        background: var(--bgl-blue-light) !important;
+    }
+
+    .m_color-input-blue-light input {
+        color: var(--bgl-blue-light) !important;
+    }
+
+    .m_bg-input-black input {
+        background: var(--bgl-black) !important;
+    }
+
+    .m_color-input-black input {
+        color: var(--bgl-black) !important;
+    }
+
+    .m_bg-input-black-tint input {
+        background: var(--bgl-black-tint) !important;
+    }
+
+    .m_color-input-black-tint input {
+        color: var(--bgl-black-tint) !important;
+    }
+
+    .m_bg-input-gray input {
+        background: var(--bgl-gray) !important;
+    }
+
+    .m_color-input-gray input {
+        color: var(--bgl-gray) !important;
+    }
+
+    .m_bg-input-gray-light input {
+        background: var(--bgl-gray-light) !important;
+    }
+
+    .m_color-input-gray-light input {
+        color: var(--bgl-gray-light) !important;
+    }
+
+    .m_bg-input-gray-80 input {
+        background: var(--bgl-gray-80) !important;
+    }
+
+    .m_color-input-gray-80 input {
+        color: var(--bgl-gray-80) !important;
+    }
+
+    .m_bg-input-gray-20 input {
+        background: var(--bgl-gray-20) !important;
+    }
+
+    .m_color-input-gray-20 input {
+        color: var(--bgl-gray-20) !important;
+    }
+
+    .m_bg-input-pink input {
+        background: var(--bgl-pink) !important;
+    }
+
+    .m_color-input-pink input {
+        color: var(--bgl-pink) !important;
+    }
+
+    .m_bg-input-red input {
+        background: var(--bgl-red) !important;
+    }
+
+    .m_color-input-red input {
+        color: var(--bgl-red) !important;
+    }
+
+    .m_bg-input-red-tint input {
+        background: var(--bgl-red-tint) !important;
+    }
+
+    .m_color-input-red-tint input {
+        color: var(--bgl-red-tint) !important;
+    }
+
+    .m_bg-input-yellow input {
+        background: var(--bgl-yellow) !important;
+    }
+
+    .m_color-input-yellow input {
+        color: var(--bgl-yellow) !important;
+    }
+
+    .m_bg-input-yellow-light input {
+        background: var(--bgl-yellow-light) !important;
+    }
+
+    .m_color-input-yellow-light input {
+        color: var(--bgl-yellow-light) !important;
+    }
+
+    .m_bg-input-green input {
+        background: var(--bgl-green) !important;
+    }
+
+    .m_color-input-green input {
+        color: var(--bgl-green) !important;
+    }
 }

package/src/styles/buttons.css

@@ -69,6 +69,10 @@
     border: 1px solid var(--border-color);
 }
 
+.rotate-180 {
+    transform: rotate(180deg);
+}
+
 @media screen and (max-width: 910px) {
     .bgl_btn {
         padding: 0 20px;
@@ -77,4 +81,8 @@
     .m_border {
         border: 1px solid var(--border-color);
     }
+
+    .m_rotate-180 {
+        transform: rotate(180deg);
+    }
 }

package/src/styles/layout.css

@@ -11,6 +11,10 @@
     height: 100vh;
 }
 
+.round {
+    border-radius: var(--btn-border-radius);
+}
+
 .justify-items-center {
     justify-items: center;
 }
@@ -503,6 +507,7 @@
 .column-reverse {
     flex-direction: column-reverse;
 }
+
 .row {
     flex-direction: row;
 }
@@ -1205,6 +1210,9 @@
 .sticky,
 .position-sticky {
     position: sticky !important;
+    top: 0;
+    align-self: start;
+
 }
 
 .flex {
@@ -1574,7 +1582,6 @@
 .grid-wrap-4 {
     grid-template-columns: repeat(4, 1fr);
     height: max-content;
-
 }
 
 .grid-wrap-5 {
@@ -1597,10 +1604,42 @@
     height: max-content;
 }
 
+.grid-span-1 {
+    grid-column: span 1;
+}
+
+.grid-span-2 {
+    grid-column: span 2;
+}
+
+.grid-span-3 {
+    grid-column: span 3;
+}
+
+.grid-span-4 {
+    grid-column: span 4;
+}
+
+.grid-span-5 {
+    grid-column: span 5;
+}
+
+.grid-span-6 {
+    grid-column: span 6;
+}
+
 .overflow-hidden {
     overflow: hidden;
 }
 
+.overflow {
+    overflow: auto;
+}
+
+.overflow-unset {
+    overflow: unset;
+}
+
 .overflow-x {
     overflow-x: auto;
 }
@@ -1623,6 +1662,12 @@
     width: 100%;
 }
 
+.var-line {
+    background: var(--border-color);
+    width: 1px;
+    height: 100%;
+}
+
 .ltr,
 .direction-ltr {
     direction: ltr;