Ticket #630: 630.diff

handbook/inc/callout-boxes.php

@@ -23 +23 @@
          */
         public function __construct() {
                 $this->shortcodes = array(
-                        'info'    => __( 'Note:',    'wporg' ),
-                        'tip'     => __( 'Tip:',     'wporg' ),
-                        'alert'   => __( 'Alert:',   'wporg' ),
-                        'warning' => __( 'Warning:', 'wporg' )
-                );
+                        'info'    => __( 'Note',    'wporg' ),
+                        'tip'     => __( 'Tip',     'wporg' ),
+                        'alert'   => __( 'Alert',   'wporg' ),
+                        'warning' => __( 'Warning', 'wporg' )
+                        );
 
                 add_action( 'init', array( $this, 'register_shortcodes' ) );
         }
@@ -115 +115 @@
                         $class = sanitize_html_class( $shortcode );
                         $class = empty( $class ) ? '' : "callout-{$class}";
 
-                        // Message prefix.
-                        $prefix = '<strong>' . $this->shortcodes[ $shortcode ] . '</strong>';
-
                         // Content with prefix.
-                        $content = "{$prefix} {$content}";
+                        $content = "{$content}";
 
                         // Callout box output.
                         $output .= "<div class='callout {$class}'>";
-                        $output .= '<div class="dashicons"></div>'; // Icon holder
                         $output .= apply_filters( 'the_content', $content );
                         $output .= '</div>';
                 }
@@ -132 +128 @@
 }
 
 $callouts = new WPorg_Handbook_Callout_Boxes();
-

handbook/stylesheets/callout-boxes.css

@@ -1 +1 @@
 .callout {
-  padding: 15px 40px 15px 46px;
-  margin-bottom: 1.5em;
-  overflow: auto;
-  position: relative;
+        position: relative;
+        overflow: auto;
+        padding: 1em 3em 1em 4em;
+        margin-bottom: 1.5em;
+        border-width: 1px 1px 3px 1px;
+        border-style: solid;
 }
-.callout .dashicons {
-  position: absolute;
-  font-size: 2em;
-  top: 12px;
-  left: 10px;
+
+.callout:before {
+        content: "";
+        position: absolute;
+        font-family: "dashicons";
+        font-size: 2em;
+        top: auto;
+        left: 0.5em;
 }
-.callout p {
-  margin-bottom: 0;
+
+.callout .prefix {
+        display: block;
+        margin-bottom: 0.7em;
+        font-size: 2em;
+        line-height: 1;
+        font-weight: bold;
 }
+
 .callout-info {
-  background: #c8dffa;
-  border: 1px solid #6ba9f1;
-  border-bottom: 3px solid #2480eb;
+        background: #e3f3fc;
+        border-color: #b2cfdf;
 }
-.callout-info .dashicons:before {
-  content: "\f348";
-  color: #2480eb;
+
+.callout-info:before {
+        content: "\f348";
+        color: #b2cfdf;
 }
+
 .callout-tip {
-  background: #e0f9d0;
-  border: 1px solid #a4ed76;
-  border-bottom: 3px solid #69e01d;
+        background: #f3f9ec;
+        border-color: #cfe8be;
 }
-.callout-tip .dashicons:before {
-  content: "\f339";
-  color: #69e01d;
+
+.callout-tip:before {
+        content: "\f339";
+        color: #cfe8be;
 }
+
 .callout-alert {
-  background: #fff9c7;
-  border: 1px solid #ffe92e;
-  border-bottom: 3px solid #c7b200;
+        background: #fffbe6;
+        border-color: #e4d48c;
 }
-.callout-alert .dashicons:before {
-  content: "\f109";
-  color: #c7b200;
+
+.callout-alert:before {
+        content: "\f109";
+        color: #e4d48c;
 }
+
 .callout-warning {
-  background: #ffd8d8;
-  border: 1px solid #ff7272;
-  border-bottom: 3px solid #ff3f3f;
+        background: #ffeeee;
+        border-color: #e1b6b5;
 }
-.callout-warning .dashicons:before {
-  content: "\f153";
-  color: #ff3f3f;
-}
 
+.callout-warning:before {
+        content: "\f153";
+        color: #e1b6b5;
+}
+ No newline at end of file