budibase/packages/standard-components/node_modules/@spectrum-css/icon/ui-icons.css

552 lines
14 KiB
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.
*/
/* Hide UI icons on older browsers with SVG 1.1 implementations */
.spectrum--medium {
.spectrum-UIIcon--large {
display: none;
}
.spectrum-UIIcon--medium {
display: inline;
}
}
.spectrum--large {
.spectrum-UIIcon--medium {
display: none;
}
.spectrum-UIIcon--large {
display: inline;
}
}
/* Hide UI icons on browsers that implement SVG 2 correctly (Firefox 56+) */
.spectrum--large {
x--ui-icon-large-display: block;
x--ui-icon-medium-display: none;
}
.spectrum--medium {
x--ui-icon-medium-display: block;
x--ui-icon-large-display: none;
}
.spectrum-UIIcon--large {
display: xvar(--ui-icon-large-display);
}
.spectrum-UIIcon--medium {
display: xvar(--ui-icon-medium-display);
}
%spectrum-UIIcon--rotation90 {
transform: rotate(90deg);
}
%spectrum-UIIcon--rotation180 {
transform: rotate(180deg);
}
%spectrum-UIIcon--rotation270 {
transform: rotate(270deg);
}
%spectrum-UIIcon-Chevron75 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-75);
block-size: var(--spectrum-alias-ui-icon-chevron-size-75);
}
%spectrum-UIIcon-Chevron100 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-100);
block-size: var(--spectrum-alias-ui-icon-chevron-size-100);
}
%spectrum-UIIcon-Chevron200 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-200);
block-size: var(--spectrum-alias-ui-icon-chevron-size-200);
}
%spectrum-UIIcon-Chevron300 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-300);
block-size: var(--spectrum-alias-ui-icon-chevron-size-300);
}
%spectrum-UIIcon-Chevron400 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-400);
block-size: var(--spectrum-alias-ui-icon-chevron-size-400);
}
%spectrum-UIIcon-Chevron500 {
inline-size: var(--spectrum-alias-ui-icon-chevron-size-500);
block-size: var(--spectrum-alias-ui-icon-chevron-size-500);
}
%spectrum-UIIcon-Arrow75 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-75);
block-size: var(--spectrum-alias-ui-icon-arrow-size-75);
}
%spectrum-UIIcon-Arrow100 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-100);
block-size: var(--spectrum-alias-ui-icon-arrow-size-100);
}
%spectrum-UIIcon-Arrow200 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-200);
block-size: var(--spectrum-alias-ui-icon-arrow-size-200);
}
%spectrum-UIIcon-Arrow300 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-300);
block-size: var(--spectrum-alias-ui-icon-arrow-size-300);
}
%spectrum-UIIcon-Arrow400 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-400);
block-size: var(--spectrum-alias-ui-icon-arrow-size-400);
}
%spectrum-UIIcon-Arrow500 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-500);
block-size: var(--spectrum-alias-ui-icon-arrow-size-500);
}
%spectrum-UIIcon-Arrow600 {
inline-size: var(--spectrum-alias-ui-icon-arrow-size-600);
block-size: var(--spectrum-alias-ui-icon-arrow-size-600);
}
/* Chevron */
.spectrum-UIIcon-ChevronRight75 {
@inherit: %spectrum-UIIcon-Chevron75;
}
.spectrum-UIIcon-ChevronRight100 {
@inherit: %spectrum-UIIcon-Chevron100;
}
.spectrum-UIIcon-ChevronRight200 {
@inherit: %spectrum-UIIcon-Chevron200;
}
.spectrum-UIIcon-ChevronRight300 {
@inherit: %spectrum-UIIcon-Chevron300;
}
.spectrum-UIIcon-ChevronRight400 {
@inherit: %spectrum-UIIcon-Chevron400;
}
.spectrum-UIIcon-ChevronRight500 {
@inherit: %spectrum-UIIcon-Chevron500;
}
.spectrum-UIIcon-ChevronDown75 {
@inherit: %spectrum-UIIcon-Chevron75;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronDown100 {
@inherit: %spectrum-UIIcon-Chevron100;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronDown200 {
@inherit: %spectrum-UIIcon-Chevron200;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronDown300 {
@inherit: %spectrum-UIIcon-Chevron300;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronDown400 {
@inherit: %spectrum-UIIcon-Chevron400;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronDown500 {
@inherit: %spectrum-UIIcon-Chevron500;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ChevronLeft75 {
@inherit: %spectrum-UIIcon-Chevron75;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronLeft100 {
@inherit: %spectrum-UIIcon-Chevron100;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronLeft200 {
@inherit: %spectrum-UIIcon-Chevron200;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronLeft300 {
@inherit: %spectrum-UIIcon-Chevron300;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronLeft400 {
@inherit: %spectrum-UIIcon-Chevron400;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronLeft500 {
@inherit: %spectrum-UIIcon-Chevron500;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ChevronUp75 {
@inherit: %spectrum-UIIcon-Chevron75;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ChevronUp100 {
@inherit: %spectrum-UIIcon-Chevron100;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ChevronUp200 {
@inherit: %spectrum-UIIcon-Chevron200;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ChevronUp300 {
@inherit: %spectrum-UIIcon-Chevron300;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ChevronUp400 {
@inherit: %spectrum-UIIcon-Chevron400;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ChevronUp500 {
@inherit: %spectrum-UIIcon-Chevron500;
@inherit: %spectrum-UIIcon--rotation270;
}
/* Arrow */
.spectrum-UIIcon-ArrowRight75 {
@inherit: %spectrum-UIIcon-Arrow75;
}
.spectrum-UIIcon-ArrowRight100 {
@inherit: %spectrum-UIIcon-Arrow100;
}
.spectrum-UIIcon-ArrowRight200 {
@inherit: %spectrum-UIIcon-Arrow200;
}
.spectrum-UIIcon-ArrowRight300 {
@inherit: %spectrum-UIIcon-Arrow300;
}
.spectrum-UIIcon-ArrowRight400 {
@inherit: %spectrum-UIIcon-Arrow400;
}
.spectrum-UIIcon-ArrowRight500 {
@inherit: %spectrum-UIIcon-Arrow500;
}
.spectrum-UIIcon-ArrowRight600 {
@inherit: %spectrum-UIIcon-Arrow600;
}
.spectrum-UIIcon-ArrowDown75 {
@inherit: %spectrum-UIIcon-Arrow75;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown100 {
@inherit: %spectrum-UIIcon-Arrow100;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown200 {
@inherit: %spectrum-UIIcon-Arrow200;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown300 {
@inherit: %spectrum-UIIcon-Arrow300;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown400 {
@inherit: %spectrum-UIIcon-Arrow400;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown500 {
@inherit: %spectrum-UIIcon-Arrow500;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowDown600 {
@inherit: %spectrum-UIIcon-Arrow600;
@inherit: %spectrum-UIIcon--rotation90;
}
.spectrum-UIIcon-ArrowLeft75 {
@inherit: %spectrum-UIIcon-Arrow75;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft100 {
@inherit: %spectrum-UIIcon-Arrow100;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft200 {
@inherit: %spectrum-UIIcon-Arrow200;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft300 {
@inherit: %spectrum-UIIcon-Arrow300;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft400 {
@inherit: %spectrum-UIIcon-Arrow400;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft500 {
@inherit: %spectrum-UIIcon-Arrow500;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowLeft600 {
@inherit: %spectrum-UIIcon-Arrow600;
@inherit: %spectrum-UIIcon--rotation180;
}
.spectrum-UIIcon-ArrowUp75 {
@inherit: %spectrum-UIIcon-Arrow75;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp100 {
@inherit: %spectrum-UIIcon-Arrow100;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp200 {
@inherit: %spectrum-UIIcon-Arrow200;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp300 {
@inherit: %spectrum-UIIcon-Arrow300;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp400 {
@inherit: %spectrum-UIIcon-Arrow400;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp500 {
@inherit: %spectrum-UIIcon-Arrow500;
@inherit: %spectrum-UIIcon--rotation270;
}
.spectrum-UIIcon-ArrowUp600 {
@inherit: %spectrum-UIIcon-Arrow600;
@inherit: %spectrum-UIIcon--rotation270;
}
/* Checkmark */
.spectrum-UIIcon-Checkmark50 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-50);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-50);
}
.spectrum-UIIcon-Checkmark75 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-75);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-75);
}
.spectrum-UIIcon-Checkmark100 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-100);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-100);
}
.spectrum-UIIcon-Checkmark200 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-200);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-200);
}
.spectrum-UIIcon-Checkmark300 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-300);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-300);
}
.spectrum-UIIcon-Checkmark400 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-400);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-400);
}
.spectrum-UIIcon-Checkmark500 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-500);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-500);
}
.spectrum-UIIcon-Checkmark600 {
inline-size: var(--spectrum-alias-ui-icon-checkmark-size-600);
block-size: var(--spectrum-alias-ui-icon-checkmark-size-600);
}
/* Dash */
.spectrum-UIIcon-Dash50 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-50);
block-size: var(--spectrum-alias-ui-icon-dash-size-50);
}
.spectrum-UIIcon-Dash75 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-75);
block-size: var(--spectrum-alias-ui-icon-dash-size-75);
}
.spectrum-UIIcon-Dash100 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-100);
block-size: var(--spectrum-alias-ui-icon-dash-size-100);
}
.spectrum-UIIcon-Dash200 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-200);
block-size: var(--spectrum-alias-ui-icon-dash-size-200);
}
.spectrum-UIIcon-Dash300 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-300);
block-size: var(--spectrum-alias-ui-icon-dash-size-300);
}
.spectrum-UIIcon-Dash400 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-400);
block-size: var(--spectrum-alias-ui-icon-dash-size-400);
}
.spectrum-UIIcon-Dash500 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-500);
block-size: var(--spectrum-alias-ui-icon-dash-size-500);
}
.spectrum-UIIcon-Dash600 {
inline-size: var(--spectrum-alias-ui-icon-dash-size-600);
block-size: var(--spectrum-alias-ui-icon-dash-size-600);
}
/* Cross */
.spectrum-UIIcon-Cross75 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-75);
block-size: var(--spectrum-alias-ui-icon-cross-size-75);
}
.spectrum-UIIcon-Cross100 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-100);
block-size: var(--spectrum-alias-ui-icon-cross-size-100);
}
.spectrum-UIIcon-Cross200 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-200);
block-size: var(--spectrum-alias-ui-icon-cross-size-200);
}
.spectrum-UIIcon-Cross300 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-300);
block-size: var(--spectrum-alias-ui-icon-cross-size-300);
}
.spectrum-UIIcon-Cross400 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-400);
block-size: var(--spectrum-alias-ui-icon-cross-size-400);
}
.spectrum-UIIcon-Cross500 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-500);
block-size: var(--spectrum-alias-ui-icon-cross-size-500);
}
.spectrum-UIIcon-Cross600 {
inline-size: var(--spectrum-alias-ui-icon-cross-size-600);
block-size: var(--spectrum-alias-ui-icon-cross-size-600);
}
/* Triple Gripper */
.spectrum-UIIcon-TripleGripper100 {
inline-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-height);
block-size: var(--spectrum-alias-ui-icon-triplegripper-size-100-width);
}
/* Double Gripper */
.spectrum-UIIcon-DoubleGripper100 {
inline-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-height);
block-size: var(--spectrum-alias-ui-icon-doublegripper-size-100-width);
}
/* Single Gripper */
.spectrum-UIIcon-SingleGripper100 {
inline-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-height);
block-size: var(--spectrum-alias-ui-icon-singlegripper-size-100-width);
}
/* Corner Triangle */
.spectrum-UIIcon-CornerTriangle75 {
inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-75);
}
.spectrum-UIIcon-CornerTriangle100 {
inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-100);
}
.spectrum-UIIcon-CornerTriangle200 {
inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-200);
}
.spectrum-UIIcon-CornerTriangle300 {
inline-size: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
block-size: var(--spectrum-alias-ui-icon-cornertriangle-size-300);
}
/* Asterisk */
.spectrum-UIIcon-Asterisk75 {
inline-size: var(--spectrum-alias-ui-icon-asterisk-size-75);
block-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
}
.spectrum-UIIcon-Asterisk100 {
inline-size: var(--spectrum-alias-ui-icon-asterisk-size-100);
block-size: var(--spectrum-alias-ui-icon-asterisk-size-100);
}
.spectrum-UIIcon-Asterisk200 {
inline-size: var(--spectrum-alias-ui-icon-asterisk-size-200);
block-size: var(--spectrum-alias-ui-icon-asterisk-size-200);
}
.spectrum-UIIcon-Asterisk300 {
inline-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
block-size: var(--spectrum-alias-ui-icon-asterisk-size-300);
}