WordPress.org

Making WordPress.org

Ticket #630: 630.diff

File 630.diff, 3.4 KB (added by McGuive7, 7 years ago)

Updated markup and CSS for callout shortcodes

  • handbook/inc/callout-boxes.php

     
    2323         */
    2424        public function __construct() {
    2525                $this->shortcodes = array(
    26                         'info'    => __( 'Note:',    'wporg' ),
    27                         'tip'     => __( 'Tip:',     'wporg' ),
    28                         'alert'   => __( 'Alert:',   'wporg' ),
    29                         'warning' => __( 'Warning:', 'wporg' )
    30                 );
     26                        'info'    => __( 'Note',    'wporg' ),
     27                        'tip'     => __( 'Tip',     'wporg' ),
     28                        'alert'   => __( 'Alert',   'wporg' ),
     29                        'warning' => __( 'Warning', 'wporg' )
     30                        );
    3131
    3232                add_action( 'init', array( $this, 'register_shortcodes' ) );
    3333        }
     
    115115                        $class = sanitize_html_class( $shortcode );
    116116                        $class = empty( $class ) ? '' : "callout-{$class}";
    117117
    118                         // Message prefix.
    119                         $prefix = '<strong>' . $this->shortcodes[ $shortcode ] . '</strong>';
    120 
    121118                        // Content with prefix.
    122                         $content = "{$prefix} {$content}";
     119                        $content = "{$content}";
    123120
    124121                        // Callout box output.
    125122                        $output .= "<div class='callout {$class}'>";
    126                         $output .= '<div class="dashicons"></div>'; // Icon holder
    127123                        $output .= apply_filters( 'the_content', $content );
    128124                        $output .= '</div>';
    129125                }
     
    132128}
    133129
    134130$callouts = new WPorg_Handbook_Callout_Boxes();
    135 
  • handbook/stylesheets/callout-boxes.css

     
    11.callout {
    2   padding: 15px 40px 15px 46px;
    3   margin-bottom: 1.5em;
    4   overflow: auto;
    5   position: relative;
     2        position: relative;
     3        overflow: auto;
     4        padding: 1em 3em 1em 4em;
     5        margin-bottom: 1.5em;
     6        border-width: 1px 1px 3px 1px;
     7        border-style: solid;
    68}
    7 .callout .dashicons {
    8   position: absolute;
    9   font-size: 2em;
    10   top: 12px;
    11   left: 10px;
     9
     10.callout:before {
     11        content: "";
     12        position: absolute;
     13        font-family: "dashicons";
     14        font-size: 2em;
     15        top: auto;
     16        left: 0.5em;
    1217}
    13 .callout p {
    14   margin-bottom: 0;
     18
     19.callout .prefix {
     20        display: block;
     21        margin-bottom: 0.7em;
     22        font-size: 2em;
     23        line-height: 1;
     24        font-weight: bold;
    1525}
     26
    1627.callout-info {
    17   background: #c8dffa;
    18   border: 1px solid #6ba9f1;
    19   border-bottom: 3px solid #2480eb;
     28        background: #e3f3fc;
     29        border-color: #b2cfdf;
    2030}
    21 .callout-info .dashicons:before {
    22   content: "\f348";
    23   color: #2480eb;
     31
     32.callout-info:before {
     33        content: "\f348";
     34        color: #b2cfdf;
    2435}
     36
    2537.callout-tip {
    26   background: #e0f9d0;
    27   border: 1px solid #a4ed76;
    28   border-bottom: 3px solid #69e01d;
     38        background: #f3f9ec;
     39        border-color: #cfe8be;
    2940}
    30 .callout-tip .dashicons:before {
    31   content: "\f339";
    32   color: #69e01d;
     41
     42.callout-tip:before {
     43        content: "\f339";
     44        color: #cfe8be;
    3345}
     46
    3447.callout-alert {
    35   background: #fff9c7;
    36   border: 1px solid #ffe92e;
    37   border-bottom: 3px solid #c7b200;
     48        background: #fffbe6;
     49        border-color: #e4d48c;
    3850}
    39 .callout-alert .dashicons:before {
    40   content: "\f109";
    41   color: #c7b200;
     51
     52.callout-alert:before {
     53        content: "\f109";
     54        color: #e4d48c;
    4255}
     56
    4357.callout-warning {
    44   background: #ffd8d8;
    45   border: 1px solid #ff7272;
    46   border-bottom: 3px solid #ff3f3f;
     58        background: #ffeeee;
     59        border-color: #e1b6b5;
    4760}
    48 .callout-warning .dashicons:before {
    49   content: "\f153";
    50   color: #ff3f3f;
    51 }
    5261
     62.callout-warning:before {
     63        content: "\f153";
     64        color: #e1b6b5;
     65}
     66 No newline at end of file