@adobe/coral-spectrum
Version:
Coral Spectrum is a JavaScript library of Web Components following Spectrum design patterns.
136 lines (119 loc) • 3.52 kB
CSS
/**
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
._coral-SplitButton {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
-ms-flex-direction: row;
flex-direction: row;
vertical-align: top;
}
._coral-SplitButton + ._coral-SplitButton,
._coral-SplitButton + ._coral-Button {
margin-left: 12px;
}
._coral-Button + ._coral-SplitButton {
margin-left: 12px;
}
._coral-SplitButton-action {
margin-left: 0;
border-radius: 16px 0 0 16px;
}
._coral-SplitButton-action._coral-Button--cta {
border-right: 0;
margin-right: 2px;
}
._coral-SplitButton-action + ._coral-SplitButton-trigger {
margin-left: 0;
}
._coral-SplitButton-trigger {
margin-left: 0;
border-radius: 0 16px 16px 0;
border-left-width: 0;
padding-left: 8.00004px;
padding-right: 10px;
min-width: 0;
}
._coral-SplitButton-trigger.focus-ring {
box-shadow: none;
}
._coral-SplitButton-icon {
display: block;
margin-top: 1px;
}
._coral-SplitButton-action,
._coral-SplitButton-trigger {
position: relative;
}
._coral-SplitButton-action:focus, ._coral-SplitButton-trigger:focus {
z-index: 1;
}
._coral-SplitButton-action ._coral-Button-label + ._coral-Icon {
margin-left: 12px;
}
._coral-SplitButton--left ._coral-SplitButton-action {
border-radius: 0 16px 16px 0;
margin-right: 0;
margin-left: 0;
}
._coral-SplitButton--left ._coral-SplitButton-action._coral-Button--cta {
border-left: 0;
margin-left: 2px;
}
._coral-SplitButton--left ._coral-SplitButton-trigger {
margin-right: 0;
border-radius: 16px 0 0 16px;
border-left-width: 2px;
border-right-width: 0;
padding-right: 8.00004px;
padding-left: 10px;
}
.coral--large ._coral-SplitButton + ._coral-SplitButton,
.coral--large ._coral-SplitButton + ._coral-Button {
margin-left: 15px;
}
.coral--large ._coral-Button + ._coral-SplitButton {
margin-left: 15px;
}
.coral--large ._coral-SplitButton-action {
border-radius: 20px 0 0 20px;
}
.coral--large ._coral-SplitButton-action._coral-Button--cta {
margin-right: 2px;
}
.coral--large ._coral-SplitButton-action + ._coral-SplitButton-trigger {
margin-left: 0;
}
.coral--large ._coral-SplitButton-trigger {
border-radius: 0 20px 20px 0;
border-left-width: 0;
padding-left: 10.00005px;
padding-right: 13px;
min-width: 0;
}
.coral--large ._coral-SplitButton-action ._coral-Button-label + ._coral-Icon {
margin-left: 15px;
}
.coral--large ._coral-SplitButton--left ._coral-SplitButton-action {
border-radius: 0 20px 20px 0;
margin-left: 0;
}
.coral--large ._coral-SplitButton--left ._coral-SplitButton-action._coral-Button--cta {
margin-left: 2px;
}
.coral--large ._coral-SplitButton--left ._coral-SplitButton-trigger {
border-radius: 20px 0 0 20px;
border-left-width: 2px;
border-right-width: 0;
padding-right: 10.00005px;
padding-left: 13px;
}