WordPress.org
Get WordPress

Plugin Directory

Changeset 3181596


Ignore:
Timestamp:
11/04/2024 03:46:27 PM (17 months ago)
Author:
r2b2io
Message:

1.1.1

Location:
r2b2-monetization
Files:
371 added
9 edited

Legend:

Unmodified
Added
Removed

  • r2b2-monetization

    • Property svn:ignore set to
      *.idea

  • r2b2-monetization/trunk/constants.php

    r3109328 r3181596  
    11<?php
    2 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
     2if ( ! defined( 'ABSPATH' ) ) {
     3    exit;
     4} // Exit if accessed directly
     5
     6define( "R2B2_PLUGIN_VERSION", '1.1.1' );
    37
    48define( "R2B2_OPTIONS", 'r2b2-settings' );
    … …  
    711define( "R2B2_OPTION_PLACEMENT_LIST_DEMO", 'r2b2_settings_list_demo' );
    812define( "R2B2_OPTION_PLACEMENT_LIST_DELIVERY", 'r2b2_settings_list_delivery' );
     13define( "R2B2_OPTION_PLACEMENT_LIST_DATA", 'r2b2_settings_list_data' );
    914
    1015define( "R2B2_DELIVERY_DOMAIN", '//delivery.r2b2.io/' );
    … …  
    2631    R2B2_FORMAT_INMEDIA
    2732] );
     33
     34define( "R2B2_PL_DATA_DGPM", 'dgpm' );
     35define( "R2B2_PL_DATA_DELIVERY", 'delivery_enabled' );
     36define( "R2B2_PL_DATA_PARAGRAPH_INDEX", 'paragraph_index' );
     37define( "R2B2_PL_DATA_TABLE_INDEX", 'table_index' );
     38define( "R2B2_PL_DATA_DEMO", 'demo' );

  • r2b2-monetization/trunk/css/r2b2-admin.css

    r3109328 r3181596  
    66}
    77
    8 .r2b2-options{
     8.r2b2-options {
    99    margin-top: 1em;
    1010}
    … …  
    6666}
    6767
     68#r2b2-placement-table .r2b2-pltab-paragraph{
     69    max-width: 5em;
     70    text-align: center;
     71}
     72
    6873#r2b2-placement-table thead tr {
    6974    background: #F1F1F1;
    … …  
    9297        max-width: 60em;
    9398    }
     99
    94100    #r2b2-placement-table th, #r2b2-placement-table td {
    95101        padding: 0.5em 2em;
    96102        font-size: larger;
    97103    }
     104
    98105    .r2b2-popup-foreground {
    99106        top: 14em;

  • r2b2-monetization/trunk/index.php

    r3110442 r3181596  
    33 * Plugin Name:       R2B2 Monetization
    44 * Description:       Maximize your profits today with programmatic advertising.
    5  * Version:           1.0.3
     5 * Version:           1.1.1
    66 * Requires at least: 5.2
    77 * Requires PHP:      7.2
    … …  
    1212 * Domain Path:       /languages
    1313 */
    14 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
     14if ( ! defined( 'ABSPATH' ) ) {
     15    exit;
     16} // Exit if accessed directly
    1517
    1618require_once __DIR__ . '/constants.php';
    1719require_once __DIR__ . '/utils.php';
    1820require_once __DIR__ . '/options.php';
     21require_once __DIR__ . '/migrations.php';
    1922require_once __DIR__ . '/plugin-uninstall.php';
    2023
    … …  
    2831 */
    2932function r2b2_enqueue_script() {
    30     wp_enqueue_style( 'r2b2-styles', plugins_url( '/css/r2b2-styles.css', __FILE__ ), false, r2b2_get_plugin_version() );
    31 
    32     $options            = get_option( R2B2_OPTIONS );
    33     $listDelivery       = $options[ R2B2_OPTION_PLACEMENT_LIST_DELIVERY ] ?? '';
    34     $listDemo           = $options[ R2B2_OPTION_PLACEMENT_LIST_DEMO ] ?? '';
    35     $placementsDelivery = explode( "\n", $listDelivery ) ?? [];
    36     $placementsDemo     = explode( "\n", $listDemo ) ?? [];
     33    wp_enqueue_style( 'r2b2-styles', plugins_url( '/css/r2b2-styles.css', __FILE__ ), false, R2B2_PLUGIN_VERSION );
     34    $placements = r2b2_get_placement_data();
    3735
    3836    $deviceIsMobile = wp_is_mobile();
    3937
    40     foreach ( $placementsDelivery as $placement ) {
    41         if ( in_array( r2b2_get_mediatype( $placement ), R2B2_FORMATS_WITHOUT_CONTAINER ) ) {
    42             if ( $deviceIsMobile === r2b2_is_placement_mobile( $placement ) ) {
    43                 $showDemo = in_array( $placement, $placementsDemo ) && current_user_can( 'administrator' );
    44                 r2b2_enqueue_placement( $placement, $showDemo );
     38    foreach ( $placements as $placement ) {
     39        if ( ! $placement[ R2B2_PL_DATA_DELIVERY ] ) {
     40            continue;
     41        }
     42        if ( in_array( r2b2_get_mediatype( $placement[ R2B2_PL_DATA_DGPM ]['p'] ), R2B2_FORMATS_WITHOUT_CONTAINER ) ) {
     43            if ( ! ! $deviceIsMobile === ! ! $placement[ R2B2_PL_DATA_DGPM ]['m'] ) {
     44                $showDemo = $placement[ R2B2_PL_DATA_DEMO ] && current_user_can( 'administrator' );
     45                r2b2_enqueue_placement( $placement[ R2B2_PL_DATA_DGPM ], $showDemo );
    4546            }
    4647        }
    … …  
    4950
    5051add_action( 'wp_enqueue_scripts', 'r2b2_enqueue_script' );
    51 
    52 /**
    53  * Shortcode insertion of specific placements.
    54  * Insert `[r2b2 placement='domain.example/group/position/mobile']` in the page editor to an exact position where you want the ad.
    55  */
    56 function r2b2_shortcode_handler( $atts ) {
    57 
    58     // Attributes
    59     $atts = shortcode_atts(
    60         array(
    61             'placement' => '',
    62             'demo'      => false,
    63         ),
    64         $atts
    65     );
    66 
    67     if ( ! empty( $atts['placement'] ) ) {
    68         $placementDiv = 'r2b2-ad--' . str_replace( '/', '_', $atts['placement'] );
    69         $placementUrl = $atts['placement'];
    70         if ( ! empty( $atts['demo'] ) && current_user_can( 'administrator' ) ) {
    71             return r2b2_selfpromo_html( $placementUrl );
    72         } else {
    73             return r2b2_placement_html( r2b2_delivery_url( $placementUrl ), $placementDiv );
    74         }
    75     }
    76 
    77     return '';
    78 }
    79 
    80 function r2b2_shortcodes_init() {
    81     add_shortcode( 'r2b2', 'r2b2_shortcode_handler' );
    82 }
    83 
    84 add_action( 'init', 'r2b2_shortcodes_init' );
    8552
    8653/**
    … …  
    9259function r2b2_insert_into_posts( $content ) {
    9360    if ( ! empty( $content ) ) {
    94         $options            = get_option( R2B2_OPTIONS );
    95         $listDelivery       = $options[ R2B2_OPTION_PLACEMENT_LIST_DELIVERY ] ?? '';
    96         $listDemo           = $options[ R2B2_OPTION_PLACEMENT_LIST_DEMO ] ?? '';
    97         $placementsDelivery = explode( "\n", $listDelivery ) ?? [];
    98         $placementsDemo     = explode( "\n", $listDemo ) ?? [];
     61        $placements         = r2b2_get_placement_data();
     62        $placementsToInsert = [];
    9963
    10064        $deviceIsMobile = wp_is_mobile();
    101         $placements     = [];
    10265
    103         foreach ( $placementsDelivery as $placement ) {
    104             if ( ! in_array( r2b2_get_mediatype( $placement ), R2B2_FORMATS_WITHOUT_CONTAINER ) ) {
    105                 if ( $deviceIsMobile === r2b2_is_placement_mobile( $placement ) ) {
    106                     $placements[] = $placement;
     66        foreach ( $placements as $placement ) {
     67            if ( ! $placement[ R2B2_PL_DATA_DELIVERY ] ) {
     68                continue;
     69            }
     70            if ( ! in_array( r2b2_get_mediatype( $placement[ R2B2_PL_DATA_DGPM ]['p'] ), R2B2_FORMATS_WITHOUT_CONTAINER ) ) {
     71                if ( ! ! $deviceIsMobile === ! ! $placement[ R2B2_PL_DATA_DGPM ]['m'] ) {
     72                    if ( is_numeric( $placement[ R2B2_PL_DATA_PARAGRAPH_INDEX ] ) ) {
     73                        $placementsToInsert[ $placement[ R2B2_PL_DATA_PARAGRAPH_INDEX ] ]   = $placementsToInsert[ $placement[ R2B2_PL_DATA_PARAGRAPH_INDEX ] ] ?? [];
     74                        $placementsToInsert[ $placement[ R2B2_PL_DATA_PARAGRAPH_INDEX ] ][] = $placement;
     75                    }
    10776                }
    10877            }
    … …  
    11584            $content .= "</p>";
    11685
    117             if ( ( $index + 1 ) % R2B2_FREQUENCY_IN_POST === 0 ) {
    118                 $placementIndex = round( ( $index ) / R2B2_FREQUENCY_IN_POST ) - 1;
    119                 if ( ! empty( $placements[ $placementIndex ] ) ) {
    120                     $placements[ $placementIndex ] = preg_replace( '/[\x00-\x1F\x80-\xFF]/', '', $placements[ $placementIndex ] );
    121                     $placementDiv                  = 'r2b2-ad--' . str_replace( [
    122                             '/',
    123                             '.'
    124                         ], '_', $placements[ $placementIndex ] );
    125                     if ( in_array( $placements[ $placementIndex ], $placementsDemo ) && current_user_can( 'administrator' ) ) {
    126                         $content .= r2b2_selfpromo_html( $placements[ $placementIndex ] );
    127                     } else {
    128                         $content .= r2b2_placement_html( r2b2_delivery_url( $placements[ $placementIndex ] ), $placementDiv );
    129                     }
     86            if ( ! empty( $placementsToInsert[ $index + 1 ] ) ) {
     87                $pls = $placementsToInsert[ $index + 1 ];
     88                foreach ( $pls as $pl ) {
     89                    $placementDiv = 'r2b2-ad--' . preg_replace( '/[\x00-\x1F\x80-\xFF\/\.]/', '', join( '_', $pl[ R2B2_PL_DATA_DGPM ] ) );
     90                    $selfpromo    = $pl[ R2B2_PL_DATA_DEMO ] && current_user_can( 'administrator' );
     91                    $content      .= r2b2_placement_html( r2b2_delivery_url( $pl[ R2B2_PL_DATA_DGPM ], $selfpromo, $placementDiv ), $placementDiv );
    13092                }
    13193            }

  • r2b2-monetization/trunk/options.php

    r3109328 r3181596  
    1010add_action( 'admin_enqueue_scripts', 'r2b2_admin_styles' );
    1111function r2b2_admin_styles() {
    12     $pluginVersion = r2b2_get_plugin_version();
     12    $pluginVersion = R2B2_PLUGIN_VERSION;
    1313    $screenId      = get_current_screen()->id;
    1414    if ( $screenId === 'settings_page_r2b2' || $screenId === 'toplevel_page_r2b2' ) {
    … …  
    6363            <thead>
    6464            <tr>
    65                 <th>Name</th>
    66                 <th>Media type</th>
    67                 <th>Status</th>
    68                 <th title="To validate functionality of a specific ad space you can switch on the demo ad. The demo ad will be displayed to the website administrators and doesn’t yield any profit.">
     65                <th class="r2b2-pltab-name">Name</th>
     66                <th class="r2b2-pltab-mt">Media type</th>
     67                <th class="r2b2-pltab-status">Status</th>
     68                <th class="r2b2-pltab-paragraph">Article paragraph</th>
     69                <th class="r2b2-pltab-demo" title="To validate functionality of a specific ad space you can switch on the demo ad. The demo ad will be displayed to the website administrators and doesn’t yield any profit.">
    6970                    Demo ad
    7071                </th>
     72                <th class="r2b2-pltab-action">Action</th>
    7173            </tr>
    7274            </thead>
    … …  
    9294
    9395    add_settings_section( 'r2b2_section_all', '', 'r2b2_section_all_text', 'r2b2' );
    94     add_settings_field( R2B2_OPTION_PLACEMENT_LIST, 'Placement list', 'r2b2_settings_list_setup', 'r2b2', 'r2b2_section_all' );
    95     add_settings_field( R2B2_OPTION_PLACEMENT_LIST_DELIVERY, 'Placements for delivery', 'r2b2_settings_list_delivery_setup', 'r2b2', 'r2b2_section_all' );
    96     add_settings_field( R2B2_OPTION_PLACEMENT_LIST_DEMO, 'Demo placements', 'r2b2_settings_list_demo_setup', 'r2b2', 'r2b2_section_all' );
     96    add_settings_field( R2B2_OPTION_PLACEMENT_LIST, 'Placement list (DEPRECATED)', 'r2b2_settings_list_setup', 'r2b2', 'r2b2_section_all' );
     97    add_settings_field( R2B2_OPTION_PLACEMENT_LIST_DELIVERY, 'Placements for delivery (DEPRECATED)', 'r2b2_settings_list_delivery_setup', 'r2b2', 'r2b2_section_all' );/** @deprecated */
     98    add_settings_field( R2B2_OPTION_PLACEMENT_LIST_DATA, 'Placements for delivery on mobile', 'r2b2_settings_list_data_setup', 'r2b2', 'r2b2_section_all' );
     99    add_settings_field( R2B2_OPTION_PLACEMENT_LIST_DEMO, 'Demo placements (DEPRECATED)', 'r2b2_settings_list_demo_setup', 'r2b2', 'r2b2_section_all' );
    97100
    98101}
    … …  
    103106}
    104107
     108/** @deprecated */
    105109function r2b2_settings_list_delivery_setup() {
    106110    r2b2_textarea_render( R2B2_OPTION_PLACEMENT_LIST_DELIVERY );
    107111}
    108 
     112function r2b2_settings_list_data_setup() {
     113    r2b2_textarea_render( R2B2_OPTION_PLACEMENT_LIST_DATA );
     114}
    109115function r2b2_settings_list_demo_setup() {
    110116    r2b2_textarea_render( R2B2_OPTION_PLACEMENT_LIST_DEMO );
    … …  
    138144 */
    139145function r2b2_options_validate( $input ) {
    140     $valid = [];
     146    $valid = [];
    141147    $lists = [
    142         R2B2_OPTION_PLACEMENT_LIST,
    143         R2B2_OPTION_PLACEMENT_LIST_DEMO,
    144         R2B2_OPTION_PLACEMENT_LIST_DELIVERY
     148        R2B2_OPTION_PLACEMENT_LIST_DATA,
    145149    ];
    146     $regex = '/^[a-z0-9\.\-_\/]+$/';
     150    $regex = '/^[a-zA-Z0-9\,\.\:\-_\/\ \{\}\'\"\[\]]+$/';
    147151    foreach ( $lists as $listKey ) {
    148152        $validPlacements = [];
    149153        if ( ! empty( $input[ $listKey ] ) ) {
    150154            $list = explode( "\n", $input[ $listKey ] );
    151             foreach ( $list as $placement ) {
    152                 if ( empty( $placement ) ) {
     155            foreach ( $list as $placementData ) {
     156                if ( empty( $placementData ) ) {
    153157                    continue;
    154158                }
    155                 $placement = trim( $placement );
    156                 if ( ! preg_match( $regex, $placement ) ) {
     159                $placementData = trim( $placementData );
     160                if ( ! preg_match( $regex, $placementData ) ) {
    157161                    continue;
    158162                }
    159                 if ( ! in_array( substr_count( $placement, '/' ), [ 2, 3 ] ) ) {
    160                     continue;
    161                 }
    162                 $validPlacements[] = $placement;
     163                $validPlacements[] = $placementData;
    163164            }
    164165        }

  • r2b2-monetization/trunk/r2b2-options.js

    r3109328 r3181596  
    11(function (win, doc) {
    2     let cAdminPage, cForm, cPlacementTable, cPlacementTableBody, cPopupAddPlacements, cInputList, cInputListDemo,
    3         cInputListDelivery;
     2    let cAdminPage, cPlacementTable, cPlacementTableBody, cPopup;
     3    let cInputListData;
    44
    55
    … …  
    1313        cAdminPage = doc.querySelector('.r2b2-options');
    1414        cPlacementTable = doc.querySelector('#r2b2-placement-table');
    15         cInputList = doc.querySelector('#r2b2_settings_list');
    16         cInputListDemo = doc.querySelector('#r2b2_settings_list_demo');
    17         cInputListDelivery = doc.querySelector('#r2b2_settings_list_delivery');
     15        cInputListData = doc.querySelector('#r2b2_settings_list_data');
    1816
    1917        if (!isElement(cPlacementTable) ||
    20             !isElement(cInputList) ||
    21             !isElement(cInputListDemo) ||
    22             !isElement(cInputListDelivery)) {
     18            !isElement(cInputListData)) {
    2319            setTimeout(init, 3000);
    2420            console.warn('[R2B2] Essential elements not found. Next try in 3 seconds. Contact R2B2 support in case of problems.');
    … …  
    4440        cPlacementTable.appendChild(cPlacementTableBody);
    4541
    46         const placements = getPlacementsFromList(cInputList);
     42        const placements = getPlacementData();
    4743        if (placements.length === 0) {
    4844            for (let i = 0; i < 3; i++) {
    … …  
    5248                let td3 = doc.createElement('td');
    5349                let td4 = doc.createElement('td');
     50                let td5 = doc.createElement('td');
     51                let td6 = doc.createElement('td');
    5452                tr.appendChild(td1);
    5553                tr.appendChild(td2);
    5654                tr.appendChild(td3);
    5755                tr.appendChild(td4);
     56                tr.appendChild(td5);
     57                tr.appendChild(td6);
    5858                cPlacementTableBody.appendChild(tr);
    5959            }
    6060        } else {
    61             for (const placement of placements) {
     61            for (const placementData of placements) {
    6262                let tr = doc.createElement('tr');
    6363                let tdName = doc.createElement('td');
    6464                let tdType = doc.createElement('td');
    6565                let tdState = doc.createElement('td');
     66                let tdParagraphIndex = doc.createElement('td');
    6667                let tdDemo = doc.createElement('td');
    67 
    68                 tdName.textContent = getAYMPlacementName(placement);
    69                 if (placement.indexOf('sticky') !== -1 || placement.indexOf('fixed') !== -1) {
    70                     tdType.textContent = 'Sticky';
    71                 } else if (placement.indexOf('vignette') !== -1) {
    72                     tdType.textContent = 'Vignette';
    73                 } else {
    74                     tdType.textContent = '-';
     68                let tdAction = doc.createElement('td');
     69
     70                tdName.className = 'r2b2-pltab-name';
     71                tdType.className = 'r2b2-pltab-mt';
     72                tdState.className = 'r2b2-pltab-status';
     73                tdParagraphIndex.className = 'r2b2-pltab-paragraph';
     74                tdDemo.className = 'r2b2-pltab-demo';
     75                tdAction.className = 'r2b2-pltab-action';
     76
     77                tdName.textContent = getAYMPlacementName(placementData.dgpm);
     78                tdType.textContent = getMediaType(placementData.dgpm.p);
     79                const randomText = Math.round(Math.random() * 1000);
     80                tdState.appendChild(createToggle('delivery-' + randomText, 'delivery-' + randomText, placementData.delivery_enabled, createCheckboxListenerDelivery(placementData.dgpm)));
     81                tdDemo.appendChild(createToggle('demo-' + randomText, 'demo-' + randomText, placementData.demo, createCheckboxListenerDemo(placementData.dgpm)));
     82
     83                const textParagraphIndex = doc.createElement('span');
     84                textParagraphIndex.textContent = placementData.paragraph_index ?? '-';
     85                tdParagraphIndex.appendChild(textParagraphIndex);
     86
     87                const buttonEditPlacement = createButton('Edit');
     88                if (!isPlacementWithContainer(placementData.dgpm)) {
     89                    buttonEditPlacement.classList.add('button-disabled');
     90                    buttonEditPlacement.disabled = true;
    7591                }
    76                 const plNameClean = placement.replaceAll(/[ \.\/\-]/gi, '_');
    77                 tdState.appendChild(createToggle('delivery-' + plNameClean, 'delivery-' + plNameClean, isPlacementInList(placement, cInputListDelivery), createCheckboxListenerDelivery(placement)));
    78                 tdDemo.appendChild(createToggle('demo-' + plNameClean, 'demo-' + plNameClean, isPlacementInList(placement, cInputListDemo), createCheckboxListenerDemo(placement)));
     92                buttonEditPlacement.addEventListener('click', () => displayPopupEditPlacement(placementData.dgpm));
     93                tdAction.appendChild(buttonEditPlacement);
    7994
    8095                tr.appendChild(tdName);
    8196                tr.appendChild(tdType);
    8297                tr.appendChild(tdState);
     98                tr.appendChild(tdParagraphIndex);
    8399                tr.appendChild(tdDemo);
     100                tr.appendChild(tdAction);
    84101                cPlacementTableBody.appendChild(tr);
    85102            }
    … …  
    88105
    89106    function displayPopupAddPlacements() {
    90         // if (cPopupAddPlacements) throw new Error('Popup already rendered');
    91         if (cPopupAddPlacements) closePopupAddPlacements();
    92 
    93         cPopupAddPlacements = doc.createElement('div');
     107        if (cPopup) closePopup();
     108
     109        cPopup = doc.createElement('div');
    94110        const cBack = doc.createElement('div');
    95111        const cFront = doc.createElement('div');
    … …  
    99115        const cText2 = doc.createElement('p');
    100116        const cTextArea = doc.createElement('textarea');
     117        const cButtonContainer = doc.createElement('div');
    101118        const cSave = doc.createElement('button');
    102119
    103         cPopupAddPlacements.className = 'r2b2-popup';
     120        cPopup.className = 'r2b2-popup';
    104121        cFront.className = 'r2b2-popup-foreground';
    105122        cBack.className = 'r2b2-popup-background';
    106         cBack.addEventListener('click', closePopupAddPlacements);
     123        cBack.addEventListener('click', closePopup);
    107124
    108125        cCloser.className = 'r2b2-popup-closer';
    109126        cCloser.textContent = '⨯';
    110127        cCloser.title = 'Close popup';
    111         cCloser.addEventListener('click', closePopupAddPlacements);
     128        cCloser.addEventListener('click', closePopup);
    112129        cCloser.focus();
    113130
    … …  
    118135        cTextArea.style.width = '100%';
    119136        cTextArea.setAttribute('rows', '8');
     137
     138        cButtonContainer.style.textAlign = 'right';
    120139
    121140        cSave.className = 'button button__primary button--sm';
    … …  
    129148        cFront.appendChild(cText2);
    130149        cFront.appendChild(cTextArea);
    131         cFront.appendChild(cSave);
    132         cPopupAddPlacements.appendChild(cFront);
    133         cPopupAddPlacements.appendChild(cBack);
    134         cAdminPage.appendChild(cPopupAddPlacements);
     150        cButtonContainer.appendChild(cSave);
     151        cFront.appendChild(cButtonContainer);
     152        cPopup.appendChild(cFront);
     153        cPopup.appendChild(cBack);
     154        cAdminPage.appendChild(cPopup);
    135155        cTextArea.focus();
    136156    }
    137157
    138     function closePopupAddPlacements() {
    139         if (typeof cPopupAddPlacements === "object" && typeof cPopupAddPlacements.remove === "function") {
    140             cPopupAddPlacements.remove();
    141             cPopupAddPlacements = null;
     158    function displayPopupEditPlacement(dgpm, callbackAfterSave) {
     159        if (cPopup) closePopup();
     160        let plData = getPlacementDataSingle(dgpm);
     161
     162        cPopup = doc.createElement('div');
     163        const cBack = doc.createElement('div');
     164        const cFront = doc.createElement('div');
     165        const cCloser = doc.createElement('button');
     166        const cForm = doc.createElement('form');
     167        const cPlName = doc.createElement('h1');
     168        const cHeadline = doc.createElement('h2');
     169        const cText1 = doc.createElement('p');
     170        const cText2 = doc.createElement('span');
     171        const cInputParagraph = doc.createElement('input');
     172        const cButtonContainer = doc.createElement('div');
     173        const cSave = doc.createElement('button');
     174
     175        cPopup.className = 'r2b2-popup';
     176        cFront.className = 'r2b2-popup-foreground';
     177        cBack.className = 'r2b2-popup-background';
     178        cBack.addEventListener('click', closePopup);
     179
     180        cCloser.className = 'r2b2-popup-closer';
     181        cCloser.textContent = '⨯';
     182        cCloser.title = 'Close popup';
     183        cCloser.addEventListener('click', closePopup);
     184        cCloser.focus();
     185
     186        cPlName.textContent = getAYMPlacementName(dgpm);
     187        cHeadline.textContent = 'Settings for banner placement in the articles';
     188        cText1.innerHTML = 'The banner will be displayed in the article after the selected paragraph.';
     189        cText2.textContent = 'Article paragraph: ';
     190
     191        cInputParagraph.type = 'number';
     192        cInputParagraph.min = '1';
     193        cInputParagraph.max = '50';
     194        cInputParagraph.required = true;
     195        cInputParagraph.value = plData.paragraph_index;
     196
     197        cButtonContainer.style.textAlign = 'right';
     198
     199        cSave.type = "submit";
     200        cSave.className = 'button button__primary button--sm';
     201        cSave.innerHTML = '<span class="text-block text-block--bold text-block--md">Save</span>';
     202
     203        cForm.addEventListener('submit', function (ev) {
     204            ev.preventDefault();
     205
     206            updatePlacementData(dgpm, {paragraph_index: cInputParagraph.value});
     207            closePopup();
     208            if (callbackAfterSave && typeof callbackAfterSave === "function"){
     209                callbackAfterSave();
     210            }
     211            displayPlacementTable();
     212        })
     213
     214        cFront.appendChild(cForm);
     215        cForm.appendChild(cCloser);
     216        cForm.appendChild(cPlName);
     217        cForm.appendChild(cHeadline);
     218        cForm.appendChild(cText1);
     219        cForm.appendChild(cText2);
     220        cForm.appendChild(cInputParagraph);
     221        cButtonContainer.appendChild(cSave);
     222        cForm.appendChild(cButtonContainer);
     223        cPopup.appendChild(cFront);
     224        cPopup.appendChild(cBack);
     225        cAdminPage.appendChild(cPopup);
     226        cInputParagraph.focus();
     227    }
     228
     229    function closePopup() {
     230        if (typeof cPopup === "object" && typeof cPopup.remove === "function") {
     231            cPopup.remove();
     232            cPopup = null;
    142233        }
    143234        displayPlacementTable();
    144235    }
    145236
     237
     238    function createButton(text) {
     239        const button = doc.createElement('button');
     240        const content = doc.createElement('span');
     241
     242        button.setAttribute('class', 'button button__primary button--sm');
     243        button.style.verticalAlign = 'middle';
     244        content.setAttribute('class', 'text-block text-block--bold text-block--md');
     245        content.textContent = text;
     246
     247        button.appendChild(content);
     248        return button;
     249    }
    146250
    147251    function createToggle(id, name, checked, eventListener) {
    … …  
    165269    }
    166270
    167     function createCheckboxListenerDelivery(placement) {
     271    function createCheckboxListenerDelivery(dgpm) {
    168272        return function () {
    169             if (this.checked) {
    170                 addPlacementToList(placement, cInputListDelivery);
    171             } else {
    172                 removePlacementFromList(placement, cInputListDelivery);
    173             }
    174         }
    175     }
    176 
    177     function createCheckboxListenerDemo(placement) {
     273            if (isPlacementWithContainer(dgpm)){
     274                const pl = getPlacementDataSingle(dgpm);
     275                if (!pl.paragraph_index && this.checked){
     276                    displayPopupEditPlacement(dgpm, function () {
     277                        updatePlacementData(dgpm, {delivery_enabled: true})
     278                    }.bind(this));
     279                    return;
     280                }
     281            }
     282            updatePlacementData(dgpm, {delivery_enabled: this.checked});
     283        }
     284    }
     285
     286    function createCheckboxListenerDemo(dgpm) {
    178287        return function () {
    179             if (this.checked) {
    180                 addPlacementToList(placement, cInputListDemo);
    181             } else {
    182                 removePlacementFromList(placement, cInputListDemo);
    183             }
     288            updatePlacementData(dgpm, {demo: this.checked});
    184289        }
    185290    }
    186291
    187292    /*  Processing  */
     293
    188294    function processPopupAddPlacements(newPlacements) {
    189295        if (typeof newPlacements !== "string") throw new Error('Invalid data in new placements');
    … …  
    193299            const srcUrl = match[2];
    194300            const urlParts = srcUrl.match(regexUrl);
    195             let placement = [
    196                 urlParts[2],
    197                 urlParts[3],
    198                 urlParts[4]
    199             ].join('/');
    200             if (urlParts[5] && !['desktop', 'classic', '0'].includes(urlParts[5])) {
    201                 placement += '/mobile';
    202             }
    203             if (addPlacementToList(placement, cInputList)) {
    204                 addPlacementToList(placement, cInputListDelivery);
    205             }
    206         }
    207 
    208         closePopupAddPlacements();
    209     }
    210 
    211     function getPlacementsFromList(listElement) {
    212         if (!isElement(listElement)) throw new Error('List is not an Element');
    213         const value = listElement.value;
    214         if (value === '') {
    215             return [];
    216         } else {
    217             return value.split('\n');
    218         }
     301            const dgpm = {
     302                d: urlParts[2],
     303                g: urlParts[3],
     304                p: urlParts[4],
     305                m: !['desktop', 'classic', '0'].includes(urlParts[5]),
     306            };
     307            addPlacementData(createPlacementObj(dgpm, !isPlacementWithContainer(dgpm)));
     308        }
     309        closePopup();
    219310    }
    220311
    221312    /**
    222313     *
    223      * @param placement
    224      * @param listElement
    225      * @returns {boolean}   True = Placement added.
    226      *                      False = Placement not added.
     314     * @returns {string[]|[]}
    227315     */
    228     function addPlacementToList(placement, listElement) {
    229         if (!isElement(listElement)) throw new Error('List is not an Element');
    230         if (isPlacementInList(placement, listElement)) return false;
    231         let placements = getPlacementsFromList(listElement);
    232         placements.push(placement);
    233         listElement.value = placements.join('\n');
     316    function getPlacementData() {
     317        if (!isElement(cInputListData)) throw new Error('List is not an Element');
     318        const value = cInputListData.value;
     319        let placementsData = [];
     320        if (value !== '') {
     321            const placementsDataRaw = value.split('\n');
     322            for (const placementData of placementsDataRaw) {
     323                if (placementData.trim() === '') continue;
     324                const data = JSON.parse(placementData);
     325                placementsData.push(createPlacementObj(data.dgpm, data.delivery_enabled, data.demo, data.paragraph_index));
     326            }
     327        }
     328        return placementsData;
     329    }
     330
     331    function getPlacementDataSingle(dgpm) {
     332        if (!isElement(cInputListData)) throw new Error('List is not an Element');
     333        const value = cInputListData.value;
     334        let placementsData = [];
     335        if (value !== '') {
     336            const placementsDataRaw = value.split('\n');
     337            for (const placementData of placementsDataRaw) {
     338                if (placementData.trim() === '') continue;
     339                const pl = JSON.parse(placementData);
     340                if (pl.dgpm.d === dgpm.d && pl.dgpm.g === dgpm.g && pl.dgpm.p === dgpm.p && pl.dgpm.m === dgpm.m) {
     341                    return createPlacementObj(pl.dgpm, pl.delivery_enabled, pl.demo, pl.paragraph_index);
     342                }
     343            }
     344        }
     345        return placementsData;
     346    }
     347
     348    function overwritePlacementData(data) {
     349        if (!isElement(cInputListData)) throw new Error('List is not an Element');
     350        let result = [];
     351        for (const placementData of data) {
     352            result.push(JSON.stringify(placementData));
     353        }
     354        cInputListData.value = result.join("\n");
    234355        warnBeforeExit();
    235         return true;
    236     }
    237 
    238     function removePlacementFromList(placement, listElement) {
    239         if (!isElement(listElement)) throw new Error('List is not an Element');
    240         let placements = getPlacementsFromList(listElement);
    241         for (var i = 0; i < placements.length; i++) {
    242             if (placement === placements[i]) {
    243                 placements.splice(i, 1);
    244             }
    245         }
    246         listElement.value = placements.join('\n');
     356    }
     357
     358    function addPlacementData(data) {
     359        if (!isElement(cInputListData)) throw new Error('List is not an Element');
     360        cInputListData.value += "\n" + JSON.stringify(data);
    247361        warnBeforeExit();
    248362    }
    249363
    250     function isPlacementInList(placement, listElement) {
    251         if (!isElement(listElement)) throw new Error('List is not an Element');
    252         const placements = getPlacementsFromList(listElement);
    253         for (var i = 0; i < placements.length; i++) {
    254             if (placement === placements[i]) {
    255                 return true;
    256             }
    257         }
    258         return false;
     364    function createPlacementObj(dgpm, delivery = true, demo = false, paragraphIndex = null) {
     365        return {
     366            'dgpm': {
     367                'd': dgpm.d,
     368                'g': dgpm.g,
     369                'p': dgpm.p,
     370                'm': dgpm.m,
     371            },
     372            'delivery_enabled': delivery,
     373            'paragraph_index': paragraphIndex,
     374            'demo': demo,
     375        };
     376    }
     377
     378    function updatePlacementData(dgpm, newData) {
     379        if (!isElement(cInputListData)) throw new Error('List is not an Element');
     380
     381        let data = getPlacementData();
     382        for (let i = 0; i < data.length; i++) {
     383            const pl = data[i];
     384            if (pl.dgpm.d === dgpm.d && pl.dgpm.g === dgpm.g && pl.dgpm.p === dgpm.p && pl.dgpm.m === dgpm.m) {
     385                for (const newDataKey in newData) {
     386                    data[i][newDataKey] = newData[newDataKey];
     387                }
     388            }
     389        }
     390        overwritePlacementData(data);
    259391    }
    260392
    … …  
    263395    }
    264396
    265     function getAYMPlacementName(name) {
    266         let parts = name.split('/');
    267         if (parts.length === 3 || parts.length === 4) {
    268             const d = parts[0];
    269             const g = parts[1];
    270             const p = parts[2];
    271             const m = parts[3];
    272 
    273             return `${g} ${p} ${m === 'mobile' ? 'mobile ' : ''}(${d})`;
    274         }
    275         doError('Unknown name format');
    276         return '?';
     397    function isPlacementWithContainer(dgpm) {
     398        return ['Interscroller', 'Outstream', 'Native', 'Banner'].includes(getMediaType(dgpm.p));
     399    }
     400
     401    function getAYMPlacementName(dgpm) {
     402        const isMobile = dgpm.m === 'mobile' || dgpm.m === true;
     403        return `${dgpm.g} ${dgpm.p} ${isMobile ? 'mobile ' : ''}(${dgpm.d})`;
     404    }
     405
     406    function getMediaType(position) {
     407        if (position.indexOf('sticky') !== -1 || position.indexOf('fixed') !== -1) {
     408            return 'Sticky';
     409        } else if (position.indexOf('vignette') !== -1) {
     410            return 'Vignette';
     411        } else if (position.indexOf('interscroll') !== -1) {
     412            return 'Interscroller';
     413        } else if (position.indexOf('inmedia') !== -1) {
     414            return 'In-Media';
     415        } else if (position.indexOf('outstream') !== -1) {
     416            return 'Outstream';
     417        } else if (position.indexOf('native') !== -1) {
     418            return 'Native';
     419        } else if (position.indexOf('branding') !== -1) {
     420            return 'Branding';
     421        } else {
     422            return 'Banner';
     423        }
    277424    }
    278425

  • r2b2-monetization/trunk/r2b2-ui/dist/css/styles.css

    r3109328 r3181596  
    1 :root {
     1.r2b2-options :root {
    22    --font-family: HelveticaNowDisplay, arial, helvetica, sans-serif;
    33    --color-primary: #FEF3C7;
    … …  
    3131}
    3232
    33 .shadow {
     33.r2b2-options .shadow {
    3434    border-radius: 1.5rem;
    3535    border: 1px solid #f5f5f4;
    … …  
    3737}
    3838
    39 .shadow-small {
     39.r2b2-options .shadow-small {
    4040    box-shadow: 0px 1px 2px 0px rgba(41, 37, 36, .06)
    4141}
    4242
    43 .shadow-medium {
     43.r2b2-options .shadow-medium {
    4444    box-shadow: 0px 1px 2px 0px rgba(41, 37, 36, .06), 0px 1px 3px 0px rgba(41, 37, 36, .09)
    4545}
    4646
    47 .shadow-large {
     47.r2b2-options .shadow-large {
    4848    box-shadow: 0px 2px 2px 0px rgba(41, 37, 36, .06), 0px 3px 8px 0px rgba(41, 37, 36, .09)
    4949}
    5050
    51 .shadow-elevation-small {
     51.r2b2-options .shadow-elevation-small {
    5252    box-shadow: 0px 4px 6px -2px rgba(41, 37, 36, .03), 0px 12px 16px -4px rgba(41, 37, 36, .09)
    5353}
    5454
    55 .shadow-elevation-large {
     55.r2b2-options .shadow-elevation-large {
    5656    box-shadow: 0px 8px 8px -4px rgba(41, 37, 36, .03), 0px 20px 24px -4px rgba(41, 37, 36, .09)
    5757}
    5858
    59 .shadow-focus-primary {
     59.r2b2-options .shadow-focus-primary {
    6060    box-shadow: 0px 0px 0px 4px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    6161}
    6262
    63 .shadow-focus-secondary {
     63.r2b2-options .shadow-focus-secondary {
    6464    box-shadow: 0px 0px 0px 4px #f5f5f4, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    6565}
    6666
    67 .shadow-focus-error {
     67.r2b2-options .shadow-focus-error {
    6868    box-shadow: 0px 0px 0px 4px #fee2e2, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    6969}
    7070
    71 .heading {
     71.r2b2-options .heading {
    7272    color: #000;
    7373    font-feature-settings: "clig" off, "liga" off;
    … …  
    7878}
    7979
    80 .heading-1 {
     80.r2b2-options .heading-1 {
    8181    font-size: 2.375rem;
    8282    letter-spacing: -0.0475rem
    8383}
    8484
    85 .heading-2 {
     85.r2b2-options .heading-2 {
    8686    font-size: 1.875rem;
    8787    letter-spacing: -0.01875rem
    8888}
    8989
    90 .heading-3 {
     90.r2b2-options .heading-3 {
    9191    font-size: 1.5rem;
    9292    letter-spacing: -0.0075rem
    9393}
    9494
    95 .heading-4 {
     95.r2b2-options .heading-4 {
    9696    font-size: 1.25rem;
    9797    letter-spacing: -0.00313rem
    9898}
    9999
    100 .heading-5 {
     100.r2b2-options .heading-5 {
    101101    font-size: 1rem
    102102}
    103103
    104 .text-block {
     104.r2b2-options .text-block {
    105105    align-self: stretch;
    106106    font-feature-settings: "clig" off, "liga" off;
    … …  
    110110}
    111111
    112 .text-block--regular {
     112.r2b2-options .text-block--regular {
    113113    font-weight: 400
    114114}
    115115
    116 .text-block--bold {
     116.r2b2-options .text-block--bold {
    117117    font-weight: 700
    118118}
    119119
    120 .text-block--sm {
     120.r2b2-options .text-block--sm {
    121121    font-size: .75rem
    122122}
    123123
    124 .text-block--md {
     124.r2b2-options .text-block--md {
    125125    font-size: .875rem
    126126}
    127127
    128 .text-block--lg {
     128.r2b2-options .text-block--lg {
    129129    font-size: 1rem
    130130}
    131131
    132 .text-block--xl {
     132.r2b2-options .text-block--xl {
    133133    font-size: 1.25rem
    134134}
    135135
    136 .icon, .superselect__clear {
     136.r2b2-options .icon.r2b2-options .superselect__clear {
    137137    outline: none;
    138138    border: none;
    … …  
    149149}
    150150
    151 .icon:hover, .superselect__clear:hover {
     151.r2b2-options .icon:hover.r2b2-options .superselect__clear:hover {
    152152    color: rgba(0, 0, 0, 0) !important
    153153}
    154154
    155 .icon--rounded-bg {
     155.r2b2-options .icon--rounded-bg {
    156156    background-size: 16px 12px;
    157157    background-color: #7a7874;
    … …  
    160160}
    161161
    162 .icon--size-large {
     162.r2b2-options .icon--size-large {
    163163    width: 3em;
    164164    height: 3em
    165165}
    166166
    167 .icon--style-color {
     167.r2b2-options .icon--style-color {
    168168    background-color: #fef3c7;
    169169    mix-blend-mode: darken
    170170}
    171171
    172 .icon--no-margin {
     172.r2b2-options .icon--no-margin {
    173173    margin: 0
    174174}
    175175
    176 .icon--cross, .icon--cross.icon--style-default {
     176.r2b2-options .icon--cross.r2b2-options .icon--cross.icon--style-default {
    177177    background-image: url("/assets/img/icon-cross.png");
    178178    background-image: url("/assets/img/icon-cross.svg"), none
    179179}
    180180
    181 .icon--cross.icon--style-invert {
     181.r2b2-options .icon--cross.icon--style-invert {
    182182    background-image: url("/assets/img/icon-cross-invert.png");
    183183    background-image: url("/assets/img/icon-cross-invert.svg"), none
    184184}
    185185
    186 .icon--cross.icon--style-color {
     186.r2b2-options .icon--cross.icon--style-color {
    187187    background-image: url("/assets/img/icon-cross-color.png");
    188188    background-image: url("/assets/img/icon-cross-color.svg"), none
    189189}
    190190
    191 .icon--cross-white, .icon--cross-white.icon--style-default {
     191.r2b2-options .icon--cross-white.r2b2-options .icon--cross-white.icon--style-default {
    192192    background-image: url("/assets/img/icon-cross-white.png");
    193193    background-image: url("/assets/img/icon-cross-white.svg"), none
    194194}
    195195
    196 .icon--checkmark, .icon--checkmark.icon--style-default, .icon--success, .icon--success.icon--style-default {
     196.r2b2-options .icon--checkmark.r2b2-options .icon--checkmark.icon--style-default, .r2b2-options .icon--success, .r2b2-options .icon--success.icon--style-default {
    197197    background-image: url("/assets/img/icon-success.png");
    198198    background-image: url("/assets/img/icon-success.svg"), none
    199199}
    200200
    201 .icon--checkmark.icon--style-invert, .icon--success.icon--style-invert {
     201.r2b2-options .icon--checkmark.icon--style-invert.r2b2-options .icon--success.icon--style-invert {
    202202    background-image: url("/assets/img/icon-success-invert.png");
    203203    background-image: url("/assets/img/icon-success-invert.svg"), none
    204204}
    205205
    206 .icon--checkmark.icon--style-color, .icon--success.icon--style-color {
     206.r2b2-options .icon--checkmark.icon--style-color.r2b2-options .icon--success.icon--style-color {
    207207    background-image: url("/assets/img/icon-success-color.png");
    208208    background-image: url("/assets/img/icon-success-color.svg"), none
    209209}
    210210
    211 .icon--checkmark.icon--style-full, .icon--success.icon--style-full {
     211.r2b2-options .icon--checkmark.icon--style-full.r2b2-options .icon--success.icon--style-full {
    212212    background-image: url("/assets/img/icon-success-full.png");
    213213    background-image: url("/assets/img/icon-success-full.svg"), none
    214214}
    215215
    216 .icon--calendar, .icon--calendar.icon--style-default {
     216.r2b2-options .icon--calendar.r2b2-options .icon--calendar.icon--style-default {
    217217    background-image: url("/assets/img/icon-calendar.png");
    218218    background-image: url("/assets/img/icon-calendar.svg"), none
    219219}
    220220
    221 .icon--calendar.icon--style-invert {
     221.r2b2-options .icon--calendar.icon--style-invert {
    222222    background-image: url("/assets/img/icon-calendar-invert.png");
    223223    background-image: url("/assets/img/icon-calendar-invert.svg"), none
    224224}
    225225
    226 .icon--calendar.icon--style-color {
     226.r2b2-options .icon--calendar.icon--style-color {
    227227    background-image: url("/assets/img/icon-calendar-color.png");
    228228    background-image: url("/assets/img/icon-calendar-color.svg"), none
    229229}
    230230
    231 .icon--clock, .icon--clock.icon--style-default {
     231.r2b2-options .icon--clock.r2b2-options .icon--clock.icon--style-default {
    232232    background-image: url("/assets/img/icon-clock.png");
    233233    background-image: url("/assets/img/icon-clock.svg"), none
    234234}
    235235
    236 .icon--clock.icon--style-invert {
     236.r2b2-options .icon--clock.icon--style-invert {
    237237    background-image: url("/assets/img/icon-clock-invert.png");
    238238    background-image: url("/assets/img/icon-clock-invert.svg"), none
    239239}
    240240
    241 .icon--clock.icon--style-color {
     241.r2b2-options .icon--clock.icon--style-color {
    242242    background-image: url("/assets/img/icon-clock-color.png");
    243243    background-image: url("/assets/img/icon-clock-color.svg"), none
    244244}
    245245
    246 .icon--delete, .icon--delete.icon--style-default {
     246.r2b2-options .icon--delete.r2b2-options .icon--delete.icon--style-default {
    247247    background-image: url("/assets/img/icon-delete.png");
    248248    background-image: url("/assets/img/icon-delete.svg"), none
    249249}
    250250
    251 .icon--delete.icon--style-invert {
     251.r2b2-options .icon--delete.icon--style-invert {
    252252    background-image: url("/assets/img/icon-delete-invert.png");
    253253    background-image: url("/assets/img/icon-delete-invert.svg"), none
    254254}
    255255
    256 .icon--delete.icon--style-color {
     256.r2b2-options .icon--delete.icon--style-color {
    257257    background-image: url("/assets/img/icon-delete-color.png");
    258258    background-image: url("/assets/img/icon-delete-color.svg"), none
    259259}
    260260
    261 .icon--clear, .superselect__clear, .icon--clear.icon--style-default {
     261.r2b2-options .icon--clear.r2b2-options .superselect__clear, .r2b2-options .icon--clear.icon--style-default {
    262262    background-image: url("/assets/img/icon-clear.png");
    263263    background-image: url("/assets/img/icon-clear.svg"), none
    264264}
    265265
    266 .icon--clear.icon--style-invert, .icon--style-invert.superselect__clear {
     266.r2b2-options .icon--clear.icon--style-invert.r2b2-options .icon--style-invert.superselect__clear {
    267267    background-image: url("/assets/img/icon-clear-invert.png");
    268268    background-image: url("/assets/img/icon-clear-invert.svg"), none
    269269}
    270270
    271 .icon--clear.icon--style-color, .icon--style-color.superselect__clear {
     271.r2b2-options .icon--clear.icon--style-color.r2b2-options .icon--style-color.superselect__clear {
    272272    background-image: url("/assets/img/icon-clear-color.png");
    273273    background-image: url("/assets/img/icon-clear-color.svg"), none
    274274}
    275275
    276 .icon--selectall, .icon--selectall.icon--style-default {
     276.r2b2-options .icon--selectall.r2b2-options .icon--selectall.icon--style-default {
    277277    background-image: url("/assets/img/icon-selectall.png");
    278278    background-image: url("/assets/img/icon-selectall.svg"), none
    279279}
    280280
    281 .icon--selectnone, .icon--selectnone.icon--style-default {
     281.r2b2-options .icon--selectnone.r2b2-options .icon--selectnone.icon--style-default {
    282282    background-image: url("/assets/img/icon-selectnone.png");
    283283    background-image: url("/assets/img/icon-selectnone.svg"), none
    284284}
    285285
    286 .icon--showall, .icon--showall.icon--style-default {
     286.r2b2-options .icon--showall.r2b2-options .icon--showall.icon--style-default {
    287287    background-image: url("/assets/img/icon-showall.png");
    288288    background-image: url("/assets/img/icon-showall.svg"), none
    289289}
    290290
    291 .icon--showselected, .icon--showselected.icon--style-default {
     291.r2b2-options .icon--showselected.r2b2-options .icon--showselected.icon--style-default {
    292292    background-image: url("/assets/img/icon-showselected.png");
    293293    background-image: url("/assets/img/icon-showselected.svg"), none
    294294}
    295295
    296 .icon--filter, .icon--filter.icon--style-default {
     296.r2b2-options .icon--filter.r2b2-options .icon--filter.icon--style-default {
    297297    background-image: url("/assets/img/icon-filter.png");
    298298    background-image: url("/assets/img/icon-filter.svg"), none
    299299}
    300300
    301 .icon--filter.icon--style-invert {
     301.r2b2-options .icon--filter.icon--style-invert {
    302302    background-image: url("/assets/img/icon-filter-invert.png");
    303303    background-image: url("/assets/img/icon-filter-invert.svg"), none
    304304}
    305305
    306 .icon--filter.icon--style-color {
     306.r2b2-options .icon--filter.icon--style-color {
    307307    background-image: url("/assets/img/icon-filter-color.png");
    308308    background-image: url("/assets/img/icon-filter-color.svg"), none
    309309}
    310310
    311 .icon--settings, .icon--settings.icon--style-default {
     311.r2b2-options .icon--settings.r2b2-options .icon--settings.icon--style-default {
    312312    background-image: url("/assets/img/icon-settings.png");
    313313    background-image: url("/assets/img/icon-settings.svg"), none
    314314}
    315315
    316 .icon--settings.icon--style-invert {
     316.r2b2-options .icon--settings.icon--style-invert {
    317317    background-image: url("/assets/img/icon-settings-invert.png");
    318318    background-image: url("/assets/img/icon-settings-invert.svg"), none
    319319}
    320320
    321 .icon--settings.icon--style-color {
     321.r2b2-options .icon--settings.icon--style-color {
    322322    background-image: url("/assets/img/icon-settings-color.png");
    323323    background-image: url("/assets/img/icon-settings-color.svg"), none
    324324}
    325325
    326 .icon--edit, .icon--edit.icon--style-default {
     326.r2b2-options .icon--edit.r2b2-options .icon--edit.icon--style-default {
    327327    background-image: url("/assets/img/icon-edit.png");
    328328    background-image: url("/assets/img/icon-edit.svg"), none
    329329}
    330330
    331 .icon--edit.icon--style-invert {
     331.r2b2-options .icon--edit.icon--style-invert {
    332332    background-image: url("/assets/img/icon-edit-invert.png");
    333333    background-image: url("/assets/img/icon-edit-invert.svg"), none
    334334}
    335335
    336 .icon--edit.icon--style-color {
     336.r2b2-options .icon--edit.icon--style-color {
    337337    background-image: url("/assets/img/icon-edit-color.png");
    338338    background-image: url("/assets/img/icon-edit-color.svg"), none
    339339}
    340340
    341 .icon--search, .icon--search.icon--style-default {
     341.r2b2-options .icon--search.r2b2-options .icon--search.icon--style-default {
    342342    background-image: url("/assets/img/icon-search.png");
    343343    background-image: url("/assets/img/icon-search.svg"), none
    344344}
    345345
    346 .icon--search.icon--style-invert {
     346.r2b2-options .icon--search.icon--style-invert {
    347347    background-image: url("/assets/img/icon-search-invert.png");
    348348    background-image: url("/assets/img/icon-search-invert.svg"), none
    349349}
    350350
    351 .icon--search.icon--style-color {
     351.r2b2-options .icon--search.icon--style-color {
    352352    background-image: url("/assets/img/icon-search-color.png");
    353353    background-image: url("/assets/img/icon-search-color.svg"), none
    354354}
    355355
    356 .icon--plus, .icon--plus.icon--style-default, .icon--add, .icon--add.icon--style-default {
     356.r2b2-options .icon--plus.r2b2-options .icon--plus.icon--style-default, .r2b2-options .icon--add, .r2b2-options .icon--add.icon--style-default {
    357357    background-image: url("/assets/img/icon-plus.png");
    358358    background-image: url("/assets/img/icon-plus.svg"), none
    359359}
    360360
    361 .icon--plus.icon--style-invert, .icon--add.icon--style-invert {
     361.r2b2-options .icon--plus.icon--style-invert.r2b2-options .icon--add.icon--style-invert {
    362362    background-image: url("/assets/img/icon-plus-invert.png");
    363363    background-image: url("/assets/img/icon-plus-invert.svg"), none
    364364}
    365365
    366 .icon--plus.icon--style-color, .icon--add.icon--style-color {
     366.r2b2-options .icon--plus.icon--style-color.r2b2-options .icon--add.icon--style-color {
    367367    background-image: url("/assets/img/icon-plus-color.png");
    368368    background-image: url("/assets/img/icon-plus-color.svg"), none
    369369}
    370370
    371 .icon--plus-gray, .icon--plus-gray.icon--style-default, .icon--add-gray, .icon--add-gray.icon--style-default {
     371.r2b2-options .icon--plus-gray.r2b2-options .icon--plus-gray.icon--style-default, .r2b2-options .icon--add-gray, .r2b2-options .icon--add-gray.icon--style-default {
    372372    background-image: url("/assets/img/icon-add-gray.png");
    373373    background-image: url("/assets/img/icon-add-gray.svg"), none
    374374}
    375375
    376 .icon--minus-gray, .icon--minus-gray.icon--style-default {
     376.r2b2-options .icon--minus-gray.r2b2-options .icon--minus-gray.icon--style-default {
    377377    background-image: url("/assets/img/icon-minus-gray.png");
    378378    background-image: url("/assets/img/icon-minus-gray.svg"), none
    379379}
    380380
    381 .icon--copy {
     381.r2b2-options .icon--copy {
    382382    background-size: 80%
    383383}
    384384
    385 .icon--copy, .icon--copy.icon--style-default {
     385.r2b2-options .icon--copy.r2b2-options .icon--copy.icon--style-default {
    386386    background-image: url("/assets/img/icon-copy.png");
    387387    background-image: url("/assets/img/icon-copy.svg"), none
    388388}
    389389
    390 .icon--synchronize, .icon--synchronize.icon--style-default {
     390.r2b2-options .icon--synchronize.r2b2-options .icon--synchronize.icon--style-default {
    391391    background-image: url("/assets/img/icon-synchronize.png");
    392392    background-image: url("/assets/img/icon-synchronize.svg"), none
    393393}
    394394
    395 .icon--synchronize.icon--style-invert {
     395.r2b2-options .icon--synchronize.icon--style-invert {
    396396    background-image: url("/assets/img/icon-synchronize-invert.png");
    397397    background-image: url("/assets/img/icon-synchronize-invert.svg"), none
    398398}
    399399
    400 .icon--synchronize.icon--style-color {
     400.r2b2-options .icon--synchronize.icon--style-color {
    401401    background-image: url("/assets/img/icon-synchronize-color.png");
    402402    background-image: url("/assets/img/icon-synchronize-color.svg"), none
    403403}
    404404
    405 .icon--reset, .icon--reset.icon--style-default {
     405.r2b2-options .icon--reset.r2b2-options .icon--reset.icon--style-default {
    406406    background-image: url("/assets/img/icon-reset.png");
    407407    background-image: url("/assets/img/icon-reset.svg"), none
    408408}
    409409
    410 .icon--reset.icon--style-invert {
     410.r2b2-options .icon--reset.icon--style-invert {
    411411    background-image: url("/assets/img/icon-reset-invert.png");
    412412    background-image: url("/assets/img/icon-reset-invert.svg"), none
    413413}
    414414
    415 .icon--reset.icon--style-color {
     415.r2b2-options .icon--reset.icon--style-color {
    416416    background-image: url("/assets/img/icon-reset-color.png");
    417417    background-image: url("/assets/img/icon-reset-color.svg"), none
    418418}
    419419
    420 .icon--info, .icon--info.icon--style-default {
     420.r2b2-options .icon--info.r2b2-options .icon--info.icon--style-default {
    421421    background-image: url("/assets/img/icon-info.png");
    422422    background-image: url("/assets/img/icon-info.svg"), none
    423423}
    424424
    425 .icon--info.icon--style-invert {
     425.r2b2-options .icon--info.icon--style-invert {
    426426    background-image: url("/assets/img/icon-info-invert.png");
    427427    background-image: url("/assets/img/icon-info-invert.svg"), none
    428428}
    429429
    430 .icon--info.icon--style-color {
     430.r2b2-options .icon--info.icon--style-color {
    431431    background-image: url("/assets/img/icon-info-color.png");
    432432    background-image: url("/assets/img/icon-info-color.svg"), none
    433433}
    434434
    435 .icon--warning, .icon--warning.icon--style-default {
     435.r2b2-options .icon--warning.r2b2-options .icon--warning.icon--style-default {
    436436    background-image: url("/assets/img/icon-warning.png");
    437437    background-image: url("/assets/img/icon-warning.svg"), none
    438438}
    439439
    440 .icon--warning.icon--style-invert {
     440.r2b2-options .icon--warning.icon--style-invert {
    441441    background-image: url("/assets/img/icon-warning-invert.png");
    442442    background-image: url("/assets/img/icon-warning-invert.svg"), none
    443443}
    444444
    445 .icon--warning.icon--style-color {
     445.r2b2-options .icon--warning.icon--style-color {
    446446    background-image: url("/assets/img/icon-warning-color.png");
    447447    background-image: url("/assets/img/icon-warning-color.svg"), none
    448448}
    449449
    450 .icon--warning.icon--style-full {
     450.r2b2-options .icon--warning.icon--style-full {
    451451    background-image: url("/assets/img/icon-warning-full.png");
    452452    background-image: url("/assets/img/icon-warning-full.svg"), none
    453453}
    454454
    455 .icon--upload, .icon--upload.icon--style-default {
     455.r2b2-options .icon--upload.r2b2-options .icon--upload.icon--style-default {
    456456    background-image: url("/assets/img/icon-upload.png");
    457457    background-image: url("/assets/img/icon-upload.svg"), none
    458458}
    459459
    460 .icon--upload.icon--style-invert {
     460.r2b2-options .icon--upload.icon--style-invert {
    461461    background-image: url("/assets/img/icon-upload-invert.png");
    462462    background-image: url("/assets/img/icon-upload-invert.svg"), none
    463463}
    464464
    465 .icon--upload.icon--style-color {
     465.r2b2-options .icon--upload.icon--style-color {
    466466    background-image: url("/assets/img/icon-upload-color.png");
    467467    background-image: url("/assets/img/icon-upload-color.svg"), none
    468468}
    469469
    470 .icon--download, .icon--download.icon--style-default {
     470.r2b2-options .icon--download.r2b2-options .icon--download.icon--style-default {
    471471    background-image: url("/assets/img/icon-download.png");
    472472    background-image: url("/assets/img/icon-download.svg"), none
    473473}
    474474
    475 .icon--download.icon--style-invert {
     475.r2b2-options .icon--download.icon--style-invert {
    476476    background-image: url("/assets/img/icon-download-invert.png");
    477477    background-image: url("/assets/img/icon-download-invert.svg"), none
    478478}
    479479
    480 .icon--download.icon--style-color {
     480.r2b2-options .icon--download.icon--style-color {
    481481    background-image: url("/assets/img/icon-download-color.png");
    482482    background-image: url("/assets/img/icon-download-color.svg"), none
    483483}
    484484
    485 .icon--save {
     485.r2b2-options .icon--save {
    486486    background-size: 80%
    487487}
    488488
    489 .icon--save, .icon--save.icon--style-default {
     489.r2b2-options .icon--save.r2b2-options .icon--save.icon--style-default {
    490490    background-image: url("/assets/img/icon-save.png");
    491491    background-image: url("/assets/img/icon-save.svg"), none
    492492}
    493493
    494 .icon--state-disabled {
     494.r2b2-options .icon--state-disabled {
    495495    opacity: .25;
    496496    cursor: not-allowed
    497497}
    498498
    499 .icon--arrow-down, .icon--arrow-down.icon--style-default {
     499.r2b2-options .icon--arrow-down.r2b2-options .icon--arrow-down.icon--style-default {
    500500    background-image: url("/assets/img/icon-arrow-down.png");
    501501    background-image: url("/assets/img/icon-arrow-down.svg"), none
    502502}
    503503
    504 .icon--arrow-down-solid, .icon--arrow-down-solid.icon--style-default {
     504.r2b2-options .icon--arrow-down-solid.r2b2-options .icon--arrow-down-solid.icon--style-default {
    505505    background-image: url("/assets/img/icon-arrow-down-solid.png");
    506506    background-image: url("/assets/img/icon-arrow-down-solid.svg"), none
    507507}
    508508
    509 .icon--arrow-up-solid, .icon--arrow-up-solid.icon--style-default {
     509.r2b2-options .icon--arrow-up-solid.r2b2-options .icon--arrow-up-solid.icon--style-default {
    510510    background-image: url("/assets/img/icon-arrow-up-solid.png");
    511511    background-image: url("/assets/img/icon-arrow-up-solid.svg"), none
    512512}
    513513
    514 .icon--arrow-left-long, .icon--arrow-left-long.icon--style-default {
     514.r2b2-options .icon--arrow-left-long.r2b2-options .icon--arrow-left-long.icon--style-default {
    515515    background-image: url("/assets/img/icon-arrow-left-long.png");
    516516    background-image: url("/assets/img/icon-arrow-left-long.svg"), none
    517517}
    518518
    519 .icon--aym-logo {
     519.r2b2-options .icon--aym-logo {
    520520    width: 2rem;
    521521    height: 2rem
    522522}
    523523
    524 .icon--aym-logo, .icon--aym-logo.icon--style-default {
     524.r2b2-options .icon--aym-logo.r2b2-options .icon--aym-logo.icon--style-default {
    525525    background-image: url("/assets/img/icon-aym-logo.png");
    526526    background-image: url("/assets/img/icon-aym-logo.svg"), none
    527527}
    528528
    529 .icon--account, .icon--account.icon--style-default {
     529.r2b2-options .icon--account.r2b2-options .icon--account.icon--style-default {
    530530    background-image: url("/assets/img/icon-account.png");
    531531    background-image: url("/assets/img/icon-account.svg"), none
    532532}
    533533
    534 .icon--like, .icon--like.icon--style-default {
     534.r2b2-options .icon--like.r2b2-options .icon--like.icon--style-default {
    535535    background-image: url("/assets/img/icon-like.png");
    536536    background-image: url("/assets/img/icon-like.svg"), none
    537537}
    538538
    539 .icon--star, .icon--star.icon--style-default {
     539.r2b2-options .icon--star.r2b2-options .icon--star.icon--style-default {
    540540    background-image: url("/assets/img/icon-star.png");
    541541    background-image: url("/assets/img/icon-star.svg"), none
    542542}
    543543
    544 .icon--stats, .icon--stats.icon--style-default {
     544.r2b2-options .icon--stats.r2b2-options .icon--stats.icon--style-default {
    545545    background-image: url("/assets/img/icon-stats.png");
    546546    background-image: url("/assets/img/icon-stats.svg"), none
    547547}
    548548
    549 .icon--settings-wrench, .icon--settings-wrench.icon--style-default {
     549.r2b2-options .icon--settings-wrench.r2b2-options .icon--settings-wrench.icon--style-default {
    550550    background-image: url("/assets/img/icon-settings-wrench.png");
    551551    background-image: url("/assets/img/icon-settings-wrench.svg"), none
    552552}
    553553
    554 .icon--doublearrow-right, .icon--doublearrow-right.icon--style-default {
     554.r2b2-options .icon--doublearrow-right.r2b2-options .icon--doublearrow-right.icon--style-default {
    555555    background-image: url("/assets/img/icon-doublearrow-right.png");
    556556    background-image: url("/assets/img/icon-doublearrow-right.svg"), none
    557557}
    558558
    559 .icon--doublearrow-left, .icon--doublearrow-left.icon--style-default {
     559.r2b2-options .icon--doublearrow-left.r2b2-options .icon--doublearrow-left.icon--style-default {
    560560    background-image: url("/assets/img/icon-doublearrow-left.png");
    561561    background-image: url("/assets/img/icon-doublearrow-left.svg"), none
    562562}
    563563
    564 .icon--dmp, .icon--dmp.icon--style-default {
     564.r2b2-options .icon--dmp.r2b2-options .icon--dmp.icon--style-default {
    565565    background-image: url("/assets/img/icon-dmp.png");
    566566    background-image: url("/assets/img/icon-dmp.svg"), none
    567567}
    568568
    569 .icon--dislike, .icon--dislike.icon--style-default {
     569.r2b2-options .icon--dislike.r2b2-options .icon--dislike.icon--style-default {
    570570    background-image: url("/assets/img/icon-dislike.png");
    571571    background-image: url("/assets/img/icon-dislike.svg"), none
    572572}
    573573
    574 .icon--arrow-right, .icon--arrow-right.icon--style-default {
     574.r2b2-options .icon--arrow-right.r2b2-options .icon--arrow-right.icon--style-default {
    575575    background-image: url("/assets/img/icon-arrow-right.png");
    576576    background-image: url("/assets/img/icon-arrow-right.svg"), none
    577577}
    578578
    579 .icon--arrow-left, .icon--arrow-left.icon--style-default {
     579.r2b2-options .icon--arrow-left.r2b2-options .icon--arrow-left.icon--style-default {
    580580    background-image: url("/assets/img/icon-arrow-left.png");
    581581    background-image: url("/assets/img/icon-arrow-left.svg"), none
    582582}
    583583
    584 .icon--arrow-default, .icon--arrow-default.icon--style-default {
     584.r2b2-options .icon--arrow-default.r2b2-options .icon--arrow-default.icon--style-default {
    585585    background-image: url("/assets/img/icon-arrow-default.png");
    586586    background-image: url("/assets/img/icon-arrow-default.svg"), none
    587587}
    588588
    589 .icon--arrow-stats, .icon--arrow-stats.icon--style-default {
     589.r2b2-options .icon--arrow-stats.r2b2-options .icon--arrow-stats.icon--style-default {
    590590    background-image: url("/assets/img/icon-arrow-stats.png");
    591591    background-image: url("/assets/img/icon-arrow-stats.svg"), none
    592592}
    593593
    594 .icon--eye-total, .icon--eye-total.icon--style-default {
     594.r2b2-options .icon--eye-total.r2b2-options .icon--eye-total.icon--style-default {
    595595    background-image: url("/assets/img/icon-eye-total.png");
    596596    background-image: url("/assets/img/icon-eye-total.svg"), none
    597597}
    598598
    599 .icon--eye-price, .icon--eye-price.icon--style-default {
     599.r2b2-options .icon--eye-price.r2b2-options .icon--eye-price.icon--style-default {
    600600    background-image: url("/assets/img/icon-eye-price.png");
    601601    background-image: url("/assets/img/icon-eye-price.svg"), none
    602602}
    603603
    604 .icon--total, .icon--total.icon--style-default {
     604.r2b2-options .icon--total.r2b2-options .icon--total.icon--style-default {
    605605    background-image: url("/assets/img/icon-total.png");
    606606    background-image: url("/assets/img/icon-total.svg"), none
    607607}
    608608
    609 .icon--sort-asc, .icon--sort-asc.icon--style-default {
     609.r2b2-options .icon--sort-asc.r2b2-options .icon--sort-asc.icon--style-default {
    610610    background-image: url("/assets/img/icon-sort-asc.png");
    611611    background-image: url("/assets/img/icon-sort-asc.svg"), none
    612612}
    613613
    614 .icon--sort-desc, .icon--sort-desc.icon--style-default {
     614.r2b2-options .icon--sort-desc.r2b2-options .icon--sort-desc.icon--style-default {
    615615    background-image: url("/assets/img/icon-sort-desc.png");
    616616    background-image: url("/assets/img/icon-sort-desc.svg"), none
    617617}
    618618
    619 .icon--eye, .icon--eye.icon--style-default {
     619.r2b2-options .icon--eye.r2b2-options .icon--eye.icon--style-default {
    620620    background-image: url("/assets/img/icon-eye.png");
    621621    background-image: url("/assets/img/icon-eye.svg"), none
    622622}
    623623
    624 .icon--eye-disabled, .icon--eye-disabled.icon--style-default {
     624.r2b2-options .icon--eye-disabled.r2b2-options .icon--eye-disabled.icon--style-default {
    625625    background-image: url("/assets/img/icon-eye-disabled.png");
    626626    background-image: url("/assets/img/icon-eye-disabled.svg"), none
    627627}
    628628
    629 .icon--basket, .icon--basket.icon--style-default {
     629.r2b2-options .icon--basket.r2b2-options .icon--basket.icon--style-default {
    630630    background-image: url("/assets/img/icon-basket.png");
    631631    background-image: url("/assets/img/icon-basket.svg"), none
    632632}
    633633
    634 .icon--basket-2, .icon--basket-2.icon--style-default {
     634.r2b2-options .icon--basket-2.r2b2-options .icon--basket-2.icon--style-default {
    635635    background-image: url("/assets/img/icon-basket.png");
    636636    background-image: url("/assets/img/icon-basket.svg"), none
    637637}
    638638
    639 .icon--lines, .icon--lines.icon--style-default {
     639.r2b2-options .icon--lines.r2b2-options .icon--lines.icon--style-default {
    640640    background-image: url("/assets/img/icon-lines.png");
    641641    background-image: url("/assets/img/icon-lines.svg"), none
    642642}
    643643
    644 .icon--pencil, .icon--pencil.icon--style-default {
     644.r2b2-options .icon--pencil.r2b2-options .icon--pencil.icon--style-default {
    645645    background-image: url("/assets/img/icon-pencil.png");
    646646    background-image: url("/assets/img/icon-pencil.svg"), none
    647647}
    648648
    649 .icon--calendar-datepicker, .icon--calendar-datepicker.icon--style-default {
     649.r2b2-options .icon--calendar-datepicker.r2b2-options .icon--calendar-datepicker.icon--style-default {
    650650    background-image: url("/assets/img/icon-calendar-datepicker.png");
    651651    background-image: url("/assets/img/icon-calendar-datepicker.svg"), none
    652652}
    653653
    654 .icon--warning-sign, .icon--warning-sign.icon--style-default {
     654.r2b2-options .icon--warning-sign.r2b2-options .icon--warning-sign.icon--style-default {
    655655    background-image: url("/assets/img/icon-warning-sign.png");
    656656    background-image: url("/assets/img/icon-warning-sign.svg"), none
    657657}
    658658
    659 .icon--expand-up, .icon--expand-up.icon--style-default {
     659.r2b2-options .icon--expand-up.r2b2-options .icon--expand-up.icon--style-default {
    660660    background-image: url("/assets/img/icon-expand-up.png");
    661661    background-image: url("/assets/img/icon-expand-up.svg"), none
    662662}
    663663
    664 .icon--expand-down, .icon--expand-down.icon--style-default {
     664.r2b2-options .icon--expand-down.r2b2-options .icon--expand-down.icon--style-default {
    665665    background-image: url("/assets/img/icon-expand-down.png");
    666666    background-image: url("/assets/img/icon-expand-down.svg"), none
    667667}
    668668
    669 .svg-icon {
     669.r2b2-options .svg-icon {
    670670    height: 1rem;
    671671    width: 1rem;
    … …  
    673673}
    674674
    675 .svg-icon svg {
     675.r2b2-options .svg-icon svg {
    676676    pointer-events: none;
    677677    width: 100%;
    … …  
    679679}
    680680
    681 .button {
     681.r2b2-options .button {
    682682    display: inline-flex;
    683683    padding: .5rem .875rem;
    … …  
    689689}
    690690
    691 .button__primary {
     691.r2b2-options .button__primary {
    692692    border: 1px solid #e57300;
    693693    background: #e57300;
    … …  
    696696}
    697697
    698 .button__primary:hover {
     698.r2b2-options .button__primary:hover {
    699699    border: 1px solid #b36b24;
    700     background: #b36b24
    701 }
    702 
    703 .button__primary:focus {
     700    background: #b36b24;
     701    color: #fff;
     702}
     703
     704.r2b2-options .button__primary:focus {
    704705    border: 1px solid #f93;
    705706    background: #f93;
     707    color: #fff;
    706708    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    707709}
    708710
    709 .button__primary:disabled {
     711.r2b2-options .button__primary:disabled {
    710712    border: 1px solid #fdb;
    711713    background: #fdb
    712714}
    713715
    714 .button__primary--destructive {
     716.r2b2-options .button__primary--destructive {
    715717    border-radius: .5rem;
    716718    border: 1px solid #dc2626;
    … …  
    720722}
    721723
    722 .button__primary--destructive:hover {
     724.r2b2-options .button__primary--destructive:hover {
    723725    border: 1px solid #b91c1c;
    724726    background: #b91c1c
    725727}
    726728
    727 .button__primary--destructive:focus {
     729.r2b2-options .button__primary--destructive:focus {
    728730    border: 1px solid #dc2626;
    729731    background: #dc2626;
    … …  
    731733}
    732734
    733 .button__primary--destructive:disabled {
     735.r2b2-options .button__primary--destructive:disabled {
    734736    border: 1px solid #fecaca;
    735737    background: #fecaca
    736738}
    737739
    738 .button__secondary {
     740.r2b2-options .button__secondary {
    739741    border: 1px solid #fdb;
    740742    background: #fff7ed;
    … …  
    743745}
    744746
    745 .button__secondary:hover {
     747.r2b2-options .button__secondary:hover {
    746748    background: #fed;
    747749    color: #804d1a
    748750}
    749751
    750 .button__secondary:focus {
     752.r2b2-options .button__secondary:focus {
    751753    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    752754}
    753755
    754 .button__secondary:disabled {
     756.r2b2-options .button__secondary:disabled {
    755757    border: 1px solid #fff7ed;
    756758    background: #fff7ed;
    … …  
    758760}
    759761
    760 .button__secondary--gray {
     762.r2b2-options .button__secondary--gray {
    761763    border: 1px solid #d6d3d1;
    762764    background: #fff;
    … …  
    765767}
    766768
    767 .button__secondary--gray:hover {
     769.r2b2-options .button__secondary--gray:hover {
    768770    background: #fafaf9;
    769771    color: #292524
    770772}
    771773
    772 .button__secondary--gray:focus {
     774.r2b2-options .button__secondary--gray:focus {
    773775    box-shadow: 0px 0px 0px 2px #f5f5f4, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    774776}
    775777
    776 .button__secondary--gray:disabled {
     778.r2b2-options .button__secondary--gray:disabled {
    777779    border: 1px solid #e7e5e4;
    778780    color: #d6d3d1
    779781}
    780782
    781 .button--sm {
     783.r2b2-options .button--sm {
    782784    padding: .5rem .875rem;
    783785    font-size: .875rem
    784786}
    785787
    786 .button--md {
     788.r2b2-options .button--md {
    787789    padding: .63rem 1rem;
    788790    font-size: .875rem
    789791}
    790792
    791 .button--lg {
     793.r2b2-options .button--lg {
    792794    padding: .63rem 1.13rem;
    793795    font-size: 1rem
    794796}
    795797
    796 .button--xl {
     798.r2b2-options .button--xl {
    797799    padding: .75rem 1.25rem;
    798800    font-size: 1rem
    799801}
    800802
    801 .button--2xl {
     803.r2b2-options .button--2xl {
    802804    padding: 1rem 1.75rem;
    803805    font-size: 1rem
    804806}
    805807
    806 .tabButton {
     808.r2b2-options .tabButton {
    807809    display: inline-flex;
    808810    padding: .5rem .75rem;
    … …  
    815817}
    816818
    817 .tabButton:hover {
     819.r2b2-options .tabButton:hover {
    818820    background: #fff;
    819821    color: #44403c;
    … …  
    821823}
    822824
    823 .tabButton:focus {
     825.r2b2-options .tabButton:focus {
    824826    box-shadow: 0px 0px 0px 2px #f5f5f4, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    825827}
    826828
    827 .tabButton--sm {
     829.r2b2-options .tabButton--sm {
    828830    padding: .5rem .75rem;
    829831    align-self: stretch;
    … …  
    836838}
    837839
    838 .tabButton--md {
     840.r2b2-options .tabButton--md {
    839841    padding: .625rem .875rem;
    840842    align-self: stretch;
    … …  
    847849}
    848850
    849 .tabButton--current {
     851.r2b2-options .tabButton--current {
    850852    background: #fff;
    851853    color: #44403c;
    … …  
    853855}
    854856
    855 .tabButton--current:focus {
     857.r2b2-options .tabButton--current:focus {
    856858    box-shadow: 0px 0px 0px 2px #f5f5f4, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    857859}
    858860
    859 .tabButton--badge {
     861.r2b2-options .tabButton--badge {
    860862    padding: .4375rem .75rem
    861863}
    862864
    863 .icon-button {
     865.r2b2-options .icon-button {
    864866    display: flex;
    865867    width: 2rem;
    … …  
    872874}
    873875
    874 .icon-button:hover {
     876.r2b2-options .icon-button:hover {
    875877    background: rgba(0, 0, 0, .12)
    876878}
    877879
    878 .button-v9 .button {
     880.r2b2-options .button-v9 .button {
    879881    display: inline-flex;
    880882    align-items: center;
    … …  
    897899}
    898900
    899 .button-v9 .button:hover {
     901.r2b2-options .button-v9 .button:hover {
    900902    background-color: hoverColor(rgb(45, 125, 206));
    901903    border-color: hoverColor(rgb(45, 125, 206));
    … …  
    903905}
    904906
    905 .button-v9 .button.button--style-outline {
     907.r2b2-options .button-v9 .button.button--style-outline {
    906908    background-color: #fff;
    907909    color: #2d7dce;
    … …  
    909911}
    910912
    911 .button-v9 .button.button--style-outline svg g {
     913.r2b2-options .button-v9 .button.button--style-outline svg g {
    912914    fill: #2d7dce
    913915}
    914916
    915 .button-v9 .button.button--style-outline svg g path, .button-v9 .button.button--style-outline svg g rect {
     917.r2b2-options .button-v9 .button.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-outline svg g rect {
    916918    stroke: #2d7dce !important
    917919}
    918920
    919 .button-v9 .button.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-outline:not(:hover) .superselect__clear {
     921.r2b2-options .button-v9 .button.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-outline:not(:hover) .superselect__clear {
    920922    background-color: #2d7dce
    921923}
    922924
    923 .button-v9 .button.button--style-outline:hover {
     925.r2b2-options .button-v9 .button.button--style-outline:hover {
    924926    background-color: #2d7dce;
    925927    border-color: #2d7dce;
    … …  
    928930}
    929931
    930 .button-v9 .button.button--style-outline:hover g path, .button-v9 .button.button--style-outline:hover g rect {
     932.r2b2-options .button-v9 .button.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-outline:hover g rect {
    931933    stroke: #fff !important
    932934}
    933935
    934 .button-v9 .button__icon {
     936.r2b2-options .button-v9 .button__icon {
    935937    display: flex;
    936938    align-items: center;
    … …  
    940942}
    941943
    942 .button-v9 .button.button--big {
     944.r2b2-options .button-v9 .button.button--big {
    943945    height: 48px
    944946}
    945947
    946 .button-v9 .button.button--style-secondary {
     948.r2b2-options .button-v9 .button.button--style-secondary {
    947949    background-color: #ff0565;
    948950    border-color: #ff0565;
    … …  
    951953}
    952954
    953 .button-v9 .button.button--style-secondary:hover {
     955.r2b2-options .button-v9 .button.button--style-secondary:hover {
    954956    background-color: hoverColor(rgb(255, 5, 101));
    955957    border-color: hoverColor(rgb(255, 5, 101));
    … …  
    957959}
    958960
    959 .button-v9 .button.button--style-secondary.button--style-outline {
     961.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline {
    960962    background-color: #fff;
    961963    color: #ff0565;
    … …  
    963965}
    964966
    965 .button-v9 .button.button--style-secondary.button--style-outline svg g {
     967.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline svg g {
    966968    fill: #ff0565
    967969}
    968970
    969 .button-v9 .button.button--style-secondary.button--style-outline svg g path, .button-v9 .button.button--style-secondary.button--style-outline svg g rect {
     971.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline svg g rect {
    970972    stroke: #ff0565 !important
    971973}
    972974
    973 .button-v9 .button.button--style-secondary.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-secondary.button--style-outline:not(:hover) .superselect__clear {
     975.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline:not(:hover) .superselect__clear {
    974976    background-color: #ff0565
    975977}
    976978
    977 .button-v9 .button.button--style-secondary.button--style-outline:hover {
     979.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline:hover {
    978980    background-color: #ff0565;
    979981    border-color: #ff0565;
    … …  
    982984}
    983985
    984 .button-v9 .button.button--style-secondary.button--style-outline:hover g path, .button-v9 .button.button--style-secondary.button--style-outline:hover g rect {
     986.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-secondary.button--style-outline:hover g rect {
    985987    stroke: #fff !important
    986988}
    987989
    988 .button-v9 .button.button--style-info {
     990.r2b2-options .button-v9 .button.button--style-info {
    989991    background-color: #2d7dce;
    990992    border-color: #2d7dce;
    … …  
    993995}
    994996
    995 .button-v9 .button.button--style-info:hover {
     997.r2b2-options .button-v9 .button.button--style-info:hover {
    996998    background-color: hoverColor(rgb(45, 125, 206));
    997999    border-color: hoverColor(rgb(45, 125, 206));
    … …  
    9991001}
    10001002
    1001 .button-v9 .button.button--style-info.button--style-outline {
     1003.r2b2-options .button-v9 .button.button--style-info.button--style-outline {
    10021004    background-color: #fff;
    10031005    color: #2d7dce;
    … …  
    10051007}
    10061008
    1007 .button-v9 .button.button--style-info.button--style-outline svg g {
     1009.r2b2-options .button-v9 .button.button--style-info.button--style-outline svg g {
    10081010    fill: #2d7dce
    10091011}
    10101012
    1011 .button-v9 .button.button--style-info.button--style-outline svg g path, .button-v9 .button.button--style-info.button--style-outline svg g rect {
     1013.r2b2-options .button-v9 .button.button--style-info.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-info.button--style-outline svg g rect {
    10121014    stroke: #2d7dce !important
    10131015}
    10141016
    1015 .button-v9 .button.button--style-info.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-info.button--style-outline:not(:hover) .superselect__clear {
     1017.r2b2-options .button-v9 .button.button--style-info.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-info.button--style-outline:not(:hover) .superselect__clear {
    10161018    background-color: #2d7dce
    10171019}
    10181020
    1019 .button-v9 .button.button--style-info.button--style-outline:hover {
     1021.r2b2-options .button-v9 .button.button--style-info.button--style-outline:hover {
    10201022    background-color: #2d7dce;
    10211023    border-color: #2d7dce;
    … …  
    10241026}
    10251027
    1026 .button-v9 .button.button--style-info.button--style-outline:hover g path, .button-v9 .button.button--style-info.button--style-outline:hover g rect {
     1028.r2b2-options .button-v9 .button.button--style-info.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-info.button--style-outline:hover g rect {
    10271029    stroke: #fff !important
    10281030}
    10291031
    1030 .button-v9 .button.button--style-success {
     1032.r2b2-options .button-v9 .button.button--style-success {
    10311033    background-color: #3dbe6b;
    10321034    border-color: #3dbe6b;
    … …  
    10351037}
    10361038
    1037 .button-v9 .button.button--style-success:hover {
     1039.r2b2-options .button-v9 .button.button--style-success:hover {
    10381040    background-color: hoverColor(rgb(61, 190, 107));
    10391041    border-color: hoverColor(rgb(61, 190, 107));
    … …  
    10411043}
    10421044
    1043 .button-v9 .button.button--style-success.button--style-outline {
     1045.r2b2-options .button-v9 .button.button--style-success.button--style-outline {
    10441046    background-color: #fff;
    10451047    color: #3dbe6b;
    … …  
    10471049}
    10481050
    1049 .button-v9 .button.button--style-success.button--style-outline svg g {
     1051.r2b2-options .button-v9 .button.button--style-success.button--style-outline svg g {
    10501052    fill: #3dbe6b
    10511053}
    10521054
    1053 .button-v9 .button.button--style-success.button--style-outline svg g path, .button-v9 .button.button--style-success.button--style-outline svg g rect {
     1055.r2b2-options .button-v9 .button.button--style-success.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-success.button--style-outline svg g rect {
    10541056    stroke: #3dbe6b !important
    10551057}
    10561058
    1057 .button-v9 .button.button--style-success.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-success.button--style-outline:not(:hover) .superselect__clear {
     1059.r2b2-options .button-v9 .button.button--style-success.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-success.button--style-outline:not(:hover) .superselect__clear {
    10581060    background-color: #3dbe6b
    10591061}
    10601062
    1061 .button-v9 .button.button--style-success.button--style-outline:hover {
     1063.r2b2-options .button-v9 .button.button--style-success.button--style-outline:hover {
    10621064    background-color: #3dbe6b;
    10631065    border-color: #3dbe6b;
    … …  
    10661068}
    10671069
    1068 .button-v9 .button.button--style-success.button--style-outline:hover g path, .button-v9 .button.button--style-success.button--style-outline:hover g rect {
     1070.r2b2-options .button-v9 .button.button--style-success.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-success.button--style-outline:hover g rect {
    10691071    stroke: #fff !important
    10701072}
    10711073
    1072 .button-v9 .button.button--style-warning {
     1074.r2b2-options .button-v9 .button.button--style-warning {
    10731075    background-color: #faa045;
    10741076    border-color: #faa045;
    … …  
    10771079}
    10781080
    1079 .button-v9 .button.button--style-warning:hover {
     1081.r2b2-options .button-v9 .button.button--style-warning:hover {
    10801082    background-color: hoverColor(rgb(250, 160, 69));
    10811083    border-color: hoverColor(rgb(250, 160, 69));
    … …  
    10831085}
    10841086
    1085 .button-v9 .button.button--style-warning.button--style-outline {
     1087.r2b2-options .button-v9 .button.button--style-warning.button--style-outline {
    10861088    background-color: #fff;
    10871089    color: #faa045;
    … …  
    10891091}
    10901092
    1091 .button-v9 .button.button--style-warning.button--style-outline svg g {
     1093.r2b2-options .button-v9 .button.button--style-warning.button--style-outline svg g {
    10921094    fill: #faa045
    10931095}
    10941096
    1095 .button-v9 .button.button--style-warning.button--style-outline svg g path, .button-v9 .button.button--style-warning.button--style-outline svg g rect {
     1097.r2b2-options .button-v9 .button.button--style-warning.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-warning.button--style-outline svg g rect {
    10961098    stroke: #faa045 !important
    10971099}
    10981100
    1099 .button-v9 .button.button--style-warning.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-warning.button--style-outline:not(:hover) .superselect__clear {
     1101.r2b2-options .button-v9 .button.button--style-warning.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-warning.button--style-outline:not(:hover) .superselect__clear {
    11001102    background-color: #faa045
    11011103}
    11021104
    1103 .button-v9 .button.button--style-warning.button--style-outline:hover {
     1105.r2b2-options .button-v9 .button.button--style-warning.button--style-outline:hover {
    11041106    background-color: #faa045;
    11051107    border-color: #faa045;
    … …  
    11081110}
    11091111
    1110 .button-v9 .button.button--style-warning.button--style-outline:hover g path, .button-v9 .button.button--style-warning.button--style-outline:hover g rect {
     1112.r2b2-options .button-v9 .button.button--style-warning.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-warning.button--style-outline:hover g rect {
    11111113    stroke: #fff !important
    11121114}
    11131115
    1114 .button-v9 .button.button--style-error {
     1116.r2b2-options .button-v9 .button.button--style-error {
    11151117    background-color: #ff052f;
    11161118    border-color: #ff052f;
    … …  
    11191121}
    11201122
    1121 .button-v9 .button.button--style-error:hover {
     1123.r2b2-options .button-v9 .button.button--style-error:hover {
    11221124    background-color: hoverColor(rgb(255, 5, 47));
    11231125    border-color: hoverColor(rgb(255, 5, 47));
    … …  
    11251127}
    11261128
    1127 .button-v9 .button.button--style-error.button--style-outline {
     1129.r2b2-options .button-v9 .button.button--style-error.button--style-outline {
    11281130    background-color: #fff;
    11291131    color: #ff052f;
    … …  
    11311133}
    11321134
    1133 .button-v9 .button.button--style-error.button--style-outline svg g {
     1135.r2b2-options .button-v9 .button.button--style-error.button--style-outline svg g {
    11341136    fill: #ff052f
    11351137}
    11361138
    1137 .button-v9 .button.button--style-error.button--style-outline svg g path, .button-v9 .button.button--style-error.button--style-outline svg g rect {
     1139.r2b2-options .button-v9 .button.button--style-error.button--style-outline svg g path.r2b2-options .button-v9 .button.button--style-error.button--style-outline svg g rect {
    11381140    stroke: #ff052f !important
    11391141}
    11401142
    1141 .button-v9 .button.button--style-error.button--style-outline:not(:hover) .icon, .button-v9 .button.button--style-error.button--style-outline:not(:hover) .superselect__clear {
     1143.r2b2-options .button-v9 .button.button--style-error.button--style-outline:not(:hover) .icon.r2b2-options .button-v9 .button.button--style-error.button--style-outline:not(:hover) .superselect__clear {
    11421144    background-color: #ff052f
    11431145}
    11441146
    1145 .button-v9 .button.button--style-error.button--style-outline:hover {
     1147.r2b2-options .button-v9 .button.button--style-error.button--style-outline:hover {
    11461148    background-color: #ff052f;
    11471149    border-color: #ff052f;
    … …  
    11501152}
    11511153
    1152 .button-v9 .button.button--style-error.button--style-outline:hover g path, .button-v9 .button.button--style-error.button--style-outline:hover g rect {
     1154.r2b2-options .button-v9 .button.button--style-error.button--style-outline:hover g path.r2b2-options .button-v9 .button.button--style-error.button--style-outline:hover g rect {
    11531155    stroke: #fff !important
    11541156}
    11551157
    1156 .button-v9 .button.button--style-no-style {
     1158.r2b2-options .button-v9 .button.button--style-no-style {
    11571159    border: none;
    11581160    margin: 0;
    … …  
    11691171}
    11701172
    1171 .button-v9 .button.button--style-no-style::-moz-focus-inner {
     1173.r2b2-options .button-v9 .button.button--style-no-style::-moz-focus-inner {
    11721174    border: 0;
    11731175    padding: 0
    11741176}
    11751177
    1176 .button-v9 .button.button--type-action-circle {
     1178.r2b2-options .button-v9 .button.button--type-action-circle {
    11771179    justify-content: center;
    11781180    width: 36px;
    … …  
    11841186}
    11851187
    1186 .button-v9 .button.button--type-action-circle .button__icon {
     1188.r2b2-options .button-v9 .button.button--type-action-circle .button__icon {
    11871189    margin-right: 0
    11881190}
    11891191
    1190 .button-v9 .button--nomargin {
     1192.r2b2-options .button-v9 .button--nomargin {
    11911193    margin: 0
    11921194}
    11931195
    1194 .button-v9 .button--first {
     1196.r2b2-options .button-v9 .button--first {
    11951197    margin-left: 0
    11961198}
    11971199
    1198 .button-v9 .button--with-spinner {
     1200.r2b2-options .button-v9 .button--with-spinner {
    11991201    position: relative
    12001202}
    12011203
    1202 .button-v9 .button.icon, .button-v9 .button.superselect__clear, .button-v9 button.icon, .button-v9 button.superselect__clear {
     1204.r2b2-options .button-v9 .button.icon.r2b2-options .button-v9 .button.superselect__clear, .r2b2-options .button-v9 button.icon, .r2b2-options .button-v9 button.superselect__clear {
    12031205    width: 16px;
    12041206    height: 16px;
    … …  
    12061208}
    12071209
    1208 .button-v9 .button.disabled, .button-v9 .button--state-disabled, .button-v9 button.disabled, .button-v9 button--state-disabled {
     1210.r2b2-options .button-v9 .button.disabled.r2b2-options .button-v9 .button--state-disabled, .r2b2-options .button-v9 button.disabled, .r2b2-options .button-v9 button--state-disabled {
    12091211    text-decoration: line-through;
    12101212    cursor: auto;
    … …  
    12141216}
    12151217
    1216 .button-v9 .button.disabled:hover, .button-v9 .button--state-disabled:hover, .button-v9 button.disabled:hover, .button-v9 button--state-disabled:hover {
     1218.r2b2-options .button-v9 .button.disabled:hover.r2b2-options .button-v9 .button--state-disabled:hover, .r2b2-options .button-v9 button.disabled:hover, .r2b2-options .button-v9 button--state-disabled:hover {
    12171219    background-color: #bdbcba;
    12181220    border-color: #bdbcba
    12191221}
    12201222
    1221 .badge {
     1223.r2b2-options .badge {
    12221224    display: flex;
    12231225    padding: .125rem .375rem;
    … …  
    12281230}
    12291231
    1230 .chip {
     1232.r2b2-options .chip {
    12311233    display: inline-flex;
    12321234    padding: .375rem .625rem .375rem .375rem;
    … …  
    12391241}
    12401242
    1241 .chip span {
     1243.r2b2-options .chip span {
    12421244    display: flex;
    12431245    justify-content: center;
    … …  
    12451247}
    12461248
    1247 .chip--checked {
     1249.r2b2-options .chip--checked {
    12481250    border-radius: 1.5rem;
    12491251    border: 1px solid #57534e;
    … …  
    12521254}
    12531255
    1254 .dimensions {
     1256.r2b2-options .dimensions {
    12551257    display: flex;
    12561258    flex-direction: column;
    … …  
    12591261}
    12601262
    1261 .dimensions__headline {
     1263.r2b2-options .dimensions__headline {
    12621264    display: flex;
    12631265    justify-content: space-between;
    … …  
    12671269}
    12681270
    1269 .dimensions__buttons {
     1271.r2b2-options .dimensions__buttons {
    12701272    display: flex;
    12711273    align-items: center;
    … …  
    12731275}
    12741276
    1275 .dimension {
     1277.r2b2-options .dimension {
    12761278    position: relative;
    12771279    display: flex;
    … …  
    12871289}
    12881290
    1289 .dimension__text {
     1291.r2b2-options .dimension__text {
    12901292    display: flex;
    12911293    align-items: flex-start;
    … …  
    12941296}
    12951297
    1296 .dimension__actions {
     1298.r2b2-options .dimension__actions {
    12971299    display: flex;
    12981300    align-items: flex-start
    12991301}
    13001302
    1301 .dimension__connector {
     1303.r2b2-options .dimension__connector {
    13021304    display: flex;
    13031305    padding: 0rem 1rem;
    … …  
    13061308}
    13071309
    1308 .dimension--disabled {
     1310.r2b2-options .dimension--disabled {
    13091311    color: #d6d3d1
    13101312}
    13111313
    1312 .dimension--disabled svg {
     1314.r2b2-options .dimension--disabled svg {
    13131315    opacity: .2
    13141316}
    13151317
    1316 .dimension--draggable {
     1318.r2b2-options .dimension--draggable {
    13171319    padding-left: 0
    13181320}
    13191321
    1320 .dimension__drag-handle {
     1322.r2b2-options .dimension__drag-handle {
    13211323    cursor: grab
    13221324}
    13231325
    1324 .dimension__drag-handle.svg-icon {
     1326.r2b2-options .dimension__drag-handle.svg-icon {
    13251327    width: .75rem;
    13261328    height: auto;
    … …  
    13281330}
    13291331
    1330 .dimension__drag-handle--state-dragging {
     1332.r2b2-options .dimension__drag-handle--state-dragging {
    13311333    cursor: grabbing
    13321334}
    13331335
    1334 .overview-filter {
     1336.r2b2-options .overview-filter {
    13351337    display: flex;
    13361338    width: 26.625rem;
    … …  
    13401342}
    13411343
    1342 .overview-filter__divider {
     1344.r2b2-options .overview-filter__divider {
    13431345    width: 100%;
    13441346    height: .0625rem;
    … …  
    13461348}
    13471349
    1348 .overview-filter__actions {
     1350.r2b2-options .overview-filter__actions {
    13491351    display: flex;
    13501352    align-items: flex-start;
    … …  
    13541356}
    13551357
    1356 .overview-filter__actions .button {
     1358.r2b2-options .overview-filter__actions .button {
    13571359    flex: 1 0 0
    13581360}
    13591361
    1360 .trend {
     1362.r2b2-options .trend {
    13611363    display: inline-flex;
    13621364    justify-content: center;
    … …  
    13651367}
    13661368
    1367 .trend-positive {
     1369.r2b2-options .trend-positive {
    13681370    color: #15803d
    13691371}
    13701372
    1371 .trend-negative {
     1373.r2b2-options .trend-negative {
    13721374    color: #b91c1c
    13731375}
    13741376
    1375 .card {
     1377.r2b2-options .card {
    13761378    display: flex;
    13771379    flex-direction: column;
    … …  
    13841386}
    13851387
    1386 .card .overview-table {
     1388.r2b2-options .card .overview-table {
    13871389    width: 100%
    13881390}
    13891391
    1390 .card-header {
     1392.r2b2-options .card-header {
    13911393    display: flex;
    13921394    align-items: center;
    … …  
    14001402}
    14011403
    1402 .card-header__actions {
     1404.r2b2-options .card-header__actions {
    14031405    display: flex;
    14041406    align-items: center;
    … …  
    14071409}
    14081410
    1409 .card-header--bg-white {
     1411.r2b2-options .card-header--bg-white {
    14101412    background-color: #fff
    14111413}
    14121414
    1413 .card-body {
     1415.r2b2-options .card-body {
    14141416    display: flex;
    14151417    padding: 1.25rem 1.5rem;
    … …  
    14201422}
    14211423
    1422 .card-body__content {
     1424.r2b2-options .card-body__content {
    14231425    display: flex;
    14241426    align-items: flex-start;
    … …  
    14271429}
    14281430
    1429 .label {
     1431.r2b2-options .label {
    14301432    display: flex;
    14311433    flex-direction: column;
    … …  
    14361438}
    14371439
    1438 .input, .superselect__header {
     1440.r2b2-options .input.r2b2-options .superselect__header {
    14391441    position: relative;
    14401442    display: flex;
    … …  
    14451447}
    14461448
    1447 .input__field, .superselect__search {
     1449.r2b2-options .input__field.r2b2-options .superselect__search {
    14481450    display: flex;
    14491451    flex-direction: row;
    … …  
    14581460}
    14591461
    1460 .input__info {
     1462.r2b2-options .input__info {
    14611463    position: absolute;
    14621464    right: 0px;
    … …  
    14671469}
    14681470
    1469 .radio input[type=radio] {
     1471.r2b2-options .radio input[type=radio] {
    14701472    -webkit-appearance: none;
    14711473    appearance: none;
    … …  
    14801482}
    14811483
    1482 .radio input[type=radio]:checked {
     1484.r2b2-options .radio input[type=radio]:checked {
    14831485    background-image: url("/assets/img/icon-check-radio-orange.svg");
    14841486    background-position: center;
    … …  
    14871489}
    14881490
    1489 .radio input[type=radio]:checked:hover:enabled {
     1491.r2b2-options .radio input[type=radio]:checked:hover:enabled {
    14901492    background-image: url("/assets/img/icon-check-radio-orange.svg");
    14911493    background-position: center;
    … …  
    14931495}
    14941496
    1495 .radio input[type=radio]:checked:focus {
     1497.r2b2-options .radio input[type=radio]:checked:focus {
    14961498    border: 1px solid #e57300
    14971499}
    14981500
    1499 .radio input[type=radio]:checked:disabled {
     1501.r2b2-options .radio input[type=radio]:checked:disabled {
    15001502    background-image: url("/assets/img/icon-check-radio-neutral.svg");
    15011503    background-position: center;
    … …  
    15031505}
    15041506
    1505 .radio input[type=radio]:hover:enabled {
     1507.r2b2-options .radio input[type=radio]:hover:enabled {
    15061508    border: 1px solid #e57300;
    15071509    background: #fed
    15081510}
    15091511
    1510 .radio input[type=radio]:focus {
     1512.r2b2-options .radio input[type=radio]:focus {
    15111513    border: 1px solid #fc9;
    15121514    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    15131515}
    15141516
    1515 .radio input[type=radio]:disabled {
     1517.r2b2-options .radio input[type=radio]:disabled {
    15161518    background: #f5f5f4;
    15171519    border: 1px solid #d6d3d1
    15181520}
    15191521
    1520 .checkbox, .superselect__checkbox, .superselect__item {
     1522.r2b2-options .checkbox.r2b2-options .superselect__checkbox, .r2b2-options .superselect__item {
    15211523    display: flex;
    15221524    align-items: center;
    … …  
    15251527}
    15261528
    1527 .checkbox input[type=checkbox], .superselect__checkbox input[type=checkbox], .superselect__item input[type=checkbox] {
     1529.r2b2-options .checkbox input[type=checkbox].r2b2-options .superselect__checkbox input[type=checkbox], .r2b2-options .superselect__item input[type=checkbox] {
    15281530    -webkit-appearance: none;
    15291531    appearance: none;
    … …  
    15381540}
    15391541
    1540 .checkbox input[type=checkbox]:checked, .superselect__checkbox input[type=checkbox]:checked, .superselect__item input[type=checkbox]:checked {
     1542.r2b2-options .checkbox input[type=checkbox]:checked.r2b2-options .superselect__checkbox input[type=checkbox]:checked, .r2b2-options .superselect__item input[type=checkbox]:checked {
    15411543    background-image: url("/assets/img/icon-check-orange.svg");
    15421544    background-position: center;
    … …  
    15451547}
    15461548
    1547 .checkbox input[type=checkbox]:checked:hover:enabled, .superselect__checkbox input[type=checkbox]:checked:hover:enabled, .superselect__item input[type=checkbox]:checked:hover:enabled {
     1549.r2b2-options .checkbox input[type=checkbox]:checked:hover:enabled.r2b2-options .superselect__checkbox input[type=checkbox]:checked:hover:enabled, .r2b2-options .superselect__item input[type=checkbox]:checked:hover:enabled {
    15481550    background-image: url("/assets/img/icon-check-orange.svg");
    15491551    background-position: center;
    … …  
    15511553}
    15521554
    1553 .checkbox input[type=checkbox]:checked:focus, .superselect__checkbox input[type=checkbox]:checked:focus, .superselect__item input[type=checkbox]:checked:focus {
     1555.r2b2-options .checkbox input[type=checkbox]:checked:focus.r2b2-options .superselect__checkbox input[type=checkbox]:checked:focus, .r2b2-options .superselect__item input[type=checkbox]:checked:focus {
    15541556    border: 1px solid #e57300
    15551557}
    15561558
    1557 .checkbox input[type=checkbox]:checked:disabled, .superselect__checkbox input[type=checkbox]:checked:disabled, .superselect__item input[type=checkbox]:checked:disabled {
     1559.r2b2-options .checkbox input[type=checkbox]:checked:disabled.r2b2-options .superselect__checkbox input[type=checkbox]:checked:disabled, .r2b2-options .superselect__item input[type=checkbox]:checked:disabled {
    15581560    background-image: url("/assets/img/icon-check-neutral.svg");
    15591561    background-position: center;
    … …  
    15611563}
    15621564
    1563 .checkbox input[type=checkbox]:hover:enabled, .superselect__checkbox input[type=checkbox]:hover:enabled, .superselect__item input[type=checkbox]:hover:enabled {
     1565.r2b2-options .checkbox input[type=checkbox]:hover:enabled.r2b2-options .superselect__checkbox input[type=checkbox]:hover:enabled, .r2b2-options .superselect__item input[type=checkbox]:hover:enabled {
    15641566    border: 1px solid #e57300;
    15651567    background: #fed
    15661568}
    15671569
    1568 .checkbox input[type=checkbox]:focus, .superselect__checkbox input[type=checkbox]:focus, .superselect__item input[type=checkbox]:focus {
     1570.r2b2-options .checkbox input[type=checkbox]:focus.r2b2-options .superselect__checkbox input[type=checkbox]:focus, .r2b2-options .superselect__item input[type=checkbox]:focus {
    15691571    border: 1px solid #fc9;
    15701572    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    15711573}
    15721574
    1573 .checkbox input[type=checkbox]:disabled, .superselect__checkbox input[type=checkbox]:disabled, .superselect__item input[type=checkbox]:disabled {
     1575.r2b2-options .checkbox input[type=checkbox]:disabled.r2b2-options .superselect__checkbox input[type=checkbox]:disabled, .r2b2-options .superselect__item input[type=checkbox]:disabled {
    15741576    background: #f5f5f4;
    15751577    border: 1px solid #d6d3d1
    15761578}
    15771579
    1578 .switch {
     1580.r2b2-options .switch {
    15791581    position: relative;
    15801582    display: flex;
    … …  
    15851587}
    15861588
    1587 .switch__field {
     1589.r2b2-options .switch__field {
    15881590    position: relative;
    15891591    display: inline-flex;
    … …  
    15981600}
    15991601
    1600 .switch__field:hover {
     1602.r2b2-options .switch__field:hover {
    16011603    background: #d6d3d1
    16021604}
    16031605
    1604 .switch__field::before {
     1606.r2b2-options .switch__field::before {
    16051607    position: absolute;
    16061608    content: "";
    … …  
    16151617}
    16161618
    1617 .switch__label {
     1619.r2b2-options .switch__label {
    16181620    margin-left: .5rem
    16191621}
    16201622
    1621 .switch input {
     1623.r2b2-options .switch input {
    16221624    opacity: 0;
    16231625    width: 0;
    … …  
    16251627}
    16261628
    1627 .switch input:checked + .switch__field {
     1629.r2b2-options .switch input:checked + .switch__field {
    16281630    background: #e57300
    16291631}
    16301632
    1631 .switch input:checked + .switch__field:hover {
     1633.r2b2-options .switch input:checked + .switch__field:hover {
    16321634    background: #b36b24
    16331635}
    16341636
    1635 .switch input:checked + .switch__field:focus {
     1637.r2b2-options .switch input:checked + .switch__field:focus {
    16361638    background: #e57300;
    16371639    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    16381640}
    16391641
    1640 .switch input:disabled + .switch__field {
     1642.r2b2-options .switch input:disabled + .switch__field {
    16411643    background-color: #f5f5f4
    16421644}
    16431645
    1644 .switch input:focus + .switch__field {
     1646.r2b2-options .switch input:focus + .switch__field {
    16451647    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    16461648}
    16471649
    1648 .switch input:checked + .switch__field::before {
     1650.r2b2-options .switch input:checked + .switch__field::before {
    16491651    -webkit-transform: translateX(1rem);
    16501652    -ms-transform: translateX(1rem);
    … …  
    16521654}
    16531655
    1654 .dropdown-menu {
     1656.r2b2-options .dropdown-menu {
    16551657    display: flex;
    16561658    padding: .25rem 0rem;
    … …  
    16641666}
    16651667
    1666 .dropdown-item {
     1668.r2b2-options .dropdown-item {
    16671669    display: flex;
    16681670    width: 15rem;
    … …  
    16721674}
    16731675
    1674 .dropdown-item__content {
     1676.r2b2-options .dropdown-item__content {
    16751677    display: flex;
    16761678    padding: .5625rem .625rem;
    … …  
    16801682}
    16811683
    1682 .dropdown-item__content:hover:enabled {
     1684.r2b2-options .dropdown-item__content:hover:enabled {
    16831685    background: #fafaf9
    16841686}
    16851687
    1686 .dropdown-item__content:disabled {
     1688.r2b2-options .dropdown-item__content:disabled {
    16871689    color: #d6d3d1
    16881690}
    16891691
    1690 .select {
     1692.r2b2-options .select {
    16911693    position: relative;
    16921694    display: flex;
    … …  
    16981700}
    16991701
    1700 .select__label {
     1702.r2b2-options .select__label {
    17011703    color: #44403c
    17021704}
    17031705
    1704 .select__input {
     1706.r2b2-options .select__input {
    17051707    display: flex;
    17061708    flex-direction: row;
    … …  
    17161718}
    17171719
    1718 .select__input:focus {
     1720.r2b2-options .select__input:focus {
    17191721    border: none;
    17201722    box-shadow: 0px 0px 0px 2px #fdb, 0px 1px 2px 0px rgba(41, 37, 36, .06)
    17211723}
    17221724
    1723 .superselect {
     1725.r2b2-options .superselect {
    17241726    position: relative
    17251727}
    17261728
    1727 .superselect__expander {
     1729.r2b2-options .superselect__expander {
    17281730    position: absolute;
    17291731    width: 100%;
    … …  
    17321734}
    17331735
    1734 .superselect__search {
     1736.r2b2-options .superselect__search {
    17351737    border-bottom-left-radius: 0;
    17361738    border-bottom-right-radius: 0
    17371739}
    17381740
    1739 .superselect__items {
     1741.r2b2-options .superselect__items {
    17401742    display: flex;
    17411743    border: 1px solid #e7e5e4;
    … …  
    17451747}
    17461748
    1747 .superselect__items--state-empty {
     1749.r2b2-options .superselect__items--state-empty {
    17481750    align-items: center;
    17491751    justify-content: center
    17501752}
    17511753
    1752 .superselect__item {
     1754.r2b2-options .superselect__item {
    17531755    position: relative;
    17541756    display: block;
    … …  
    17581760}
    17591761
    1760 .superselect__item:hover {
     1762.r2b2-options .superselect__item:hover {
    17611763    background-color: #fafaf9
    17621764}
    17631765
    1764 .superselect input[type=checkbox] {
     1766.r2b2-options .superselect input[type=checkbox] {
    17651767    position: absolute;
    17661768    left: 0;
    … …  
    17691771}
    17701772
    1771 .superselect__label {
     1773.r2b2-options .superselect__label {
    17721774    display: block;
    17731775    margin-left: 1.5em
    17741776}
    17751777
    1776 .superselect__footer {
     1778.r2b2-options .superselect__footer {
    17771779    outline: none;
    17781780    display: flex;
    … …  
    17841786}
    17851787
    1786 .ReactTable .input__field, .ReactTable .superselect__search {
     1788.r2b2-options .ReactTable .input__field.r2b2-options .ReactTable .superselect__search {
    17871789    border-right: none;
    17881790    border-top: none;
    … …  
    17911793}
    17921794
    1793 .ReactTable {
     1795.r2b2-options .ReactTable {
    17941796    display: flex;
    17951797    flex-direction: column;
    … …  
    18061808}
    18071809
    1808 .ReactTable .rt-table {
     1810.r2b2-options .ReactTable .rt-table {
    18091811    display: flex;
    18101812    width: 100%;
    … …  
    18171819}
    18181820
    1819 .ReactTable .rt-thead {
     1821.r2b2-options .ReactTable .rt-thead {
    18201822    display: flex;
    18211823    flex: 1 0 auto;
    … …  
    18231825}
    18241826
    1825 .ReactTable .rt-thead .rt-tr {
     1827.r2b2-options .ReactTable .rt-thead .rt-tr {
    18261828    height: 48px
    18271829}
    18281830
    1829 .ReactTable .rt-thead.-filters {
     1831.r2b2-options .ReactTable .rt-thead.-filters {
    18301832    border-bottom: 1px solid #e7e5e4
    18311833}
    18321834
    1833 .ReactTable .rt-thead.-filters .rt-th {
     1835.r2b2-options .ReactTable .rt-thead.-filters .rt-th {
    18341836    box-sizing: border-box;
    18351837    position: relative;
    … …  
    18381840}
    18391841
    1840 .ReactTable .rt-thead.-filters .rt-th:first-child {
     1842.r2b2-options .ReactTable .rt-thead.-filters .rt-th:first-child {
    18411843    border-left: none
    18421844}
    18431845
    1844 .ReactTable .rt-thead.-filters .rt-th:last-child {
     1846.r2b2-options .ReactTable .rt-thead.-filters .rt-th:last-child {
    18451847    border-right: none
    18461848}
    18471849
    1848 .ReactTable .rt-thead.-filters .rt-th input {
     1850.r2b2-options .ReactTable .rt-thead.-filters .rt-th input {
    18491851    border: none
    18501852}
    18511853
    1852 .ReactTable .rt-thead.-filters-content {
     1854.r2b2-options .ReactTable .rt-thead.-filters-content {
    18531855    width: 100%;
    18541856    display: flex;
    … …  
    18561858}
    18571859
    1858 .ReactTable .rt-thead.-filters-content .meta--cellType-checkbox {
     1860.r2b2-options .ReactTable .rt-thead.-filters-content .meta--cellType-checkbox {
    18591861    display: flex;
    18601862    justify-content: center
    18611863}
    18621864
    1863 .ReactTable .rt-thead.-filters-content:last-child {
     1865.r2b2-options .ReactTable .rt-thead.-filters-content:last-child {
    18641866    border-left: .5px solid #e7e5e4
    18651867}
    18661868
    1867 .ReactTable .rt-thead.-header {
     1869.r2b2-options .ReactTable .rt-thead.-header {
    18681870    border-top: 1px solid #e7e5e4
    18691871}
    18701872
    1871 .ReactTable .rt-thead.-header .rt-tr {
     1873.r2b2-options .ReactTable .rt-thead.-header .rt-tr {
    18721874    background-color: #fafaf9
    18731875}
    18741876
    1875 .ReactTable .rt-thead.-header .rt-th {
     1877.r2b2-options .ReactTable .rt-thead.-header .rt-th {
    18761878    box-sizing: border-box;
    18771879    align-items: center;
    … …  
    18801882}
    18811883
    1882 .ReactTable .rt-thead.-header .rt-th:first-child {
     1884.r2b2-options .ReactTable .rt-thead.-header .rt-th:first-child {
    18831885    border-left: none
    18841886}
    18851887
    1886 .ReactTable .rt-thead.-header .rt-th:last-child {
     1888.r2b2-options .ReactTable .rt-thead.-header .rt-th:last-child {
    18871889    border-right: none
    18881890}
    18891891
    1890 .ReactTable .rt-tr {
     1892.r2b2-options .ReactTable .rt-tr {
    18911893    display: inline-flex;
    18921894    flex: 1 0 auto;
    … …  
    18961898}
    18971899
    1898 .ReactTable .rt-tr-group {
     1900.r2b2-options .ReactTable .rt-tr-group {
    18991901    display: flex;
    19001902    flex: 1 0 auto;
    … …  
    19041906}
    19051907
    1906 .ReactTable .rt-td {
     1908.r2b2-options .ReactTable .rt-td {
    19071909    display: flex;
    19081910    align-items: center;
    … …  
    19121914}
    19131915
    1914 .ReactTable .rt-td-content {
     1916.r2b2-options .ReactTable .rt-td-content {
    19151917    width: 100%;
    19161918    height: 100%;
    … …  
    19201922}
    19211923
    1922 .ReactTable .rt-tbody {
     1924.r2b2-options .ReactTable .rt-tbody {
    19231925    flex: 99999 1 auto;
    19241926    display: flex;
    … …  
    19271929}
    19281930
    1929 .ReactTable .rt-resizable-header-content {
     1931.r2b2-options .ReactTable .rt-resizable-header-content {
    19301932    display: flex;
    19311933    align-items: center
    19321934}
    19331935
    1934 .ReactTable .rt-th {
     1936.r2b2-options .ReactTable .rt-th {
    19351937    display: flex;
    19361938    height: 48px;
    … …  
    19391941}
    19401942
    1941 .ReactTable .rt-th.-cursor-pointer {
     1943.r2b2-options .ReactTable .rt-th.-cursor-pointer {
    19421944    cursor: pointer
    19431945}
    19441946
    1945 .ReactTable .rt-th-content {
     1947.r2b2-options .ReactTable .rt-th-content {
    19461948    display: flex;
    19471949    align-items: center;
    … …  
    19491951}
    19501952
    1951 .ReactTable .rt-th-sort-container {
     1953.r2b2-options .ReactTable .rt-th-sort-container {
    19521954    display: flex;
    19531955    flex-direction: column;
    … …  
    19581960}
    19591961
    1960 .ReactTable .rt-th-svg {
     1962.r2b2-options .ReactTable .rt-th-svg {
    19611963    display: flex
    19621964}
    19631965
    1964 .ReactTable .rt-th-svg--sort-asc {
     1966.r2b2-options .ReactTable .rt-th-svg--sort-asc {
    19651967    margin-bottom: 3px
    19661968}
    19671969
    1968 .ReactTable .rt-th-svg--sort-asc svg {
     1970.r2b2-options .ReactTable .rt-th-svg--sort-asc svg {
    19691971    width: 9px;
    19701972    height: 6px
    19711973}
    19721974
    1973 .ReactTable .rt-th-svg--sort-desc {
     1975.r2b2-options .ReactTable .rt-th-svg--sort-desc {
    19741976    margin-top: 3px svg;
    19751977    margin-top-width: 9px;
    … …  
    19771979}
    19781980
    1979 .ReactTable .rt-th.-sort-asc .rt-th-svg--sort-asc svg g g g path {
     1981.r2b2-options .ReactTable .rt-th.-sort-asc .rt-th-svg--sort-asc svg g g g path {
    19801982    fill: #f93 !important
    19811983}
    19821984
    1983 .ReactTable .rt-th.-sort-desc .rt-th-svg--sort-desc svg g g g path {
     1985.r2b2-options .ReactTable .rt-th.-sort-desc .rt-th-svg--sort-desc svg g g g path {
    19841986    fill: #f93 !important
    19851987}
    19861988
    1987 .ReactTable .rt-resizer {
     1989.r2b2-options .ReactTable .rt-resizer {
    19881990    display: flex;
    19891991    width: 12px;
    … …  
    19941996}
    19951997
    1996 .ReactTable .rt-resizer:before {
     1998.r2b2-options .ReactTable .rt-resizer:before {
    19971999    content: "";
    19982000    display: block;
    … …  
    20052007}
    20062008
    2007 .ReactTable .rt-noData {
     2009.r2b2-options .ReactTable .rt-noData {
    20082010    position: absolute
    20092011}
    20102012
    2011 .ReactTable .rt-pagination {
     2013.r2b2-options .ReactTable .rt-pagination {
    20122014    display: flex;
    20132015    justify-content: space-between
    20142016}
    20152017
    2016 .ReactTable .rt-pagination-pages {
     2018.r2b2-options .ReactTable .rt-pagination-pages {
    20172019    display: flex;
    20182020    align-items: center
    20192021}
    20202022
    2021 .ReactTable .rt-pagination-pages__page {
     2023.r2b2-options .ReactTable .rt-pagination-pages__page {
    20222024    display: flex;
    20232025    align-items: center;
    … …  
    20312033}
    20322034
    2033 .ReactTable .rt-pagination-pages__page svg {
     2035.r2b2-options .ReactTable .rt-pagination-pages__page svg {
    20342036    height: 12px
    20352037}
    20362038
    2037 .ReactTable .rt-pagination-pages__page--previous {
     2039.r2b2-options .ReactTable .rt-pagination-pages__page--previous {
    20382040    border-bottom-left-radius: 12px;
    20392041    border-top-left-radius: 12px
    20402042}
    20412043
    2042 .ReactTable .rt-pagination-pages__page--next {
     2044.r2b2-options .ReactTable .rt-pagination-pages__page--next {
    20432045    border-bottom-right-radius: 12px;
    20442046    border-top-right-radius: 12px
    20452047}
    20462048
    2047 .ReactTable .rt-pagination-pages__page--current {
     2049.r2b2-options .ReactTable .rt-pagination-pages__page--current {
    20482050    background: #fafaf9
    20492051}
    20502052
    2051 .ReactTable .rt-pagination-pages__page:disabled {
     2053.r2b2-options .ReactTable .rt-pagination-pages__page:disabled {
    20522054    cursor: not-allowed
    20532055}
    20542056
    2055 .ReactTable .rt-pagination-pages__page:not(.rt-pagination-pages__page--current):hover {
     2057.r2b2-options .ReactTable .rt-pagination-pages__page:not(.rt-pagination-pages__page--current):hover {
    20562058    background-color: #fafaf9
    20572059}
    20582060
    2059 .ReactTable .rt-pagination-size-options {
     2061.r2b2-options .ReactTable .rt-pagination-size-options {
    20602062    display: flex;
    20612063    align-items: center
    20622064}
    20632065
    2064 .ReactTable .rt-pagination-size-options__label {
     2066.r2b2-options .ReactTable .rt-pagination-size-options__label {
    20652067    margin-right: 12px
    20662068}
    20672069
    2068 .ReactTable .rt-pagination-size-options__select {
     2070.r2b2-options .ReactTable .rt-pagination-size-options__select {
    20692071    width: 72px;
    20702072    height: 48px;
    … …  
    20782080}
    20792081
    2080 .ReactTable .pagination-bottom {
     2082.r2b2-options .ReactTable .pagination-bottom {
    20812083    width: 100%;
    20822084    padding: 1rem;
    … …  
    20862088}
    20872089
    2088 .ReactTable .input__field, .ReactTable .superselect__search {
     2090.r2b2-options .ReactTable .input__field.r2b2-options .ReactTable .superselect__search {
    20892091    height: 100%;
    20902092    width: 100%;
    … …  
    20932095}
    20942096
    2095 .ReactTable .meta--cellType-checkbox .checkbox__field {
     2097.r2b2-options .ReactTable .meta--cellType-checkbox .checkbox__field {
    20962098    position: static
    20972099}
    20982100
    2099 .ReactTable .meta--cellType-text {
     2101.r2b2-options .ReactTable .meta--cellType-text {
    21002102    justify-content: flex-start;
    21012103    text-align: left
    21022104}
    21032105
    2104 .ReactTable .meta--cellType-text .rt-th-content {
     2106.r2b2-options .ReactTable .meta--cellType-text .rt-th-content {
    21052107    justify-content: flex-start;
    21062108    text-align: left
    21072109}
    21082110
    2109 .ReactTable .meta--cellType-action {
     2111.r2b2-options .ReactTable .meta--cellType-action {
    21102112    justify-content: center;
    21112113    text-align: center
    21122114}
    21132115
    2114 .ReactTable .meta--cellType-action .rt-th-content {
     2116.r2b2-options .ReactTable .meta--cellType-action .rt-th-content {
    21152117    justify-content: center;
    21162118    text-align: center
    21172119}
    21182120
    2119 .ReactTable .meta--cellType-other {
     2121.r2b2-options .ReactTable .meta--cellType-other {
    21202122    justify-content: flex-end;
    21212123    text-align: right
    21222124}
    21232125
    2124 .ReactTable .meta--cellType-other .rt-th-content {
     2126.r2b2-options .ReactTable .meta--cellType-other .rt-th-content {
    21252127    justify-content: flex-end;
    21262128    text-align: right
    21272129}
    21282130
    2129 .rt-filter-opener {
     2131.r2b2-options .rt-filter-opener {
    21302132    display: flex;
    21312133    width: 100%;
    … …  
    21362138}
    21372139
    2138 .popup {
     2140.r2b2-options .popup {
    21392141    display: flex;
    21402142    flex-flow: column nowrap;
    … …  
    21502152}
    21512153
    2152 .popup__background {
     2154.r2b2-options .popup__background {
    21532155    position: absolute;
    21542156    left: 0;
    … …  
    21612163}
    21622164
    2163 .popup--active {
     2165.r2b2-options .popup--active {
    21642166    visibility: visible
    21652167}
    21662168
    2167 .popup-body {
     2169.r2b2-options .popup-body {
    21682170    display: inline-flex;
    21692171    flex-direction: column;
    … …  
    21762178}
    21772179
    2178 .popup-body__headline {
     2180.r2b2-options .popup-body__headline {
    21792181    display: flex;
    21802182    justify-content: space-between;
    … …  
    21862188}
    21872189
    2188 .popup-body__content {
     2190.r2b2-options .popup-body__content {
    21892191    display: flex;
    21902192    width: 46.75rem;
    … …  
    21962198}
    21972199
    2198 .popup-body__actions {
     2200.r2b2-options .popup-body__actions {
    21992201    display: flex;
    22002202    width: 46.75rem;
    … …  
    22042206}
    22052207
    2206 .metric {
     2208.r2b2-options .metric {
    22072209    display: flex;
    22082210    padding: 1.25rem;
    … …  
    22182220}
    22192221
    2220 .metric__heading {
     2222.r2b2-options .metric__heading {
    22212223    display: flex;
    22222224    align-items: center;
    … …  
    22272229}
    22282230
    2229 .metric__data {
     2231.r2b2-options .metric__data {
    22302232    display: flex;
    22312233    flex-direction: column;
    … …  
    22352237}
    22362238
    2237 .metric__number {
     2239.r2b2-options .metric__number {
    22382240    align-self: stretch;
    22392241    color: #1c1917
    22402242}
    22412243
    2242 .metric__change {
     2244.r2b2-options .metric__change {
    22432245    display: flex;
    22442246    align-items: center;
    … …  
    22482250}
    22492251
    2250 .metrics {
     2252.r2b2-options .metrics {
    22512253    display: flex;
    22522254    align-items: flex-start;
    … …  
    22562258}
    22572259
    2258 .tooltip {
     2260.r2b2-options .tooltip {
    22592261    position: relative;
    22602262    cursor: help;
    … …  
    22622264}
    22632265
    2264 .tooltip__icon {
     2266.r2b2-options .tooltip__icon {
    22652267    margin: 0
    22662268}
    22672269
    2268 .tooltip__container {
     2270.r2b2-options .tooltip__container {
    22692271    z-index: 11;
    22702272    position: absolute;
    … …  
    22802282}
    22812283
    2282 .tooltip__container::before {
     2284.r2b2-options .tooltip__container::before {
    22832285    content: "";
    22842286    display: block;
    … …  
    22922294}
    22932295
    2294 .tooltip__container--direction-bottom::before {
     2296.r2b2-options .tooltip__container--direction-bottom::before {
    22952297    bottom: unset;
    22962298    top: -1em;
    … …  
    22992301}
    23002302
    2301 .tooltip__container--direction-left::before, .tooltip__container--direction-right::before, .tooltip__container--direction-right-top::before, .tooltip__container--direction-left-top::before, .tooltip__container--direction-left-bottom::before, .tooltip__container--direction-right-bottom::before {
     2303.r2b2-options .tooltip__container--direction-left::before.r2b2-options .tooltip__container--direction-right::before, .r2b2-options .tooltip__container--direction-right-top::before, .r2b2-options .tooltip__container--direction-left-top::before, .r2b2-options .tooltip__container--direction-left-bottom::before, .r2b2-options .tooltip__container--direction-right-bottom::before {
    23022304    display: none
    23032305}
    23042306
    2305 .tooltip__content {
     2307.r2b2-options .tooltip__content {
    23062308    position: relative;
    23072309    display: inline-block;
    … …  
    23152317}
    23162318
    2317 .tooltip__content-container {
     2319.r2b2-options .tooltip__content-container {
    23182320    position: relative;
    23192321    padding: .25em 0;
    … …  
    23212323}
    23222324
    2323 .tooltip__content-container::before {
     2325.r2b2-options .tooltip__content-container::before {
    23242326    content: "";
    23252327    display: none;
    … …  
    23312333}
    23322334
    2333 .tooltip__content-container[data-placement*=top]::before {
     2335.r2b2-options .tooltip__content-container[data-placement*=top]::before {
    23342336    display: block;
    23352337    left: 50%;
    … …  
    23382340}
    23392341
    2340 .tooltip__content-container[data-placement*=bottom]::before {
     2342.r2b2-options .tooltip__content-container[data-placement*=bottom]::before {
    23412343    display: block;
    23422344    left: 50%;
    … …  
    23452347}
    23462348
    2347 .tooltip--state-active .tooltip__container, .tooltip:hover .tooltip__container {
     2349.r2b2-options .tooltip--state-active .tooltip__container.r2b2-options .tooltip:hover .tooltip__container {
    23482350    visibility: visible;
    23492351    opacity: 1;
    … …  
    23522354}
    23532355
    2354 .navItem {
     2356.r2b2-options .navItem {
    23552357    display: inline-flex;
    23562358    padding: .625rem 1rem;
    … …  
    23602362}
    23612363
    2362 .navItem-default {
     2364.r2b2-options .navItem-default {
    23632365    border-radius: .375rem;
    23642366    background: #fff
    23652367}
    23662368
    2367 .navItem-selected {
     2369.r2b2-options .navItem-selected {
    23682370    border-radius: .375rem;
    23692371    background: #f5f5f4
    23702372}
    23712373
    2372 .nav-button {
     2374.r2b2-options .nav-button {
    23732375    display: inline-flex;
    23742376    padding: .75rem;
    … …  
    23792381}
    23802382
    2381 .nav-button--current {
     2383.r2b2-options .nav-button--current {
    23822384    border: 1px solid #57534e;
    23832385    background: #44403c
    23842386}
    23852387
    2386 .sidebar-nav {
     2388.r2b2-options .sidebar-nav {
    23872389    position: fixed;
    23882390    top: 0;
    … …  
    23952397}
    23962398
    2397 .left-bar-nav {
     2399.r2b2-options .left-bar-nav {
    23982400    display: flex;
    23992401    flex-direction: column;
    … …  
    24082410}
    24092411
    2410 .left-bar-nav__content {
     2412.r2b2-options .left-bar-nav__content {
    24112413    display: flex;
    24122414    flex-direction: column;
    … …  
    24192421}
    24202422
    2421 .left-bar-nav__content--main {
     2423.r2b2-options .left-bar-nav__content--main {
    24222424    display: flex;
    24232425    padding: 0rem 1rem;
    … …  
    24282430}
    24292431
    2430 .left-bar-nav__content--footer {
     2432.r2b2-options .left-bar-nav__content--footer {
    24312433    display: flex;
    24322434    padding: 0rem 1rem 1.25rem 1rem;
    … …  
    24372439}
    24382440
    2439 .left-bar-nav__divider {
     2441.r2b2-options .left-bar-nav__divider {
    24402442    width: 3rem;
    24412443    height: .0625rem;
    … …  
    24442446}
    24452447
    2446 .left-bar-nav:hover ~ .menu {
     2448.r2b2-options .left-bar-nav:hover ~ .menu {
    24472449    visibility: visible;
    24482450    width: 16.9375rem;
    … …  
    24502452}
    24512453
    2452 .menu {
     2454.r2b2-options .menu {
    24532455    display: flex;
    24542456    width: 0;
    … …  
    24622464}
    24632465
    2464 .menu:hover {
     2466.r2b2-options .menu:hover {
    24652467    visibility: visible;
    24662468    width: 16.9375rem;
    … …  
    24682470}
    24692471
    2470 .menu__item {
     2472.r2b2-options .menu__item {
    24712473    display: flex;
    24722474    padding: .625rem;
    … …  
    24792481}
    24802482
    2481 .menu__item:hover {
     2483.r2b2-options .menu__item:hover {
    24822484    color: #fff
    24832485}
    24842486
    2485 .menu__item--active {
     2487.r2b2-options .menu__item--active {
    24862488    background: #44403c
    24872489}
    24882490
    2489 .menu__item--active a {
     2491.r2b2-options .menu__item--active a {
    24902492    color: #fff
    24912493}
    24922494
    2493 .menu__item--expanded {
     2495.r2b2-options .menu__item--expanded {
    24942496    flex-direction: column;
    24952497    justify-content: center;
    … …  
    24972499}
    24982500
    2499 .menu a {
     2501.r2b2-options .menu a {
    25002502    color: #a8a29e;
    25012503    text-decoration: none
    25022504}
    25032505
    2504 .sub-menu {
     2506.r2b2-options .sub-menu {
    25052507    display: flex;
    25062508    flex-direction: column;
    … …  
    25102512}
    25112513
    2512 .sub-menu__item {
     2514.r2b2-options .sub-menu__item {
    25132515    position: relative;
    25142516    display: flex;
    … …  
    25212523}
    25222524
    2523 .sub-menu__item:hover {
     2525.r2b2-options .sub-menu__item:hover {
    25242526    color: #fff
    25252527}
    25262528
    2527 .sub-menu__item--active a {
     2529.r2b2-options .sub-menu__item--active a {
    25282530    color: #fff
    25292531}
    25302532
    2531 .page-header {
     2533.r2b2-options .page-header {
    25322534    display: flex;
    25332535    align-items: flex-start;
    … …  
    25382540}
    25392541
    2540 .page-header__text {
     2542.r2b2-options .page-header__text {
    25412543    display: flex;
    25422544    flex-direction: column;
    … …  
    25482550}
    25492551
    2550 .page-header__text--primary {
     2552.r2b2-options .page-header__text--primary {
    25512553    color: #1c1917
    25522554}
    25532555
    2554 .page-header__text--secondary {
     2556.r2b2-options .page-header__text--secondary {
    25552557    color: #57534e
    25562558}
    25572559
    2558 .page-header__actions {
     2560.r2b2-options .page-header__actions {
    25592561    display: flex;
    25602562    align-items: center;
    … …  
    25632565}
    25642566
    2565 .footer {
     2567.r2b2-options .footer {
    25662568    position: fixed;
    25672569    left: 4.125rem;
    … …  
    25782580}
    25792581
    2580 .footer__divider {
     2582.r2b2-options .footer__divider {
    25812583    width: .0625rem;
    25822584    height: 1.25rem;
    … …  
    25842586}
    25852587
    2586 .footer__link {
     2588.r2b2-options .footer__link {
    25872589    text-decoration: none;
    25882590    color: #78716c
    25892591}
    25902592
    2591 .footer div {
     2593.r2b2-options .footer div {
    25922594    color: #78716c
    25932595}

  • r2b2-monetization/trunk/readme.txt

    r3110442 r3181596  
    55Tested up to: 6.4.3
    66Requires PHP: 7.2
    7 Stable tag: 1.0.3
     7Stable tag: 1.1.1
    88License: GPL-3.0-only
    99

  • r2b2-monetization/trunk/utils.php

    r3109328 r3181596  
    11<?php
    2 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
     2if ( ! defined( 'ABSPATH' ) ) {
     3    exit;
     4} // Exit if accessed directly
    35
    46require_once __DIR__ . '/constants.php';
    57require_once __DIR__ . '/utils.php';
    68require_once __DIR__ . '/options.php';
    7 
    8 function r2b2_get_plugin_version() {
    9     return '1.0.0';
    10 }
    119
    1210function r2b2_placement_html( $script_src, $div_id = null ) {
    … …  
    3028}
    3129
    32 function r2b2_delivery_url( $path ) {
    33     return R2B2_DELIVERY_DOMAIN . 'get/' . $path;
     30function r2b2_delivery_url( $dgpm, $selfpromo = false, $divId = '' ) {
     31    $url = R2B2_DELIVERY_DOMAIN . 'get/';
     32    $url .= join( '/', [
     33            $dgpm['d'],
     34            $dgpm['g'],
     35            $dgpm['p'],
     36        ]
     37    );
     38    if ( $dgpm['m'] ) {
     39        $url .= '/mobile';
     40    }
     41    $params = [];
     42    if ( $selfpromo ) {
     43        $params[] = 'selfpromo=true';
     44    }
     45    if ( $divId ) {
     46        $params[] = 'opt[dom][selector]=%23' . $divId;
     47    }
     48    $url .= '?' . join( '&', $params );
     49
     50    return $url;
    3451}
    3552
    36 function r2b2_enqueue_placement( $placement_path, $track_selfpromo = false ) {
     53function r2b2_enqueue_placement( $dgpm, $track_selfpromo = false ) {
    3754    wp_enqueue_script(
    38         'r2b2-placement-' . str_replace( '/', '-', $placement_path ),
    39         r2b2_delivery_url( $track_selfpromo ? $placement_path . '?selfpromo=true' : $placement_path ),
    40         [], r2b2_get_plugin_version(), [ 'in_footer' => true ]
     55        'r2b2-placement-' . join( '-', $dgpm ),
     56        r2b2_delivery_url( $dgpm, $track_selfpromo ),
     57        [], R2B2_PLUGIN_VERSION, [ 'in_footer' => true ]
    4158    );
     59}
     60
     61function r2b2_get_placement_data() {
     62    $options    = get_option( R2B2_OPTIONS );
     63    $listData   = $options[ R2B2_OPTION_PLACEMENT_LIST_DATA ] ?? '';
     64    $placements = explode( "\n", $listData ) ?? [];
     65    foreach ( $placements as $index => $placement ) {
     66        $placements[ $index ] = json_decode( $placement, true );
     67    }
     68
     69    return $placements;
    4270}
    4371
Note: See TracChangeset for help on using the changeset viewer.