styleguide changes

extrabright · extrabright · commit 8f2db5ece471 · 2023-08-24T17:00:27.000+03:00
diff --git a/dist/main.css b/dist/main.css
diff --git a/dist/main.css.map b/dist/main.css.map
diff --git a/dist/utility.css b/dist/utility.css
diff --git a/dist/utility.css.map b/dist/utility.css.map
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@webpixels/css",
   "description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "version_short": "2.0",
   "license": "MIT",
   "style": "dist/index.css",
diff --git a/scss/components/_avatar.scss b/scss/components/_avatar.scss
@@ -35,11 +35,6 @@
 }
 
 // Sizes
-.avatar-2xl {
-	--#{$prefix}avatar-size: #{$avatar-size-2xl};
-	--#{$prefix}avatar-font-size: #{$avatar-font-size-2xl};
-}
-
 .avatar-xl {
 	--#{$prefix}avatar-size: #{$avatar-size-xl};
 	--#{$prefix}avatar-font-size: #{$avatar-font-size-xl};
@@ -78,13 +73,13 @@
 	}
 
 	.avatar + .avatar {
-		margin-left: -1.25rem;
+		margin-left: -1rem;
 		@include border-start-radius(0);
 	}
 
 	.avatar-sm + .avatar-sm,
 	.avatar-xs + .avatar-xs, {
-		margin-left: -1rem;
+		margin-left: -.75rem;
 	}
 
 	&:hover {
diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -58,9 +58,9 @@
   width: var(--#{$prefix}btn-size);
   height: var(--#{$prefix}btn-size);
 
-  // &.btn-xs {
-  //   --#{$prefix}btn-size: #{$btn-square-size-xs};
-  // }
+  &.btn-xs {
+    --#{$prefix}btn-size: #{$btn-square-size-xs};
+  }
 
   &.btn-sm {
     --#{$prefix}btn-size: #{$btn-square-size-sm};
@@ -73,10 +73,6 @@
   &.btn-xl {
     --#{$prefix}btn-size: #{$btn-square-size-xl};
   }
-
-  &.btn-2xl {
-    --#{$prefix}btn-size: #{$btn-square-size-2xl};
-  }
 }
 
 // Animated button
diff --git a/scss/components/_index.scss b/scss/components/_index.scss
@@ -6,6 +6,7 @@
 @import "./frame";
 @import "./icon";
 @import "./list-group";
+@import "./modal";
 @import "./nav";
 @import "./navbar";
 @import "./navbar-vertical";
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
@@ -0,0 +1,26 @@
+/* Custom modifier class for bottom drawer */
+@include media-breakpoint-down(md) {
+  .modal-drawer {
+    --#{$prefix}modal-border-radius: #{$modal-content-border-radius} #{$modal-content-border-radius} 0 0;
+
+    transition: transform $transition-base-duration;
+    transform: translateY(100%);
+    display: flex;
+    align-items: end;
+    justify-content: center;
+    margin: 0;
+
+    &.show {
+      transform: translateY(0);
+    }
+
+    .modal-dialog {
+      margin: 0;
+      width: 100%;
+      max-width: 100%;
+      height: 100%;
+      max-height: 100%;
+      align-items: end;
+    }
+  }
+}
diff --git a/scss/components/_progress.scss b/scss/components/_progress.scss
@@ -40,10 +40,6 @@
   }
 }
 
-.progress-circle-2xl {
-  --#{$prefix}progress-circle-size: #{$progress-circle-size-2xl};
-}
-
 .progress-circle-xl {
   --#{$prefix}progress-circle-size: #{$progress-circle-size-xl};
 }
diff --git a/scss/extra.scss b/scss/extra.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.5 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.6 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/index.scss b/scss/index.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.5 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.6 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/main.scss b/scss/main.scss
@@ -1,5 +1,5 @@
 /*!
- * Webpixels CSS v2.0.0-beta.5 (https://webpixels.io/)
+ * Webpixels CSS v2.0.0-beta.6 (https://webpixels.io/)
  * Copyright 2023 Webpixels
  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
  */
diff --git a/scss/utility.scss b/scss/utility.scss
@@ -1,5 +1,5 @@
 // /*!
-//  * Webpixels CSS v2.0.0-beta.5 (https://webpixels.io/)
+//  * Webpixels CSS v2.0.0-beta.6 (https://webpixels.io/)
 //  * Copyright 2022 Webpixels
 //  * Licensed under MIT (https://github.com/webpixels/css/blob/main/LICENSE)
 //  */
diff --git a/scss/variables/_variables.scss b/scss/variables/_variables.scss
@@ -198,7 +198,7 @@ $caret-spacing:               $caret-width * .85 !default;
 // Transitions
 //
 
-$transition-base-duration:      		.2s;
+$transition-base-duration:      		.4s !default;
 $transition-fade:               		opacity $transition-base-duration linear !default;
 $transition-collapse:           		height $transition-base-duration ease !default;
 $transition-cubic-bezier:       		all $transition-base-duration cubic-bezier(.77, 0, .2, 2.25) !default;
@@ -573,12 +573,11 @@ $btn-active-border-tint-amount:   10% !default;
 
 // Square/Circle shape buttons
 
-$btn-square-size:                      2.875rem !default;
-$btn-square-size-2xl:                  7.5rem !default;
-$btn-square-size-xl:                   6rem !default;
-$btn-square-size-lg:                   3.5rem !default;
-$btn-square-size-sm:                   2.5125rem !default;
-$btn-square-size-xs:                   2rem !default;
+$btn-square-size:                      1.96875rem !default;
+$btn-square-size-xl:                   2.46875rem !default;
+$btn-square-size-lg:                   2.21875rem !default;
+$btn-square-size-sm:                   1.71875rem !default;
+$btn-square-size-xs:                   1.5625rem !default;
 
 
 // Neutral button
@@ -698,27 +697,23 @@ $alert-dark-color:                  color-contrast($alert-dark-bg) !default;
 
 // Avatars
 
-$avatar-size:                       $btn-square-size !default;
+$avatar-size:                       2.5rem !default;
 $avatar-font-size:                  1rem !default;
 $avatar-border-radius:              $border-radius !default;
 
-$avatar-size-2xl :                  $btn-square-size-2xl !default;
-$avatar-font-size-2xl:              $avatar-font-size * 2.5 !default;
-$avatar-border-radius-2xl:          $border-radius-lg !default;
-
-$avatar-size-xl:                    $btn-square-size-xl !default;
+$avatar-size-xl:                    3.5rem !default;
 $avatar-font-size-xl:               $avatar-font-size * 1.375 !default;
 $avatar-border-radius-xl:           $border-radius-lg !default;
 
-$avatar-size-lg:                    $btn-square-size-lg !default;
+$avatar-size-lg:                    3rem !default;
 $avatar-font-size-lg:               $avatar-font-size * 1.25 !default;
 $avatar-border-radius-lg:           $border-radius-lg !default;
 
-$avatar-size-sm:                    $btn-square-size-sm !default;
+$avatar-size-sm:                    2rem !default;
 $avatar-font-size-sm:               $avatar-font-size * .75 !default;
 $avatar-border-radius-sm:           $border-radius-sm !default;
 
-$avatar-size-xs:                    $btn-square-size-xs !default;
+$avatar-size-xs:                    1.5rem !default;
 $avatar-font-size-xs:               $avatar-font-size * .675 !default;
 $avatar-border-radius-xs:           $border-radius-sm !default;
 
@@ -1225,7 +1220,6 @@ $progress-circle-bg:                $progress-bg !default;
 $progress-circle-color:             $primary !default;
 $progress-circle-bar-bg:            $progress-bar-bg !default;
 
-$progress-circle-size-2xl:          $btn-square-size-2xl !default;
 $progress-circle-size-xl:           $btn-square-size-xl !default;
 $progress-circle-size-lg:           $btn-square-size-lg !default;
 $progress-circle-size-sm:           $btn-square-size-sm !default;

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@webpixels/css",`
`3`	`3`	`"description": "Utility and component-centric design system based on Bootstrap for fast, responsive UI development.",`
`4`		`- "version": "2.0.0-beta.5",`
	`4`	`+ "version": "2.0.0-beta.6",`
`5`	`5`	`"version_short": "2.0",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"style": "dist/index.css",`
Original file line number	Diff line number	Diff line change
`@@ -35,11 +35,6 @@`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`// Sizes`
`38`		`-.avatar-2xl {`
`39`		`- --#{$prefix}avatar-size: #{$avatar-size-2xl};`
`40`		`- --#{$prefix}avatar-font-size: #{$avatar-font-size-2xl};`
`41`		`-}`
`42`		`-`
`43`	`38`	`.avatar-xl {`
`44`	`39`	`--#{$prefix}avatar-size: #{$avatar-size-xl};`
`45`	`40`	`--#{$prefix}avatar-font-size: #{$avatar-font-size-xl};`
`@@ -78,13 +73,13 @@`
`78`	`73`	`}`
`79`	`74`
`80`	`75`	`.avatar + .avatar {`
`81`		`- margin-left: -1.25rem;`
	`76`	`+ margin-left: -1rem;`
`82`	`77`	`@include border-start-radius(0);`
`83`	`78`	`}`
`84`	`79`
`85`	`80`	`.avatar-sm + .avatar-sm,`
`86`	`81`	`.avatar-xs + .avatar-xs, {`
`87`		`- margin-left: -1rem;`
	`82`	`+ margin-left: -.75rem;`
`88`	`83`	`}`
`89`	`84`
`90`	`85`	`&:hover {`
Original file line number	Diff line number	Diff line change
`@@ -40,10 +40,6 @@`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`
`43`		`-.progress-circle-2xl {`
`44`		`- --#{$prefix}progress-circle-size: #{$progress-circle-size-2xl};`
`45`		`-}`
`46`		`-`
`47`	`43`	`.progress-circle-xl {`
`48`	`44`	`--#{$prefix}progress-circle-size: #{$progress-circle-size-xl};`
`49`	`45`	`}`