Changeset 2489

Timestamp:

02/09/2016 09:51:24 PM (9 years ago)

Author:

coffee2code

Message:

Handbook plugin: Improve the design of the callout boxes.

• Only display prefix denoting the type of callout box being shown as screen-reader-text.
• Use dashicons fully through CSS rather than via HTML placeholder.
• Use flag dashicon for alerts.
• Some padding tweaks.

Props McGuive7.
Fixes #630.

Location:

sites/trunk/wordpress.org/public_html/wp-content/plugins/handbook

Files:

• inc/callout-boxes.php (modified) (2 diffs)
• stylesheets/callout-boxes.css (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/handbook/inc/callout-boxes.php

@@ -131 +131 @@
 
             // Message prefix.
-            $prefix = '<strong>' . $this->shortcodes[ $shortcode ] . '</strong>';
+            $prefix = '<span class="screen-reader-text">' . $this->shortcodes[ $shortcode ] . '</span>';
 
             // Content with prefix.
@@ -138 +138 @@
             // Callout box output.
             $output .= "<div class='callout {$class}'>";
-            $output .= '<div class="dashicons"></div>'; // Icon holder
             $output .= apply_filters( 'the_content', $content );
             $output .= '</div>';

sites/trunk/wordpress.org/public_html/wp-content/plugins/handbook/stylesheets/callout-boxes.css

@@ -1 +1 @@
 .callout {
-  padding: 15px 40px 15px 46px;
+  padding: 1em 3em 1em 3.7em;
   margin-bottom: 1.5em;
   overflow: auto;
   position: relative;
-}
-.callout .dashicons {
-  position: absolute;
-  font-size: 2em;
-  top: 12px;
-  left: 10px;
+  border-width: 1px 1px 3px 1px;
+  border-style: solid;
 }
 .callout p {
   margin-bottom: 0;
 }
+.callout p ~ p {
+  margin-top: 1em;
+}
+.callout:before {
+  content: "";
+  font-family: "dashicons";
+  position: absolute;
+  font-size: 2em;
+  top: 0.14em;
+  left: 0.5em;
+}
+.callout .screen-reader-text + br {
+  display: none;
+}
 .callout-info {
   background: #e5f5fa;
-  border: 1px solid #00a0d2;
-  border-bottom: 3px solid #00a0d2;
+  border-color: #00a0d2;
 }
-.callout-info .dashicons:before {
+.callout-info:before {
   content: "\f348";
   color: #00a0d2 ;
@@ -28 +37 @@
   border-bottom: 3px solid #64b450;
 }
-.callout-tip .dashicons:before {
+.callout-tip:before {
   content: "\f339";
   color: #64b450;
@@ -37 +46 @@
   border-bottom: 3px solid #ffb900;
 }
-.callout-alert .dashicons:before {
-  content: "\f109";
+.callout-alert:before {
+  content: "\f227";
   color: #ffb900;
 }
@@ -46 +55 @@
   border-bottom: 3px solid #826eb4;
 }
-.callout-tutorial .dashicons:before {
+.callout-tutorial:before {
   content: "\f308";
   color: #826eb4;
@@ -55 +64 @@
   border-bottom: 3px solid #dc3232;
 }
-.callout-warning .dashicons:before {
+.callout-warning:before {
   content: "\f153";
   color: #dc3232;