@appartmint/mint 0.10.18 → 0.10.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "0.10.18",
+  "version": "0.10.19",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [

package/src/scss/imports/components/_buttons.scss

@@ -123,10 +123,14 @@
 
 /// Pill buttons
 #{class(pill)} {
-    min-width: 5rem;
     padding: 0 $btn-padding-adjust;
     line-height: 2;
 }
+a, button {
+	&#{class(pill)} {
+		min-width: 5rem;
+	}
+}
 
 /// A list of buttons
 #{class(buttons)} {
@@ -153,6 +157,18 @@
     }
 }
 
+#{class(grid)}#{class('3')},
+#{class(grid)}#{class('4')} {
+	#{class(buttons)} {
+		& > * {
+			@include break(xs) {
+				width: 100%;
+				margin: 0.5rem 0;
+			}
+		}
+	}
+}
+
 /// Buttons within a paragraph
 p {
     #{class(pill)} {

package/src/scss/imports/components/_cards.scss

@@ -160,3 +160,43 @@
 		}
 	}
 }
+
+#{class(grid)}#{class('3')},
+#{class(grid)}#{class('4')} {
+	#{class(card)} {
+		flex-direction: column !important;
+
+		&>#{class(image)},
+		&>mint-image #{class(image)} {
+			overflow: hidden;
+
+			@include break(sm) {
+				width: 100%;
+			}
+
+			&+#{class(content)} {
+				@include break(sm) {
+					width: 100%;
+				}
+			}
+		}
+
+		#{class(content)} {
+			height: 100%;
+		}
+
+		#{class(title)} {
+			@include break(xs) {
+				flex-direction: column;
+			}
+		}
+
+		#{class(buttons)} {
+			align-items: flex-end;
+
+			#{class(btn)} {
+				width: 100%;
+			}
+		}
+	}
+}