Fix action icons alignement

Simounet · May 14, 2019 · a770c08 · a770c08
1 parent cb5b7fa
commit a770c08
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.css.map b/css/style.css.map
diff --git a/sass/style.scss b/sass/style.scss
@@ -15,6 +15,10 @@ $feed-bgc-used: #DDD;
 $error-color: #c53d3d;
 $feed-event-read-color: #BBB;
 
+$opacity-low: 0.3;
+$position-top-on-break: 30px;
+$action-icon-width: 30px;
+
 @import "normalize";
 
 /* MIXINS */
@@ -508,7 +512,7 @@ html:not(.no-js) .feed--closed {
 }
 .article__date {
     position: absolute;
-    right: 5em;
+    right: $action-icon-width * 2 + 5px;
     color: $feed-entry-color;
     font-size: 0.9em;
 
@@ -520,12 +524,8 @@ html:not(.no-js) .feed--closed {
     }
 }
 
-$opacity-low: 0.3;
-$position-top-on-break: 30px;
-$article-action-padding: 0.6em;
 .article-favorite {
-    padding: $article-action-padding;
-    right: 1.7em;
+    right: $action-icon-width;
     opacity: $opacity-low;
 
     &--favorited {
@@ -540,7 +540,6 @@ $article-action-padding: 0.6em;
 }
 
 .article__read-unread {
-    padding: $article-action-padding 0.3em;
     width: 1.7em;
     right: 0;
     color: white;
@@ -557,7 +556,12 @@ $article-action-padding: 0.6em;
 .article-favorite,
 .article__read-unread {
     position: absolute;
+    display: flex;
+    padding: 0;
+    width: $action-icon-width;
     height: 100%;
+    justify-content: center;
+    align-items: center;
     top: 0;
     bottom: 0;
     @extend %button-focused;