Changeset 12095 for trunk/src/bp-core/admin/sass/hello.scss

Timestamp:

05/17/2018 08:04:56 PM (8 years ago)

Author:

djpaul

Message:

Admin, Welcome screen: accessibility improvements.

Fixes #7835

Props to mercime for the initial patch.

File:

• trunk/src/bp-core/admin/sass/hello.scss (modified) (11 diffs)

trunk/src/bp-core/admin/sass/hello.scss

@@ -40 +40 @@
 
                 &:hover {
+                        -webkit-transition: all 0.1s ease-in-out;
+                        -o-transition: all 0.1s ease-in-out;
                         transition: all 0.1s ease-in-out;
                         color: rgb(0, 0, 0);
@@ -67 +69 @@
 .bp-hello-close {
 
-        a {
-
-                &:hover:before {
-                        transition: all 0.1s ease-in-out;
-                        color: var(--bp-hello-color-primary);
-                }
-
-                &.close-modal:before {
+        .button {
+                padding: 5px !important;
+        }
+
+        .close-modal {
+
+                &:before {
                         content: "\f158";
                         color: #23282d; /* wp toolbar */
-                        font: 400 35px/1 dashicons;
+                        font: 400 1.5em/1 dashicons;
                         speak: none;
                         -webkit-font-smoothing: antialiased;
                         -moz-osx-font-smoothing: grayscale;
                         background-image: none !important;
+                }
+
+                &:focus:before,
+                &:hover:before {
+                        -webkit-transition: all 0.1s ease-in-out;
+                        -o-transition: all 0.1s ease-in-out;
+                        transition: all 0.1s ease-in-out;
+                        color: var(--bp-hello-color-primary);
                 }
         }
@@ -100 +109 @@
 
                 &:hover:before {
+                        -webkit-transition: all 0.1s ease-in-out;
+                        -o-transition: all 0.1s ease-in-out;
                         transition: all 0.1s ease-in-out;
                         color: var(--bp-hello-color-primary);
@@ -127 +138 @@
         right: 0;
         bottom: 0;
-        z-index: 9998; // >= 9990 for main menu
+        z-index: 9998;
 
         display: none;
@@ -136 +147 @@
         top: 0;
         bottom: 80px;
-        z-index: 99999; // >= 99998 for toolbar
+        z-index: 99999;
 }
 
@@ -147 +158 @@
  */
 .bp-hello-footer {
+        display: -webkit-box;
+        display: -ms-flexbox;
         display: flex;
+        -ms-flex-wrap: wrap;
         flex-wrap: wrap;
 
@@ -156 +170 @@
 .bp-hello-social-cta,
 .bp-hello-social-links {
+        -ms-flex-preferred-size: 50%;
         flex-basis: 50%;
 }
@@ -210 +225 @@
 #bp-hello-backdrop {
         background-color: rgba(0, 0, 0, 0.8);
+        -webkit-transition: opacity 0.15s ease-out;
+        -o-transition: opacity 0.15s ease-out;
         transition: opacity 0.15s ease-out;
 }
@@ -276 +293 @@
         right: 25px;
         text-align: right;
-
-        a {
-                text-decoration: none;
-        }
 }
 
@@ -334 +347 @@
                 height: auto;
                 max-height: inherit;
-
                 padding: 6px 30px;
         }
@@ -341 +353 @@
                 right: 30px;
 
-                a {
-
-                        &.close-modal:before {
-                                line-height: 0.7;
-                        }
+                .close-modal:before {
+                        line-height: 0.7;
                 }
         }