browser-extension-manager 1.0.14 → 1.1.0

package/dist/assets/themes/classy/css/components/_forms.scss

@@ -0,0 +1,115 @@
+// Classy Form Components
+// Modern form styling with consistent rounded corners
+
+// ============================================
+// Input Groups
+// ============================================
+.input-group {
+  > .form-control {
+    border-radius: $classy-radius-lg;
+    
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  
+  // Buttons in input groups
+  > .btn {
+    border-radius: $classy-radius-lg;
+    
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    
+    // Last button in group
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    
+    // First button in group
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  
+  // Input group text
+  > .input-group-text {
+    border-radius: $classy-radius-lg;
+    
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
+// ============================================
+// Form Controls
+// ============================================
+.form-control,
+.form-select {
+  border-radius: $classy-radius-lg;
+  border: 1px solid var(--bs-border-color);
+  background-color: var(--bs-body-bg);
+  transition: all 0.2s ease;
+
+  &:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+    background-color: var(--bs-body-bg);
+  }
+}
+
+// ============================================
+// Form Labels & Text
+// ============================================
+.form-label {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+// Form text
+.form-text {
+  font-size: 0.875rem;
+  color: $classy-gray;
+}
+
+// ============================================
+// Custom Checkboxes & Radios
+// ============================================
+.form-check-input {
+  border-radius: $classy-radius-sm;
+  
+  &[type="radio"] {
+    border-radius: 50%;
+  }
+  
+  &:checked {
+    background-color: $primary;
+    border-color: $primary;
+  }
+  
+  &:focus {
+    border-color: $primary;
+    box-shadow: 0 0 0 0.25rem rgba($primary, 0.25);
+  }
+}

package/dist/assets/themes/classy/css/components/_links.scss

@@ -0,0 +1,19 @@
+// Classy Link Components
+// Custom link styles and variations
+
+// ============================================
+// Muted Link Style
+// ============================================
+.link-muted {
+  --bs-text-opacity: 1;
+  color: var(--bs-secondary-color) !important;
+  text-decoration: none;
+  transition: opacity 0.15s ease-in-out;
+
+  &:hover,
+  &:focus {
+    color: var(--bs-secondary-color) !important;
+    text-decoration: underline;
+    opacity: 0.75;
+  }
+}

package/dist/assets/themes/classy/css/components/_logo-scroll.scss

@@ -0,0 +1,57 @@
+// Logo Scroll Animation Component
+// Infinite scrolling logo carousel for partner/client sections
+
+// ============================================
+// Container & Track
+// ============================================
+
+.logo-scroll-wrapper {
+  position: relative;
+  width: 100vw;
+  margin-left: calc(-50vw + 50%);
+  overflow: hidden;
+}
+
+.logo-scroll-track {
+  display: flex;
+  width: fit-content;
+  animation: scroll-logos var(--logo-scroll-duration, 30s) linear infinite;
+}
+
+.logo-item {
+  padding: 0 3rem;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  flex-shrink: 0;
+
+  img, svg {
+    height: 40px;
+    width: auto;
+    max-width: 150px;
+    transition: all 0.3s ease;
+  }
+}
+
+@keyframes scroll-logos {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(var(--logo-scroll-distance, -50%));
+  }
+}
+
+// ============================================
+// Responsive Design
+// ============================================
+@media (max-width: 768px) {
+  .logo-item {
+    padding: 0 2rem;
+    height: 50px;
+
+    img, svg {
+      height: 30px;
+    }
+  }
+}

package/dist/assets/themes/classy/css/components/_spinners.scss

@@ -0,0 +1,19 @@
+// Classy Spinner Components
+// Custom spinner size variants for Bootstrap spinners
+
+// ============================================
+// Large Spinner - Border Variant
+// ============================================
+.spinner-border-lg {
+  --bs-spinner-width: 3rem;
+  --bs-spinner-height: 3rem;
+  --bs-spinner-border-width: 0.375rem;
+}
+
+// ============================================
+// Large Spinner - Grow Variant
+// ============================================
+.spinner-grow-lg {
+  --bs-spinner-width: 3rem;
+  --bs-spinner-height: 3rem;
+}

package/dist/assets/themes/classy/css/components/_text.scss

@@ -0,0 +1,41 @@
+// Classy Text Components
+// Text effects and utilities
+
+// ============================================
+// Gradient Text Styles
+// ============================================
+.text-gradient-rainbow {
+  background-image: $classy-gradient-rainbow;
+  background-size: 300% 300%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-aurora {
+  background-image: $classy-gradient-aurora;
+  background-size: 300% 300%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+// ============================================
+// Accent Font
+// ============================================
+.text-accent {
+  font-family: $classy-font-accent;
+  font-weight: inherit;
+  font-style: italic;
+}
+
+// ============================================
+// Adaptive Text Colors
+// ============================================
+.text-adaptive {
+  @extend .text-light;
+}
+
+[data-bs-theme="dark"] .text-adaptive {
+  @extend .text-dark;
+}

package/dist/assets/themes/classy/css/layout/_blog.scss

@@ -0,0 +1,42 @@
+// Classy Blog Layout
+// Responsive image sizing for blog posts and cards
+
+// ============================================
+// Blog Card Images
+// ============================================
+.blog-post-card-image {
+  height: 240px;
+  width: 100%;
+}
+
+@media (max-width: 991.98px) {
+  .blog-post-card-image {
+    height: 240px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .blog-post-card-image {
+    height: 200px;
+  }
+}
+
+// ============================================
+// Blog Post Page Images
+// ============================================
+.blog-post-image {
+  min-height: 600px;
+  width: 100%;
+}
+
+@media (max-width: 991.98px) {
+  .blog-post-image {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .blog-post-image {
+    min-height: 240px;
+  }
+}

package/dist/assets/themes/classy/css/layout/_general.scss

@@ -0,0 +1,139 @@
+// Classy General Layout
+// Standard spacing and layout rules
+
+// ============================================
+// Main Content Spacing
+// ============================================
+main {
+  padding-top: 6rem;
+  // padding-bottom: 2rem;
+
+  @media (min-width: 992px) {
+    padding-top: 3.5rem;
+  }
+}
+
+// ============================================
+// Section Spacing
+// ============================================
+main {
+  > section {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+
+    @media (min-width: 992px) {
+      padding-top: 7rem;
+      padding-bottom: 7rem;
+    }
+  }
+}
+
+// ============================================
+// Section Breakout Utilities
+// ============================================
+
+// Horizontal breakout - full width (edge-to-edge)
+.section-breakout-x {
+  margin-left: calc(-50vw + 50%);
+  margin-right: calc(-50vw + 50%);
+  width: 100vw;
+}
+
+// Horizontal breakout - nearly full width (with padding on left/right)
+.section-breakout-x-nearly {
+  margin-left: calc(-50vw + 50% + 0.25rem);
+  margin-right: calc(-50vw + 50% + 0.25rem);
+  width: calc(100vw - 0.5rem);
+
+  @media (min-width: 768px) {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+
+  @media (min-width: 1200px) {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+// Responsive breakout classes (Bootstrap-style breakpoints)
+// Small and up (576px+)
+@media (min-width: 576px) {
+  .section-breakout-x-sm {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+  .section-breakout-x-nearly-sm {
+    margin-left: calc(-50vw + 50% + 0.25rem);
+    margin-right: calc(-50vw + 50% + 0.25rem);
+    width: calc(100vw - 0.5rem);
+  }
+}
+
+// Medium and up (768px+)
+@media (min-width: 768px) {
+  .section-breakout-x-md {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+  .section-breakout-x-nearly-md {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+}
+
+// Large and up (992px+)
+@media (min-width: 992px) {
+  .section-breakout-x-lg {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+  .section-breakout-x-nearly-lg {
+    margin-left: calc(-50vw + 50% + 1rem);
+    margin-right: calc(-50vw + 50% + 1rem);
+    width: calc(100vw - 2rem);
+  }
+}
+
+// Extra large and up (1200px+)
+@media (min-width: 1200px) {
+  .section-breakout-x-xl {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+  .section-breakout-x-nearly-xl {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+// XXL and up (1400px+)
+@media (min-width: 1400px) {
+  .section-breakout-x-xxl {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+    width: 100vw;
+  }
+  .section-breakout-x-nearly-xxl {
+    margin-left: calc(-50vw + 50% + 1.5rem);
+    margin-right: calc(-50vw + 50% + 1.5rem);
+    width: calc(100vw - 3rem);
+  }
+}
+
+// Vertical breakout - top (negative top margin to offset main padding of 6rem on mobile, 3.5rem on desktop)
+.section-breakout-top {
+  margin-top: -6rem;
+
+  @media (min-width: 992px) {
+    margin-top: -3.5rem;
+  }
+}