@openedx/paragon 23.6.0 → 23.6.1

package/dist/Button/_mixins.scss

@@ -1,7 +1,10 @@
-// OVERRIDE FROM BOOTSTRAP
-// No changes made. We do this to keep all button related mixins together,
 //
+// Includes common mixins related to button styles.
+//
+
 // Button sizes
+// OVERRIDE FROM BOOTSTRAP
+// No changes made. We do this to keep all button related mixins together,
 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
   padding: $padding-y $padding-x;
 
@@ -12,3 +15,49 @@
   // Manually declare to provide an override to the browser default
   @include border-radius($button-border-radius, 0);
 }
+
+// Mixin for button states that affect border radius
+@mixin button-border-radius-0($side) {
+  @if $side == 'right' {
+    @include border-right-radius(0);
+  }
+
+  @if $side == 'left' {
+    @include border-left-radius(0);
+  }
+  
+  // Handle pseudo-classes
+  &.btn:not(:disabled, .disabled):focus,
+  &.btn:not(:disabled, .disabled):focus::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  &.btn:not(:disabled, .disabled):active,
+  &.btn:not(:disabled, .disabled):active::before {
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+  }
+  
+  // Handle .active class
+  &.btn:not(:disabled, .disabled).active,
+  &.btn:not(:disabled, .disabled).active::before {
+    @if $side == 'right' {
+      @include border-right-radius(0);
+    }
+
+    @if $side == 'left' {
+      @include border-left-radius(0);
+    }
+  }
+}

package/dist/Button/button-group.scss

@@ -15,7 +15,7 @@
     &:focus,
     &:active,
     &.active {
-      z-index: 1;
+      z-index: 2;
     }
   }
 }
@@ -36,14 +36,17 @@
     margin-left: calc(var(--pgn-size-btn-border-width) * -1);
   }
 
+  // Right border radius for non-last buttons
+  > .btn:not(:last-child, .dropdown-toggle, :first-child),
   > .btn:not(:last-child, .dropdown-toggle),
   > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
+    @include button-border-radius-0('right');
   }
 
-  > .btn:not(:first-child),
+  // Left border radius for non-first buttons
+  > .btn:not(:first-child, .dropdown-toggle),
   > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
+    @include button-border-radius-0('left');
   }
 }
 

package/dist/core.css

@@ -9776,7 +9776,7 @@ a.badge:focus, a.badge.focus {
 .btn-group-vertical > .btn:focus,
 .btn-group-vertical > .btn:active,
 .btn-group-vertical > .btn.active {
-  z-index: 1;
+  z-index: 2;
 }
 .btn-toolbar {
   display: flex;
@@ -9790,16 +9790,59 @@ a.badge:focus, a.badge.focus {
 .btn-group > .btn-group:not(:first-child) {
   margin-left: calc(var(--pgn-size-btn-border-width) * -1);
 }
+.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child),
 .btn-group > .btn:not(:last-child, .dropdown-toggle),
 .btn-group > .btn-group:not(:last-child) > .btn {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-.btn-group > .btn:not(:first-child),
+.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):focus, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):focus::before,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus::before,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):focus,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):focus::before {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):active, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled):active::before,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):active,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled):active::before,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):active,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled):active::before {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled).active, .btn-group > .btn:not(:last-child, .dropdown-toggle, :first-child).btn:not(:disabled, .disabled).active::before,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled).active,
+.btn-group > .btn:not(:last-child, .dropdown-toggle).btn:not(:disabled, .disabled).active::before,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled).active,
+.btn-group > .btn-group:not(:last-child) > .btn.btn:not(:disabled, .disabled).active::before {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.btn-group > .btn:not(:first-child, .dropdown-toggle),
 .btn-group > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):focus::before,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):focus,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):focus::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):active, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled):active::before,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):active,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled):active::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled).active, .btn-group > .btn:not(:first-child, .dropdown-toggle).btn:not(:disabled, .disabled).active::before,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled).active,
+.btn-group > .btn-group:not(:first-child) > .btn.btn:not(:disabled, .disabled).active::before {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
 /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
 .dropdown-toggle-split {