Update alert styles

adsabs · Jan 29, 2021 · 859c6eb · 859c6eb
1 parent d2f9b05
commit 859c6eb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/src/js/widgets/alerts/templates/page_top_alert.html b/src/js/widgets/alerts/templates/page_top_alert.html
@@ -6,7 +6,7 @@
   <div>
     <button type="button" class="close">
       <span aria-hidden="true"
-        ><i class="fa fa-2x fa-times" aria-hidden="true"></i></span
+        ><i class="fa fa-times" aria-hidden="true"></i></span
       ><span class="sr-only">Close</span>
     </button>
   </div>

diff --git a/src/styles/sass/ads-sass/any-page.scss b/src/styles/sass/ads-sass/any-page.scss
@@ -1,7 +1,11 @@
-
 //allow for semantic headings without changing the look of the button
 .btn {
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: #fff;
     font-weight: normal;
     font-size: 1em;
@@ -10,7 +14,6 @@
   }
 }
 
-
 .s-message-control-row {
   text-align: center;
 
@@ -21,66 +24,69 @@
 }
 
 @keyframes fade-in {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-div[data-widget="AlertsWidget"] {
-
+div[data-widget='AlertsWidget'] {
   .alert {
-    margin: 0 -15px 0 -15px;
+    // margin: 0 -15px 0 -15px;
     margin-bottom: 0 !important;
     border-radius: 0;
     font-size: 18px;
+    font-weight: 300;
     border: 0px solid transparent !important;
-    padding: 25px;
-    padding-left: 45px;
-    animation : fade-in 1s;
+    padding: 2rem;
+    animation: fade-in 1s;
     position: relative;
+    display: flex;
+    align-items: center;
   }
 
-  .alert>div {
-    display:inline-block;
+  .alert > div {
+    display: inline-block;
     vertical-align: top;
   }
 
-  .alert>div:first-of-type {
+  .alert > div:first-of-type {
     width: 80%;
   }
-  .alert>div:nth-of-type(2) {
+  .alert > div:nth-of-type(2) {
     width: 19%;
   }
-
 }
 
 .s-tabs-widget {
-
-  .nav-tabs>li>a {
+  .nav-tabs > li > a {
     padding: 5px 10px 10px 10px !important;
     color: $text-color;
   }
 
-  .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
+  .nav-tabs > li.active > a,
+  .nav-tabs > li.active > a:hover,
+  .nav-tabs > li.active > a:focus {
     h5 {
       color: $brand-primary-faded;
     }
     border: $border-light-default;
     border-bottom: none;
     cursor: default;
-
   }
 
   .tab-content {
     @extend .s-ads-card;
-    box-shadow :  0 3px 5px $default-box-shadow-color;
-    border-top : none;
+    box-shadow: 0 3px 5px $default-box-shadow-color;
+    border-top: none;
     position: relative;
     top: -10px;
     border-bottom-left-radius: $border-radius-base;
     border-bottom-right-radius: $border-radius-base;
     background-color: $body-bg;
   }
-
 }
 
 #backToTopBtn {