WordPress.org

Making WordPress.org

Changeset 2489


Ignore:
Timestamp:
02/09/2016 09:51:24 PM (6 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:
2 edited

Legend:

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

    r1430 r2489  
    131131
    132132            // Message prefix.
    133             $prefix = '<strong>' . $this->shortcodes[ $shortcode ] . '</strong>';
     133            $prefix = '<span class="screen-reader-text">' . $this->shortcodes[ $shortcode ] . '</span>';
    134134
    135135            // Content with prefix.
     
    138138            // Callout box output.
    139139            $output .= "<div class='callout {$class}'>";
    140             $output .= '<div class="dashicons"></div>'; // Icon holder
    141140            $output .= apply_filters( 'the_content', $content );
    142141            $output .= '</div>';
  • sites/trunk/wordpress.org/public_html/wp-content/plugins/handbook/stylesheets/callout-boxes.css

    r1550 r2489  
    11.callout {
    2   padding: 15px 40px 15px 46px;
     2  padding: 1em 3em 1em 3.7em;
    33  margin-bottom: 1.5em;
    44  overflow: auto;
    55  position: relative;
    6 }
    7 .callout .dashicons {
    8   position: absolute;
    9   font-size: 2em;
    10   top: 12px;
    11   left: 10px;
     6  border-width: 1px 1px 3px 1px;
     7  border-style: solid;
    128}
    139.callout p {
    1410  margin-bottom: 0;
    1511}
     12.callout p ~ p {
     13  margin-top: 1em;
     14}
     15.callout:before {
     16  content: "";
     17  font-family: "dashicons";
     18  position: absolute;
     19  font-size: 2em;
     20  top: 0.14em;
     21  left: 0.5em;
     22}
     23.callout .screen-reader-text + br {
     24  display: none;
     25}
    1626.callout-info {
    1727  background: #e5f5fa;
    18   border: 1px solid #00a0d2;
    19   border-bottom: 3px solid #00a0d2;
     28  border-color: #00a0d2;
    2029}
    21 .callout-info .dashicons:before {
     30.callout-info:before {
    2231  content: "\f348";
    2332  color: #00a0d2 ;
     
    2837  border-bottom: 3px solid #64b450;
    2938}
    30 .callout-tip .dashicons:before {
     39.callout-tip:before {
    3140  content: "\f339";
    3241  color: #64b450;
     
    3746  border-bottom: 3px solid #ffb900;
    3847}
    39 .callout-alert .dashicons:before {
    40   content: "\f109";
     48.callout-alert:before {
     49  content: "\f227";
    4150  color: #ffb900;
    4251}
     
    4655  border-bottom: 3px solid #826eb4;
    4756}
    48 .callout-tutorial .dashicons:before {
     57.callout-tutorial:before {
    4958  content: "\f308";
    5059  color: #826eb4;
     
    5564  border-bottom: 3px solid #dc3232;
    5665}
    57 .callout-warning .dashicons:before {
     66.callout-warning:before {
    5867  content: "\f153";
    5968  color: #dc3232;
Note: See TracChangeset for help on using the changeset viewer.