rilwis/meta-box

View on GitHub
css/button-group.css

Summary

Maintainability
Test Coverage
.rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #2271b1);
}

.rwmb-button-input-list .rwmb-button_group {
    display: none;
}
.rwmb-button-input-list label {
    display: block;
    border: 1px solid #8c8f94;
    position: relative;
    z-index: 1;
    padding: 5px 10px;
    background: #fff;
}
.rwmb-button-input-list .selected {
    border-color: var(--color);
    background: var(--color);
    color: #fff;
    z-index: 2;
}

/* Layout not inline */
.rwmb-button-input-list:not(.rwmb-inline) label:not(:first-child) {
     border-top-width: 0;
}
.rwmb-button-input-list:not(.rwmb-inline) .selected:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, .25);
}
.rwmb-button-input-list:not(.rwmb-inline) > label:first-child:not(:last-child) {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.rwmb-button-input-list:not(.rwmb-inline)  > label:last-child:not(:first-child) {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

/*  Layout inline */
.rwmb-button-input-list.rwmb-inline {
    display: flex;
}
.rwmb-button-input-list.rwmb-inline label:not(:first-child) {
    border-left-width: 0;
}
.rwmb-button-input-list.rwmb-inline .selected:not(:last-child) {
    border-right-color: rgba(255, 255, 255, .25);
}
.rwmb-button-input-list.rwmb-inline > label:first-child:not(:last-child) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.rwmb-button-input-list.rwmb-inline > label:last-child:not(:first-child) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/* Admin color schemes */
.admin-color-blue .rwmb-button-input-list  {
    --color: var(--wp-admin-theme-color, #e1a948);
}
.admin-color-coffee .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #c7a589);
}
.admin-color-ectoplasm .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #a3b745);
}
.admin-color-light .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #04a4cc);
}
.admin-color-midnight .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #e14d43);
}
.admin-color-modern .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #3858e9);
}
.admin-color-ocean .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #9ebaa0);
}
.admin-color-sunrise .rwmb-button-input-list {
    --color: var(--wp-admin-theme-color, #dd823b);
}