Fix text alignment in multiline Alerts

react-ui-org · Dec 6, 2019 · 47be0cb · 47be0cb
1 parent 2464055
commit 47be0cb
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 16 deletions.
diff --git a/demo/generated/demo.js b/demo/generated/demo.js
diff --git a/dist/lib.js b/dist/lib.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "license": "MIT",
   "main": "dist/lib.js",
   "repository": {

diff --git a/src/lib/components/ui/Alert/Alert.scss b/src/lib/components/ui/Alert/Alert.scss
@@ -5,24 +5,20 @@
 }
 
 .icon {
-  position: absolute;
-  left: $alert-offset;
+  position: relative;
+  top: 1px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  align-self: flex-start;
   justify-content: flex-start;
-  height: 100%;
-  padding-top: calc((#{$alert-min-height} - (2 * #{$alert-border-width}) - #{$alert-icon-size}) / 2);
 }
 
 .message {
-  padding-left: $alert-offset;
+  padding-left: $alert-padding;
   font-weight: $alert-message-font-weight;
+  font-size: $alert-font-size;
   line-height: $alert-line-height;
-
-  &:not(:first-child) {
-    padding-left: calc(#{$alert-icon-size} + #{$alert-offset});
-  }
 }
 
 .message strong {

diff --git a/src/lib/components/ui/Alert/_mixins.scss b/src/lib/components/ui/Alert/_mixins.scss
@@ -8,7 +8,7 @@
   align-items: center;
   width: 100%;
   min-height: $alert-min-height;
-  padding: $alert-offset;
+  padding: $alert-padding;
   border-width: $alert-border-width $alert-border-width $alert-border-width $alert-stripe-width;
   border-style: solid;
   border-radius: $alert-border-radius;

diff --git a/src/lib/components/ui/Alert/_theme.scss b/src/lib/components/ui/Alert/_theme.scss
@@ -1,5 +1,6 @@
 $alert-border-width: var(--rui-alert-border-width);
 $alert-border-radius: var(--rui-alert-border-radius);
+$alert-padding: var(--rui-alert-padding);
 $alert-icon-size: var(--rui-icon-size-default);
 
 $alert-types: (

diff --git a/src/lib/components/ui/Alert/_variables.scss b/src/lib/components/ui/Alert/_variables.scss
@@ -1,10 +1,14 @@
 @import '../../../styles/settings/colors';
 @import '../../../styles/settings/offsets';
 @import '../../../styles/settings/typography';
+@import './theme';
 
+$alert-font-size: map-get($typography-size-values, 0);
 $alert-line-height: 1.2;
-$alert-min-height: 30px;
-$alert-offset: map-get($offset-values, 1);
+$alert-min-height:
+  calc(
+    #{$alert-font-size} * #{$alert-line-height} + 2 * #{$alert-padding} + 2 * #{$alert-border-width}
+  );
 $alert-stripe-width: 5px;
 $alert-message-font-weight: map-get($typography-font-weight-values, light);
 $alert-title-font-weight: map-get($typography-font-weight-values, bold);
diff --git a/src/lib/theme.scss b/src/lib/theme.scss
@@ -154,6 +154,7 @@
   // Alerts: common properties
   --rui-alert-border-width: var(--rui-border-width);
   --rui-alert-border-radius: var(--rui-border-radius);
+  --rui-alert-padding: var(--rui-offset-1);
 
   // Alerts: type: success
   --rui-alert-success-foreground-color: var(--rui-color-success);