mirror of https://github.com/Budibase/budibase.git
nocodelowcodelow-codedockerdocker-composeinternal-projectinternal-toolinternal-toolslow-code-developmentlow-code-development-platformopensourceselfhostedweb-devweb-developmentweb-development-toolswebdevwebdevelopmentworkflow-automationautomationdeveloper-tools
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
608 lines
34 KiB
608 lines
34 KiB
<!DOCTYPE html><html class="spectrum spectrum--light spectrum--medium" lang="en-US" dir="ltr"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Action Button - Spectrum CSS</title><meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-lightest.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-light.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-dark.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-darkest.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-medium.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/vars/spectrum-large.css"><link rel="stylesheet" type="text/css" href="dependencies/@spectrum-css/icon/index-vars.css"><!-- Include the actual component--><link rel="stylesheet" type="text/css" href="../index-vars.css"><link rel="stylesheet" type="text/css" href="css/site.css"><link rel="stylesheet" type="text/css" href="css/docs.css"><script src="js/loadicons/index.js"></script><script src="js/focus-ring-polyfill/index.js"></script><script src="js/typekit.js"></script><script src="js/SpectrumSwitcher.js"></script><script>loadIcons('dependencies/@spectrum-css/icon/spectrum-css-icons.svg');
|
|
var switcher = new SpectrumSwitcher();
|
|
</script><style type="text/css">body {
|
|
overflow: auto;
|
|
}
|
|
|
|
.spectrum-CSSExample-example {
|
|
border-radius: 0;
|
|
}
|
|
</style></head><body><article class="spectrum-CSSComponent"><header class="spectrum-CSSComponent-heading"><h1 class="spectrum-CSSComponent-title spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif"><a class="spectrum-BigSubtleLink" href="#undefined">Action Button</a></h1><p class="spectrum-CSSComponent-version spectrum-Body spectrum-Body--sizeS">Version 1.0.3</p></header><section class="spectrum-CSSComponent-description spectrum-Body spectrum-Body--sizeL"><ul>
|
|
<li>For Action Buttons that only contain an icon with no label, do not include the element with the <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-ActionButton-label</code> class in the markup</li>
|
|
<li>If an icon and a label are both used, ensure that the element with the <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-ActionButton-label</code> class comes after the <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-Icon</code> element.</li>
|
|
<li>If the hold icon is used, ensure that the element with the <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-ActionButton-hold</code> class comes before the <code class="spectrum-Code spectrum-Code--sizeS">.spectrum-Icon</code> element.</li>
|
|
</ul>
|
|
</section><article class="spectrum-CSSExample"><header><h3 class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">Sizing</h3></header><section class="spectrum-CSSExample-container"><div class="spectrum-CSSExample-example"><div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeS">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle75 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle75" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeL">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle200 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle200" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeXL">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle300 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle300" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div></section></article><article class="spectrum-CSSExample"><header><h3 class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">Standard</h3></header><section class="spectrum-CSSExample-container"><div class="spectrum-CSSExample-example"><div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div></section></article><article class="spectrum-CSSExample"><header><h3 class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">Quiet</h3></header><section class="spectrum-CSSExample-description spectrum-Body spectrum-Body--sizeL"><p>The Quiet Action Button should be used where you previously used the <a href="tool.html" class="spectrum-Link">deprecated Tool component</a>.</p>
|
|
</section><section class="spectrum-CSSExample-container"><div class="spectrum-CSSExample-example"><div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div></section></article><article class="spectrum-CSSExample"><header><h3 class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">Emphasized</h3></header><section class="spectrum-CSSExample-container"><div class="spectrum-CSSExample-example"><div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div></section></article><article class="spectrum-CSSExample"><header><h3 class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">Emphasized (quiet)</h3></header><section class="spectrum-CSSExample-container"><div class="spectrum-CSSExample-example"><div class="spectrum-Examples">
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="spectrum-Examples-item">
|
|
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Disabled</h4>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
<span class="spectrum-ActionButton-label">Edit</span>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
|
|
</svg>
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
|
|
<use xlink:href="#spectrum-icon-18-Edit" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div></section></article></article><div class="spectrum-Underlay" id="spectrum-underlay"></div></body></html>
|