mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rework sass vars to custom properties (wip)
This commit is contained in:
Cory LaViska
@@ -1,6 +1,6 @@
|
||||
# Shoelace 2
|
||||
# Shoelace
|
||||
|
||||
A framework agnostic library of Web Components for desktop and mobile.
|
||||
A forward-thinking component library built with Web Components.
|
||||
|
||||
Designed and developed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
|
||||
|
||||
|
||||
3
package-lock.json
generated
3
package-lock.json
generated
@@ -92,8 +92,7 @@
|
||||
"@stencil/sass": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-1.1.1.tgz",
|
||||
"integrity": "sha512-Nny3JiFkpQa0RdXWCa4pzhKQYnHuDNzC9c4w35FcaZHXBVuZ1UHSHc7wI7By9SS1auYcySqpPOBVzgoCqXcYVQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-Nny3JiFkpQa0RdXWCa4pzhKQYnHuDNzC9c4w35FcaZHXBVuZ1UHSHc7wI7By9SS1auYcySqpPOBVzgoCqXcYVQ=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "10.17.13",
|
||||
|
||||
@@ -23,7 +23,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@stencil/core": "^1.8.3",
|
||||
"@stencil/sass": "^1.1.1",
|
||||
"tslint": "^5.20.1",
|
||||
"tslint-ionic-rules": "0.0.21",
|
||||
"tslint-stencil": "^1.0.1",
|
||||
@@ -31,6 +30,7 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@stencil/sass": "^1.1.1",
|
||||
"popper.js": "^1.16.0",
|
||||
"tippy.js": "^5.1.3"
|
||||
}
|
||||
|
||||
233
src/assets/themes/default.theme.css
Normal file
233
src/assets/themes/default.theme.css
Normal file
@@ -0,0 +1,233 @@
|
||||
:root {
|
||||
/*********************************************************************************************************************
|
||||
*
|
||||
* 👟 Shoelace: A forward-thinking component library built with Web Components.
|
||||
*
|
||||
* Designed and developed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
|
||||
*
|
||||
* Learn more at https://shoelace.style/
|
||||
*
|
||||
*********************************************************************************************************************/
|
||||
|
||||
/*********************************************************************************************************************
|
||||
* Colors
|
||||
*********************************************************************************************************************/
|
||||
|
||||
--color-primary-hue: 203;
|
||||
--color-primary-saturation: 100%;
|
||||
--color-primary-05: hsl(var(--color-primary-hue), var(--color-primary-saturation), 5%);
|
||||
--color-primary-10: hsl(var(--color-primary-hue), var(--color-primary-saturation), 10%);
|
||||
--color-primary-15: hsl(var(--color-primary-hue), var(--color-primary-saturation), 15%);
|
||||
--color-primary-20: hsl(var(--color-primary-hue), var(--color-primary-saturation), 20%);
|
||||
--color-primary-25: hsl(var(--color-primary-hue), var(--color-primary-saturation), 25%);
|
||||
--color-primary-30: hsl(var(--color-primary-hue), var(--color-primary-saturation), 30%);
|
||||
--color-primary-35: hsl(var(--color-primary-hue), var(--color-primary-saturation), 35%);
|
||||
--color-primary-40: hsl(var(--color-primary-hue), var(--color-primary-saturation), 40%);
|
||||
--color-primary-45: hsl(var(--color-primary-hue), var(--color-primary-saturation), 45%);
|
||||
--color-primary-50: hsl(var(--color-primary-hue), var(--color-primary-saturation), 50%);
|
||||
--color-primary-55: hsl(var(--color-primary-hue), var(--color-primary-saturation), 55%);
|
||||
--color-primary-60: hsl(var(--color-primary-hue), var(--color-primary-saturation), 60%);
|
||||
--color-primary-65: hsl(var(--color-primary-hue), var(--color-primary-saturation), 65%);
|
||||
--color-primary-70: hsl(var(--color-primary-hue), var(--color-primary-saturation), 70%);
|
||||
--color-primary-75: hsl(var(--color-primary-hue), var(--color-primary-saturation), 75%);
|
||||
--color-primary-80: hsl(var(--color-primary-hue), var(--color-primary-saturation), 80%);
|
||||
--color-primary-85: hsl(var(--color-primary-hue), var(--color-primary-saturation), 85%);
|
||||
--color-primary-90: hsl(var(--color-primary-hue), var(--color-primary-saturation), 90%);
|
||||
--color-primary-95: hsl(var(--color-primary-hue), var(--color-primary-saturation), 95%);
|
||||
|
||||
--color-success-hue: 100;
|
||||
--color-success-saturation: 60%;
|
||||
--color-success-05: hsl(var(--color-success-hue), var(--color-success-saturation), 5%);
|
||||
--color-success-10: hsl(var(--color-success-hue), var(--color-success-saturation), 10%);
|
||||
--color-success-15: hsl(var(--color-success-hue), var(--color-success-saturation), 15%);
|
||||
--color-success-20: hsl(var(--color-success-hue), var(--color-success-saturation), 20%);
|
||||
--color-success-25: hsl(var(--color-success-hue), var(--color-success-saturation), 25%);
|
||||
--color-success-30: hsl(var(--color-success-hue), var(--color-success-saturation), 30%);
|
||||
--color-success-35: hsl(var(--color-success-hue), var(--color-success-saturation), 35%);
|
||||
--color-success-40: hsl(var(--color-success-hue), var(--color-success-saturation), 40%);
|
||||
--color-success-45: hsl(var(--color-success-hue), var(--color-success-saturation), 45%);
|
||||
--color-success-50: hsl(var(--color-success-hue), var(--color-success-saturation), 50%);
|
||||
--color-success-55: hsl(var(--color-success-hue), var(--color-success-saturation), 55%);
|
||||
--color-success-60: hsl(var(--color-success-hue), var(--color-success-saturation), 60%);
|
||||
--color-success-65: hsl(var(--color-success-hue), var(--color-success-saturation), 65%);
|
||||
--color-success-70: hsl(var(--color-success-hue), var(--color-success-saturation), 70%);
|
||||
--color-success-75: hsl(var(--color-success-hue), var(--color-success-saturation), 75%);
|
||||
--color-success-80: hsl(var(--color-success-hue), var(--color-success-saturation), 80%);
|
||||
--color-success-85: hsl(var(--color-success-hue), var(--color-success-saturation), 85%);
|
||||
--color-success-90: hsl(var(--color-success-hue), var(--color-success-saturation), 90%);
|
||||
--color-success-95: hsl(var(--color-success-hue), var(--color-success-saturation), 95%);
|
||||
|
||||
--color-info-hue: 220;
|
||||
--color-info-saturation: 10%;
|
||||
--color-info-05: hsl(var(--color-info-hue), var(--color-info-saturation), 5%);
|
||||
--color-info-10: hsl(var(--color-info-hue), var(--color-info-saturation), 10%);
|
||||
--color-info-15: hsl(var(--color-info-hue), var(--color-info-saturation), 15%);
|
||||
--color-info-20: hsl(var(--color-info-hue), var(--color-info-saturation), 20%);
|
||||
--color-info-25: hsl(var(--color-info-hue), var(--color-info-saturation), 25%);
|
||||
--color-info-30: hsl(var(--color-info-hue), var(--color-info-saturation), 30%);
|
||||
--color-info-35: hsl(var(--color-info-hue), var(--color-info-saturation), 35%);
|
||||
--color-info-40: hsl(var(--color-info-hue), var(--color-info-saturation), 40%);
|
||||
--color-info-45: hsl(var(--color-info-hue), var(--color-info-saturation), 45%);
|
||||
--color-info-50: hsl(var(--color-info-hue), var(--color-info-saturation), 50%);
|
||||
--color-info-55: hsl(var(--color-info-hue), var(--color-info-saturation), 55%);
|
||||
--color-info-60: hsl(var(--color-info-hue), var(--color-info-saturation), 60%);
|
||||
--color-info-65: hsl(var(--color-info-hue), var(--color-info-saturation), 65%);
|
||||
--color-info-70: hsl(var(--color-info-hue), var(--color-info-saturation), 70%);
|
||||
--color-info-75: hsl(var(--color-info-hue), var(--color-info-saturation), 75%);
|
||||
--color-info-80: hsl(var(--color-info-hue), var(--color-info-saturation), 80%);
|
||||
--color-info-85: hsl(var(--color-info-hue), var(--color-info-saturation), 85%);
|
||||
--color-info-90: hsl(var(--color-info-hue), var(--color-info-saturation), 90%);
|
||||
--color-info-95: hsl(var(--color-info-hue), var(--color-info-saturation), 95%);
|
||||
|
||||
--color-warning-hue: 36;
|
||||
--color-warning-saturation: 90%;
|
||||
--color-warning-05: hsl(var(--color-warning-hue), var(--color-warning-saturation), 5%);
|
||||
--color-warning-10: hsl(var(--color-warning-hue), var(--color-warning-saturation), 10%);
|
||||
--color-warning-15: hsl(var(--color-warning-hue), var(--color-warning-saturation), 15%);
|
||||
--color-warning-20: hsl(var(--color-warning-hue), var(--color-warning-saturation), 20%);
|
||||
--color-warning-25: hsl(var(--color-warning-hue), var(--color-warning-saturation), 25%);
|
||||
--color-warning-30: hsl(var(--color-warning-hue), var(--color-warning-saturation), 30%);
|
||||
--color-warning-35: hsl(var(--color-warning-hue), var(--color-warning-saturation), 35%);
|
||||
--color-warning-40: hsl(var(--color-warning-hue), var(--color-warning-saturation), 40%);
|
||||
--color-warning-45: hsl(var(--color-warning-hue), var(--color-warning-saturation), 45%);
|
||||
--color-warning-50: hsl(var(--color-warning-hue), var(--color-warning-saturation), 50%);
|
||||
--color-warning-55: hsl(var(--color-warning-hue), var(--color-warning-saturation), 55%);
|
||||
--color-warning-60: hsl(var(--color-warning-hue), var(--color-warning-saturation), 60%);
|
||||
--color-warning-65: hsl(var(--color-warning-hue), var(--color-warning-saturation), 65%);
|
||||
--color-warning-70: hsl(var(--color-warning-hue), var(--color-warning-saturation), 70%);
|
||||
--color-warning-75: hsl(var(--color-warning-hue), var(--color-warning-saturation), 75%);
|
||||
--color-warning-80: hsl(var(--color-warning-hue), var(--color-warning-saturation), 80%);
|
||||
--color-warning-85: hsl(var(--color-warning-hue), var(--color-warning-saturation), 85%);
|
||||
--color-warning-90: hsl(var(--color-warning-hue), var(--color-warning-saturation), 90%);
|
||||
--color-warning-95: hsl(var(--color-warning-hue), var(--color-warning-saturation), 95%);
|
||||
|
||||
--color-danger-hue: 0;
|
||||
--color-danger-saturation: 90%;
|
||||
--color-danger-05: hsl(var(--color-danger-hue), var(--color-danger-saturation), 5%);
|
||||
--color-danger-10: hsl(var(--color-danger-hue), var(--color-danger-saturation), 10%);
|
||||
--color-danger-15: hsl(var(--color-danger-hue), var(--color-danger-saturation), 15%);
|
||||
--color-danger-20: hsl(var(--color-danger-hue), var(--color-danger-saturation), 20%);
|
||||
--color-danger-25: hsl(var(--color-danger-hue), var(--color-danger-saturation), 25%);
|
||||
--color-danger-30: hsl(var(--color-danger-hue), var(--color-danger-saturation), 30%);
|
||||
--color-danger-35: hsl(var(--color-danger-hue), var(--color-danger-saturation), 35%);
|
||||
--color-danger-40: hsl(var(--color-danger-hue), var(--color-danger-saturation), 40%);
|
||||
--color-danger-45: hsl(var(--color-danger-hue), var(--color-danger-saturation), 45%);
|
||||
--color-danger-50: hsl(var(--color-danger-hue), var(--color-danger-saturation), 50%);
|
||||
--color-danger-55: hsl(var(--color-danger-hue), var(--color-danger-saturation), 55%);
|
||||
--color-danger-60: hsl(var(--color-danger-hue), var(--color-danger-saturation), 60%);
|
||||
--color-danger-65: hsl(var(--color-danger-hue), var(--color-danger-saturation), 65%);
|
||||
--color-danger-70: hsl(var(--color-danger-hue), var(--color-danger-saturation), 70%);
|
||||
--color-danger-75: hsl(var(--color-danger-hue), var(--color-danger-saturation), 75%);
|
||||
--color-danger-80: hsl(var(--color-danger-hue), var(--color-danger-saturation), 80%);
|
||||
--color-danger-85: hsl(var(--color-danger-hue), var(--color-danger-saturation), 85%);
|
||||
--color-danger-90: hsl(var(--color-danger-hue), var(--color-danger-saturation), 90%);
|
||||
--color-danger-95: hsl(var(--color-danger-hue), var(--color-danger-saturation), 95%);
|
||||
|
||||
--color-gray-hue: var(--color-primary-hue);
|
||||
--color-gray-saturation: 20%;
|
||||
--color-gray-05: hsl(var(--color-gray-hue), var(--color-gray-saturation), 5%);
|
||||
--color-gray-10: hsl(var(--color-gray-hue), var(--color-gray-saturation), 10%);
|
||||
--color-gray-15: hsl(var(--color-gray-hue), var(--color-gray-saturation), 15%);
|
||||
--color-gray-20: hsl(var(--color-gray-hue), var(--color-gray-saturation), 20%);
|
||||
--color-gray-25: hsl(var(--color-gray-hue), var(--color-gray-saturation), 25%);
|
||||
--color-gray-30: hsl(var(--color-gray-hue), var(--color-gray-saturation), 30%);
|
||||
--color-gray-35: hsl(var(--color-gray-hue), var(--color-gray-saturation), 35%);
|
||||
--color-gray-40: hsl(var(--color-gray-hue), var(--color-gray-saturation), 40%);
|
||||
--color-gray-45: hsl(var(--color-gray-hue), var(--color-gray-saturation), 45%);
|
||||
--color-gray-50: hsl(var(--color-gray-hue), var(--color-gray-saturation), 50%);
|
||||
--color-gray-55: hsl(var(--color-gray-hue), var(--color-gray-saturation), 55%);
|
||||
--color-gray-60: hsl(var(--color-gray-hue), var(--color-gray-saturation), 60%);
|
||||
--color-gray-65: hsl(var(--color-gray-hue), var(--color-gray-saturation), 65%);
|
||||
--color-gray-70: hsl(var(--color-gray-hue), var(--color-gray-saturation), 70%);
|
||||
--color-gray-75: hsl(var(--color-gray-hue), var(--color-gray-saturation), 75%);
|
||||
--color-gray-80: hsl(var(--color-gray-hue), var(--color-gray-saturation), 80%);
|
||||
--color-gray-85: hsl(var(--color-gray-hue), var(--color-gray-saturation), 85%);
|
||||
--color-gray-90: hsl(var(--color-gray-hue), var(--color-gray-saturation), 90%);
|
||||
--color-gray-95: hsl(var(--color-gray-hue), var(--color-gray-saturation), 95%);
|
||||
|
||||
/*********************************************************************************************************************
|
||||
* Fonts
|
||||
*********************************************************************************************************************/
|
||||
|
||||
--font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
--font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
|
||||
--font-monospace: Menlo, Monaco, 'Courier New', monospace;
|
||||
--font-weight--light: 300;
|
||||
--font-weight--normal: 400;
|
||||
--font-weight--bold: 500;
|
||||
|
||||
/*********************************************************************************************************************
|
||||
* Typography
|
||||
*********************************************************************************************************************/
|
||||
|
||||
--text-color-primary: var(--color-gray-20);
|
||||
--text-color-secondary: var(--color-gray-60);
|
||||
|
||||
--text-size-default: 16px;
|
||||
|
||||
/*********************************************************************************************************************
|
||||
* Form controls
|
||||
*********************************************************************************************************************/
|
||||
|
||||
--form-control-font-family: var(--font-sans-serif);
|
||||
--form-control-font-weight: var(--font-weight--normal);
|
||||
--form-control-font-size--small: 12px;
|
||||
--form-control-font-size--medium: 14px;
|
||||
--form-control-font-size--large: 16px;
|
||||
--form-control-color: var(--color-gray-40);
|
||||
--form-control-placeholder-color: var(--color-gray-70);
|
||||
|
||||
--form-control-height--small: 32px;
|
||||
--form-control-height--medium: 38px;
|
||||
--form-control-height--large: 44px;
|
||||
|
||||
--form-control-border-width: 1px;
|
||||
--form-control-border-color: var(--color-gray-80);
|
||||
--form-control-border-color--hover: var(--color-gray-80);
|
||||
--form-control-border-color--focus: var(--color-primary-50);
|
||||
--form-control-border-color--disabled: var(--color-gray-80);
|
||||
|
||||
--form-control-border-radius--small: 4px;
|
||||
--form-control-border-radius--medium: 4px;
|
||||
--form-control-border-radius--large: 4px;
|
||||
|
||||
--form-control-background-color: white;
|
||||
--form-control-background-color--hover: white;
|
||||
--form-control-background-color--focus: white;
|
||||
--form-control-background-color-disabled: var(--color-gray-90);
|
||||
|
||||
--form-control-transition-speed: 150ms;
|
||||
|
||||
--focus-ring-width: 2px;
|
||||
--focus-ring-alpha: 33%;
|
||||
|
||||
/*********************************************************************************************************************
|
||||
* Menus (dropdown, select, popover, et al)
|
||||
*********************************************************************************************************************/
|
||||
|
||||
--menu-font-family: var(--font-sans-serif);
|
||||
--menu-font-weight: var(--font-weight--normal);
|
||||
--menu-font-size: var(--text-size-default);
|
||||
|
||||
--menu-border-color: var(--color-gray-95);
|
||||
--menu-background-color: white;
|
||||
--menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--menu-transition-speed: 150ms;
|
||||
|
||||
--menu-item-color: var(--color-gray-40);
|
||||
--menu-item-color--active: var(--color-primary-50);
|
||||
--menu-item-color--disabled: var(--color-gray-70);
|
||||
|
||||
--menu-item-background-color: white;
|
||||
--menu-item-background-color--active: var(--color-primary-95);
|
||||
--menu-item-background-color--disabled: white;
|
||||
|
||||
--menu-item-transition-speed: 150ms;
|
||||
|
||||
--menu-divider-border-color: var(--color-gray-90);
|
||||
|
||||
--menu-padding-x: 30px;
|
||||
--menu-padding-y: 10px;
|
||||
}
|
||||
713
src/components.d.ts
vendored
713
src/components.d.ts
vendored
@@ -56,36 +56,6 @@ export namespace Components {
|
||||
*/
|
||||
'type': string;
|
||||
}
|
||||
interface SlCheckbox {
|
||||
/**
|
||||
* Set to true to draw the checkbox in a checked state.
|
||||
*/
|
||||
'checked': boolean;
|
||||
/**
|
||||
* Set to true to disable the checkbox.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* Set to true to draw the checkbox in an indeterminate state.
|
||||
*/
|
||||
'indeterminate': boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* Removes focus from the checkbox.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* Sets focus on the checkbox.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlDropdown {
|
||||
'close': () => Promise<void>;
|
||||
'open': () => Promise<void>;
|
||||
@@ -109,327 +79,12 @@ export namespace Components {
|
||||
*/
|
||||
'disabled': boolean;
|
||||
}
|
||||
interface SlInput {
|
||||
/**
|
||||
* The input's autocaptialize attribute.
|
||||
*/
|
||||
'autocapitalize': string;
|
||||
/**
|
||||
* The input's autocomplete attribute.
|
||||
*/
|
||||
'autocomplete': string;
|
||||
/**
|
||||
* The input's autocorrect attribute.
|
||||
*/
|
||||
'autocorrect': string;
|
||||
/**
|
||||
* The input's autofocus attribute.
|
||||
*/
|
||||
'autofocus': boolean;
|
||||
/**
|
||||
* Set to true to add a clear button when the input is populated.
|
||||
*/
|
||||
'clearable': boolean;
|
||||
/**
|
||||
* Set to true to disable the input.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* The input's inputmode attribute.
|
||||
*/
|
||||
'inputmode': string;
|
||||
/**
|
||||
* The input's max attribute.
|
||||
*/
|
||||
'max': number;
|
||||
/**
|
||||
* The input's maxlength attribute.
|
||||
*/
|
||||
'maxlength': number;
|
||||
/**
|
||||
* The input's min attribute.
|
||||
*/
|
||||
'min': number;
|
||||
/**
|
||||
* The input's minlength attribute.
|
||||
*/
|
||||
'minlength': number;
|
||||
/**
|
||||
* The input's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* The input's pattern attribute.
|
||||
*/
|
||||
'pattern': string;
|
||||
/**
|
||||
* The input's placeholder text.
|
||||
*/
|
||||
'placeholder': string;
|
||||
/**
|
||||
* Set to true for a readonly input.
|
||||
*/
|
||||
'readonly': boolean;
|
||||
/**
|
||||
* Removes focus from the input.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* The input's required attribute.
|
||||
*/
|
||||
'required': boolean;
|
||||
/**
|
||||
* Sets focus on the input.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The input's size, one of `small`, `medium`, or `large`.
|
||||
*/
|
||||
'size': string;
|
||||
/**
|
||||
* The input's step attribute.
|
||||
*/
|
||||
'step': number;
|
||||
/**
|
||||
* The input's type, one of `text`, `number`, `email`, etc.
|
||||
*/
|
||||
'type': string;
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlRadio {
|
||||
/**
|
||||
* Set to true to draw the radio in a checked state.
|
||||
*/
|
||||
'checked': boolean;
|
||||
/**
|
||||
* Set to true to disable the radio.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* Removes focus from the radio.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* Sets focus on the radio.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlRange {
|
||||
/**
|
||||
* Set to true to disable the input.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* The input's max attribute.
|
||||
*/
|
||||
'max': number;
|
||||
/**
|
||||
* The input's min attribute.
|
||||
*/
|
||||
'min': number;
|
||||
/**
|
||||
* The input's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* Removes focus from the input.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* Sets focus on the input.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The input's step attribute.
|
||||
*/
|
||||
'step': number | 'any';
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlSpinner {
|
||||
/**
|
||||
* The spinner's size.
|
||||
*/
|
||||
'size': string;
|
||||
}
|
||||
interface SlSwitch {
|
||||
/**
|
||||
* Set to true to draw the switch in a checked state.
|
||||
*/
|
||||
'checked': boolean;
|
||||
/**
|
||||
* Set to true to disable the switch.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* Removes focus from the switch.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* Sets focus on the switch.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlTextarea {
|
||||
/**
|
||||
* The textarea's autocaptialize attribute.
|
||||
*/
|
||||
'autocapitalize': string;
|
||||
/**
|
||||
* The textarea's autocomplete attribute.
|
||||
*/
|
||||
'autocomplete': string;
|
||||
/**
|
||||
* The textarea's autocorrect attribute.
|
||||
*/
|
||||
'autocorrect': string;
|
||||
/**
|
||||
* The textarea's autofocus attribute.
|
||||
*/
|
||||
'autofocus': boolean;
|
||||
/**
|
||||
* Set to true to disable the textarea.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* The textarea's inputmode attribute.
|
||||
*/
|
||||
'inputmode': string;
|
||||
/**
|
||||
* The textarea's maxlength attribute.
|
||||
*/
|
||||
'maxlength': number;
|
||||
/**
|
||||
* The textarea's name attribute.
|
||||
*/
|
||||
'name': string;
|
||||
/**
|
||||
* The textarea's placeholder text.
|
||||
*/
|
||||
'placeholder': string;
|
||||
/**
|
||||
* Set to true for a readonly textarea.
|
||||
*/
|
||||
'readonly': boolean;
|
||||
/**
|
||||
* Removes focus fromt the textarea.
|
||||
*/
|
||||
'removeFocus': () => Promise<void>;
|
||||
/**
|
||||
* The textarea's required attribute.
|
||||
*/
|
||||
'required': boolean;
|
||||
/**
|
||||
* Controls how the textarea can be resized.
|
||||
*/
|
||||
'resize': 'none' | 'vertical' | 'auto';
|
||||
/**
|
||||
* The number of rows to display by default.
|
||||
*/
|
||||
'rows': number;
|
||||
/**
|
||||
* Sets focus on the textarea.
|
||||
*/
|
||||
'setFocus': () => Promise<void>;
|
||||
/**
|
||||
* The textarea's size, one of `small`, `medium`, or `large`.
|
||||
*/
|
||||
'size': string;
|
||||
/**
|
||||
* The textarea's value attribute.
|
||||
*/
|
||||
'value': string;
|
||||
}
|
||||
interface SlTooltip {
|
||||
/**
|
||||
* Set to true to draw the the tooltip with an arrow.
|
||||
*/
|
||||
'arrow': boolean;
|
||||
/**
|
||||
* Set to true to disable the tooltip so it won't show when triggered.
|
||||
*/
|
||||
'disabled': boolean;
|
||||
/**
|
||||
* The distance in pixels from which to draw the tooltip from its target element.
|
||||
*/
|
||||
'distance': number;
|
||||
/**
|
||||
* Shows the tooltip.
|
||||
*/
|
||||
'hide': () => Promise<void>;
|
||||
/**
|
||||
* The delay in ms before the tooltip hides.
|
||||
*/
|
||||
'hideDelay': number;
|
||||
/**
|
||||
* The duration in ms of the tooltip's hide transition.
|
||||
*/
|
||||
'hideDuration': number;
|
||||
/**
|
||||
* The maximum width in pixels the tooltip can be before its content wraps.
|
||||
*/
|
||||
'maxWidth': number;
|
||||
/**
|
||||
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
|
||||
*/
|
||||
'placement': | 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end';
|
||||
/**
|
||||
* Shows the tooltip.
|
||||
*/
|
||||
'show': () => Promise<void>;
|
||||
/**
|
||||
* The delay in ms before showing the tooltip.
|
||||
*/
|
||||
'showDelay': number;
|
||||
/**
|
||||
* The duration in ms of the tooltip's show transition.
|
||||
*/
|
||||
'showDuration': number;
|
||||
/**
|
||||
* A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop.
|
||||
*/
|
||||
'target': string | HTMLElement;
|
||||
/**
|
||||
* The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically.
|
||||
*/
|
||||
'trigger': string;
|
||||
/**
|
||||
* Sets the tooltip's z-index.
|
||||
*/
|
||||
'zIndex': number;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
@@ -441,12 +96,6 @@ declare global {
|
||||
new (): HTMLSlButtonElement;
|
||||
};
|
||||
|
||||
interface HTMLSlCheckboxElement extends Components.SlCheckbox, HTMLStencilElement {}
|
||||
var HTMLSlCheckboxElement: {
|
||||
prototype: HTMLSlCheckboxElement;
|
||||
new (): HTMLSlCheckboxElement;
|
||||
};
|
||||
|
||||
interface HTMLSlDropdownElement extends Components.SlDropdown, HTMLStencilElement {}
|
||||
var HTMLSlDropdownElement: {
|
||||
prototype: HTMLSlDropdownElement;
|
||||
@@ -465,60 +114,17 @@ declare global {
|
||||
new (): HTMLSlDropdownItemElement;
|
||||
};
|
||||
|
||||
interface HTMLSlInputElement extends Components.SlInput, HTMLStencilElement {}
|
||||
var HTMLSlInputElement: {
|
||||
prototype: HTMLSlInputElement;
|
||||
new (): HTMLSlInputElement;
|
||||
};
|
||||
|
||||
interface HTMLSlRadioElement extends Components.SlRadio, HTMLStencilElement {}
|
||||
var HTMLSlRadioElement: {
|
||||
prototype: HTMLSlRadioElement;
|
||||
new (): HTMLSlRadioElement;
|
||||
};
|
||||
|
||||
interface HTMLSlRangeElement extends Components.SlRange, HTMLStencilElement {}
|
||||
var HTMLSlRangeElement: {
|
||||
prototype: HTMLSlRangeElement;
|
||||
new (): HTMLSlRangeElement;
|
||||
};
|
||||
|
||||
interface HTMLSlSpinnerElement extends Components.SlSpinner, HTMLStencilElement {}
|
||||
var HTMLSlSpinnerElement: {
|
||||
prototype: HTMLSlSpinnerElement;
|
||||
new (): HTMLSlSpinnerElement;
|
||||
};
|
||||
|
||||
interface HTMLSlSwitchElement extends Components.SlSwitch, HTMLStencilElement {}
|
||||
var HTMLSlSwitchElement: {
|
||||
prototype: HTMLSlSwitchElement;
|
||||
new (): HTMLSlSwitchElement;
|
||||
};
|
||||
|
||||
interface HTMLSlTextareaElement extends Components.SlTextarea, HTMLStencilElement {}
|
||||
var HTMLSlTextareaElement: {
|
||||
prototype: HTMLSlTextareaElement;
|
||||
new (): HTMLSlTextareaElement;
|
||||
};
|
||||
|
||||
interface HTMLSlTooltipElement extends Components.SlTooltip, HTMLStencilElement {}
|
||||
var HTMLSlTooltipElement: {
|
||||
prototype: HTMLSlTooltipElement;
|
||||
new (): HTMLSlTooltipElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-button': HTMLSlButtonElement;
|
||||
'sl-checkbox': HTMLSlCheckboxElement;
|
||||
'sl-dropdown': HTMLSlDropdownElement;
|
||||
'sl-dropdown-divider': HTMLSlDropdownDividerElement;
|
||||
'sl-dropdown-item': HTMLSlDropdownItemElement;
|
||||
'sl-input': HTMLSlInputElement;
|
||||
'sl-radio': HTMLSlRadioElement;
|
||||
'sl-range': HTMLSlRangeElement;
|
||||
'sl-spinner': HTMLSlSpinnerElement;
|
||||
'sl-switch': HTMLSlSwitchElement;
|
||||
'sl-textarea': HTMLSlTextareaElement;
|
||||
'sl-tooltip': HTMLSlTooltipElement;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -561,28 +167,6 @@ declare namespace LocalJSX {
|
||||
*/
|
||||
'type'?: string;
|
||||
}
|
||||
interface SlCheckbox {
|
||||
/**
|
||||
* Set to true to draw the checkbox in a checked state.
|
||||
*/
|
||||
'checked'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the checkbox.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* Set to true to draw the checkbox in an indeterminate state.
|
||||
*/
|
||||
'indeterminate'?: boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlDropdown {
|
||||
/**
|
||||
* The preferred placement of the dropdown menu. Note that the actual placement may vary as needed to keep the menu inside of the viewport.
|
||||
@@ -605,309 +189,19 @@ declare namespace LocalJSX {
|
||||
'disabled'?: boolean;
|
||||
'onShoelaceSelect'?: (event: CustomEvent<any>) => void;
|
||||
}
|
||||
interface SlInput {
|
||||
/**
|
||||
* The input's autocaptialize attribute.
|
||||
*/
|
||||
'autocapitalize'?: string;
|
||||
/**
|
||||
* The input's autocomplete attribute.
|
||||
*/
|
||||
'autocomplete'?: string;
|
||||
/**
|
||||
* The input's autocorrect attribute.
|
||||
*/
|
||||
'autocorrect'?: string;
|
||||
/**
|
||||
* The input's autofocus attribute.
|
||||
*/
|
||||
'autofocus'?: boolean;
|
||||
/**
|
||||
* Set to true to add a clear button when the input is populated.
|
||||
*/
|
||||
'clearable'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the input.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* The input's inputmode attribute.
|
||||
*/
|
||||
'inputmode'?: string;
|
||||
/**
|
||||
* The input's max attribute.
|
||||
*/
|
||||
'max'?: number;
|
||||
/**
|
||||
* The input's maxlength attribute.
|
||||
*/
|
||||
'maxlength'?: number;
|
||||
/**
|
||||
* The input's min attribute.
|
||||
*/
|
||||
'min'?: number;
|
||||
/**
|
||||
* The input's minlength attribute.
|
||||
*/
|
||||
'minlength'?: number;
|
||||
/**
|
||||
* The input's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The input's pattern attribute.
|
||||
*/
|
||||
'pattern'?: string;
|
||||
/**
|
||||
* The input's placeholder text.
|
||||
*/
|
||||
'placeholder'?: string;
|
||||
/**
|
||||
* Set to true for a readonly input.
|
||||
*/
|
||||
'readonly'?: boolean;
|
||||
/**
|
||||
* The input's required attribute.
|
||||
*/
|
||||
'required'?: boolean;
|
||||
/**
|
||||
* The input's size, one of `small`, `medium`, or `large`.
|
||||
*/
|
||||
'size'?: string;
|
||||
/**
|
||||
* The input's step attribute.
|
||||
*/
|
||||
'step'?: number;
|
||||
/**
|
||||
* The input's type, one of `text`, `number`, `email`, etc.
|
||||
*/
|
||||
'type'?: string;
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlRadio {
|
||||
/**
|
||||
* Set to true to draw the radio in a checked state.
|
||||
*/
|
||||
'checked'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the radio.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlRange {
|
||||
/**
|
||||
* Set to true to disable the input.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* The input's max attribute.
|
||||
*/
|
||||
'max'?: number;
|
||||
/**
|
||||
* The input's min attribute.
|
||||
*/
|
||||
'min'?: number;
|
||||
/**
|
||||
* The input's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The input's step attribute.
|
||||
*/
|
||||
'step'?: number | 'any';
|
||||
/**
|
||||
* The input's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlSpinner {
|
||||
/**
|
||||
* The spinner's size.
|
||||
*/
|
||||
'size'?: string;
|
||||
}
|
||||
interface SlSwitch {
|
||||
/**
|
||||
* Set to true to draw the switch in a checked state.
|
||||
*/
|
||||
'checked'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the switch.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* A native input's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The native input's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlTextarea {
|
||||
/**
|
||||
* The textarea's autocaptialize attribute.
|
||||
*/
|
||||
'autocapitalize'?: string;
|
||||
/**
|
||||
* The textarea's autocomplete attribute.
|
||||
*/
|
||||
'autocomplete'?: string;
|
||||
/**
|
||||
* The textarea's autocorrect attribute.
|
||||
*/
|
||||
'autocorrect'?: string;
|
||||
/**
|
||||
* The textarea's autofocus attribute.
|
||||
*/
|
||||
'autofocus'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the textarea.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* The textarea's inputmode attribute.
|
||||
*/
|
||||
'inputmode'?: string;
|
||||
/**
|
||||
* The textarea's maxlength attribute.
|
||||
*/
|
||||
'maxlength'?: number;
|
||||
/**
|
||||
* The textarea's name attribute.
|
||||
*/
|
||||
'name'?: string;
|
||||
/**
|
||||
* The textarea's placeholder text.
|
||||
*/
|
||||
'placeholder'?: string;
|
||||
/**
|
||||
* Set to true for a readonly textarea.
|
||||
*/
|
||||
'readonly'?: boolean;
|
||||
/**
|
||||
* The textarea's required attribute.
|
||||
*/
|
||||
'required'?: boolean;
|
||||
/**
|
||||
* Controls how the textarea can be resized.
|
||||
*/
|
||||
'resize'?: 'none' | 'vertical' | 'auto';
|
||||
/**
|
||||
* The number of rows to display by default.
|
||||
*/
|
||||
'rows'?: number;
|
||||
/**
|
||||
* The textarea's size, one of `small`, `medium`, or `large`.
|
||||
*/
|
||||
'size'?: string;
|
||||
/**
|
||||
* The textarea's value attribute.
|
||||
*/
|
||||
'value'?: string;
|
||||
}
|
||||
interface SlTooltip {
|
||||
/**
|
||||
* Set to true to draw the the tooltip with an arrow.
|
||||
*/
|
||||
'arrow'?: boolean;
|
||||
/**
|
||||
* Set to true to disable the tooltip so it won't show when triggered.
|
||||
*/
|
||||
'disabled'?: boolean;
|
||||
/**
|
||||
* The distance in pixels from which to draw the tooltip from its target element.
|
||||
*/
|
||||
'distance'?: number;
|
||||
/**
|
||||
* The delay in ms before the tooltip hides.
|
||||
*/
|
||||
'hideDelay'?: number;
|
||||
/**
|
||||
* The duration in ms of the tooltip's hide transition.
|
||||
*/
|
||||
'hideDuration'?: number;
|
||||
/**
|
||||
* The maximum width in pixels the tooltip can be before its content wraps.
|
||||
*/
|
||||
'maxWidth'?: number;
|
||||
/**
|
||||
* Emitted when the tooltip has fully transitioned out and gets unmounted from the DOM.
|
||||
*/
|
||||
'onSlHidden'?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* Emitted when the tooltip begins to hide.
|
||||
*/
|
||||
'onSlHide'?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* Emitted when the tooltip begins to show, but before it gets mounted to the DOM.
|
||||
*/
|
||||
'onSlShow'?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* Emitted when the tooltip has fully transitioned in.
|
||||
*/
|
||||
'onSlShown'?: (event: CustomEvent<any>) => void;
|
||||
/**
|
||||
* The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport.
|
||||
*/
|
||||
'placement'?: | 'top'
|
||||
| 'top-start'
|
||||
| 'top-end'
|
||||
| 'right'
|
||||
| 'right-start'
|
||||
| 'right-end'
|
||||
| 'bottom'
|
||||
| 'bottom-start'
|
||||
| 'bottom-end'
|
||||
| 'left'
|
||||
| 'left-start'
|
||||
| 'left-end';
|
||||
/**
|
||||
* The delay in ms before showing the tooltip.
|
||||
*/
|
||||
'showDelay'?: number;
|
||||
/**
|
||||
* The duration in ms of the tooltip's show transition.
|
||||
*/
|
||||
'showDuration'?: number;
|
||||
/**
|
||||
* A selector or element to use as the tooltip's target. This is the element that will trigger the tooltip to show upon interaction. If no target is specified, the previous sibling element of the tooltip will be used. A common way to link a tooltip to a target is to give the target an `id` and pass `#id` to the `target` prop.
|
||||
*/
|
||||
'target'?: string | HTMLElement;
|
||||
/**
|
||||
* The events that cause a tooltip to show, separated by a space. Possible values include any combination of `mouseenter`, `focus`, `click`, and `manual`. Use `manual` if you only want to show and hide the tooltip programmatically.
|
||||
*/
|
||||
'trigger'?: string;
|
||||
/**
|
||||
* Sets the tooltip's z-index.
|
||||
*/
|
||||
'zIndex'?: number;
|
||||
}
|
||||
|
||||
interface IntrinsicElements {
|
||||
'sl-button': SlButton;
|
||||
'sl-checkbox': SlCheckbox;
|
||||
'sl-dropdown': SlDropdown;
|
||||
'sl-dropdown-divider': SlDropdownDivider;
|
||||
'sl-dropdown-item': SlDropdownItem;
|
||||
'sl-input': SlInput;
|
||||
'sl-radio': SlRadio;
|
||||
'sl-range': SlRange;
|
||||
'sl-spinner': SlSpinner;
|
||||
'sl-switch': SlSwitch;
|
||||
'sl-textarea': SlTextarea;
|
||||
'sl-tooltip': SlTooltip;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -918,17 +212,10 @@ declare module "@stencil/core" {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
'sl-button': LocalJSX.SlButton & JSXBase.HTMLAttributes<HTMLSlButtonElement>;
|
||||
'sl-checkbox': LocalJSX.SlCheckbox & JSXBase.HTMLAttributes<HTMLSlCheckboxElement>;
|
||||
'sl-dropdown': LocalJSX.SlDropdown & JSXBase.HTMLAttributes<HTMLSlDropdownElement>;
|
||||
'sl-dropdown-divider': LocalJSX.SlDropdownDivider & JSXBase.HTMLAttributes<HTMLSlDropdownDividerElement>;
|
||||
'sl-dropdown-item': LocalJSX.SlDropdownItem & JSXBase.HTMLAttributes<HTMLSlDropdownItemElement>;
|
||||
'sl-input': LocalJSX.SlInput & JSXBase.HTMLAttributes<HTMLSlInputElement>;
|
||||
'sl-radio': LocalJSX.SlRadio & JSXBase.HTMLAttributes<HTMLSlRadioElement>;
|
||||
'sl-range': LocalJSX.SlRange & JSXBase.HTMLAttributes<HTMLSlRangeElement>;
|
||||
'sl-spinner': LocalJSX.SlSpinner & JSXBase.HTMLAttributes<HTMLSlSpinnerElement>;
|
||||
'sl-switch': LocalJSX.SlSwitch & JSXBase.HTMLAttributes<HTMLSlSwitchElement>;
|
||||
'sl-textarea': LocalJSX.SlTextarea & JSXBase.HTMLAttributes<HTMLSlTextareaElement>;
|
||||
'sl-tooltip': LocalJSX.SlTooltip & JSXBase.HTMLAttributes<HTMLSlTooltipElement>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,51 @@
|
||||
@mixin button(
|
||||
$color,
|
||||
$color--hover,
|
||||
$color--focus,
|
||||
$color--active,
|
||||
$background-color,
|
||||
$background-color--hover,
|
||||
$background-color--focus,
|
||||
$background-color--active,
|
||||
$border-color,
|
||||
$border-color--hover,
|
||||
$border-color--focus,
|
||||
$border-color--active,
|
||||
$border-width,
|
||||
$focus-ring-width,
|
||||
$focus-ring-color
|
||||
) {
|
||||
display: inline-block;
|
||||
font-family: var(--input-font-sans-serif);
|
||||
font-weight: var(--input-font-weight);
|
||||
color: $color;
|
||||
background-color: $background-color;
|
||||
border: solid $border-width $border-color;
|
||||
transition: var(--input-transition-speed) background-color, var(--input-transition-speed) color,
|
||||
var(--input-transition-speed) border;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
@mixin solid-button($theme-color) {
|
||||
background-color: var(--color-#{$theme-color}-50);
|
||||
border-color: var(--color-#{$theme-color}-50);
|
||||
color: white;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: $background-color--hover;
|
||||
border-color: $border-color--hover;
|
||||
color: $color--hover;
|
||||
background-color: var(--color-#{$theme-color}-55);
|
||||
border-color: var(--color-#{$theme-color}-55);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
background-color: $background-color--focus;
|
||||
border-color: $border-color--focus;
|
||||
color: $color--focus;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
|
||||
background-color: var(--color-#{$theme-color}-55);
|
||||
border-color: var(--color-#{$theme-color}-55);
|
||||
color: white;
|
||||
box-shadow: 0 0 0 var(--focus-ring-width)
|
||||
hsla(var(--color-#{$theme-color}-hue), var(--color-#{$theme-color}-saturation), 50%, var(--focus-ring-alpha));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: $background-color--active;
|
||||
border-color: $border-color--active;
|
||||
color: $color--active;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
background-color: var(--color-#{$theme-color}-45);
|
||||
border-color: var(--color-#{$theme-color}-45);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outline-button($theme-color) {
|
||||
background-color: var(--color-#{$theme-color}-90);
|
||||
border-color: var(--color-#{$theme-color}-80);
|
||||
color: var(--color-#{$theme-color}-50);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--color-#{$theme-color}-50);
|
||||
border-color: var(--color-#{$theme-color}-50);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
background-color: var(--color-#{$theme-color}-50);
|
||||
border-color: var(--color-#{$theme-color}-50);
|
||||
color: white;
|
||||
box-shadow: 0 0 0 var(--focus-ring-width)
|
||||
hsla(var(--color-#{$theme-color}-hue), var(--color-#{$theme-color}-saturation), 50%, var(--focus-ring-alpha));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: var(--color-#{$theme-color}-45);
|
||||
border-color: var(--color-#{$theme-color}-45);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,376 +1,272 @@
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
@import 'button.mixins';
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
--button-padding-x--small: 14px;
|
||||
--button-padding-x--medium: 20px;
|
||||
--button-padding-x--large: 26px;
|
||||
|
||||
--button-spinner-animation: 1s linear infinite spin;
|
||||
--button-spinner-border-width: 1px;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Base styles
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-style: solid;
|
||||
border-width: var(--form-control-border-width);
|
||||
font-family: var(--form-control-font-sans-serif);
|
||||
font-weight: var(--form-control-font-weight);
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
transition: var(--form-control-transition-speed) background-color, var(--form-control-transition-speed) color,
|
||||
var(--form-control-transition-speed) border;
|
||||
cursor: pointer;
|
||||
|
||||
.sl-button__prefix:empty,
|
||||
.sl-button__suffix:empty {
|
||||
display: none;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sl-button__prefix:not(:empty) {
|
||||
margin-left: -0.25em;
|
||||
margin-right: 0.25em;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sl-button__suffix:not(:empty) {
|
||||
margin-left: 0.25em;
|
||||
margin-right: -0.25em;
|
||||
&[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sl-button__prefix {
|
||||
::slotted(*) {
|
||||
margin-left: -0.25em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.sl-button__suffix {
|
||||
::slotted(*) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: -0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Standard buttons
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Solid buttons
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button:not(.sl-button--outline) {
|
||||
&.sl-button--default {
|
||||
@include button(
|
||||
$color: var(--input-color),
|
||||
$color--hover: var(--color-primary-500),
|
||||
$color--focus: var(--color-primary-500),
|
||||
$color--active: var(--color-primary-450),
|
||||
$background-color: var(--input-background-color),
|
||||
$background-color--hover: var(--color-primary-900),
|
||||
$background-color--focus: var(--color-primary-900),
|
||||
$background-color--active: var(--color-primary-900),
|
||||
$border-color: var(--input-border-color),
|
||||
$border-color--hover: var(--color-primary-800),
|
||||
$border-color--focus: var(--color-primary-600),
|
||||
$border-color--active: var(--color-primary-500),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-primary)
|
||||
);
|
||||
background-color: var(--form-control-background-color);
|
||||
border-color: var(--form-control-border-color);
|
||||
color: var(--form-control-color);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--color-primary-95);
|
||||
border-color: var(--color-primary-80);
|
||||
color: var(--color-primary-50);
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
background-color: var(--color-primary-95);
|
||||
border-color: var(--color-primary-70);
|
||||
color: var(--color-primary-50);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width)
|
||||
hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: var(--color-primary-95);
|
||||
border-color: var(--color-primary-60);
|
||||
color: var(--color-primary-45);
|
||||
}
|
||||
}
|
||||
|
||||
&.sl-button--primary {
|
||||
@include button(
|
||||
$color: var(--color-white),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-primary),
|
||||
$background-color--hover: var(--color-primary-550),
|
||||
$background-color--focus: var(--color-primary-550),
|
||||
$background-color--active: var(--color-primary-450),
|
||||
$border-color: var(--color-primary),
|
||||
$border-color--hover: var(--color-primary-550),
|
||||
$border-color--focus: var(--color-primary-550),
|
||||
$border-color--active: var(--color-primary-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-primary)
|
||||
);
|
||||
@include solid-button(primary);
|
||||
}
|
||||
|
||||
&.sl-button--success {
|
||||
@include button(
|
||||
$color: var(--color-white),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-success),
|
||||
$background-color--hover: var(--color-success-550),
|
||||
$background-color--focus: var(--color-success-550),
|
||||
$background-color--active: var(--color-success-450),
|
||||
$border-color: var(--color-success),
|
||||
$border-color--hover: var(--color-success-550),
|
||||
$border-color--focus: var(--color-success-550),
|
||||
$border-color--active: var(--color-success-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-success)
|
||||
);
|
||||
@include solid-button(success);
|
||||
}
|
||||
|
||||
&.sl-button--info {
|
||||
@include button(
|
||||
$color: var(--color-white),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-info),
|
||||
$background-color--hover: var(--color-info-550),
|
||||
$background-color--focus: var(--color-info-550),
|
||||
$background-color--active: var(--color-info-450),
|
||||
$border-color: var(--color-info),
|
||||
$border-color--hover: var(--color-info-550),
|
||||
$border-color--focus: var(--color-info-550),
|
||||
$border-color--active: var(--color-info-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-info)
|
||||
);
|
||||
@include solid-button(info);
|
||||
}
|
||||
|
||||
&.sl-button--warning {
|
||||
@include button(
|
||||
$color: var(--color-white),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-warning),
|
||||
$background-color--hover: var(--color-warning-550),
|
||||
$background-color--focus: var(--color-warning-550),
|
||||
$background-color--active: var(--color-warning-450),
|
||||
$border-color: var(--color-warning),
|
||||
$border-color--hover: var(--color-warning-550),
|
||||
$border-color--focus: var(--color-warning-550),
|
||||
$border-color--active: var(--color-warning-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-warning)
|
||||
);
|
||||
@include solid-button(warning);
|
||||
}
|
||||
|
||||
&.sl-button--danger {
|
||||
@include button(
|
||||
$color: var(--color-white),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-danger),
|
||||
$background-color--hover: var(--color-danger-550),
|
||||
$background-color--focus: var(--color-danger-550),
|
||||
$background-color--active: var(--color-danger-450),
|
||||
$border-color: var(--color-danger),
|
||||
$border-color--hover: var(--color-danger-550),
|
||||
$border-color--focus: var(--color-danger-550),
|
||||
$border-color--active: var(--color-danger-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-danger)
|
||||
);
|
||||
@include solid-button(danger);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Outline buttons
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button.sl-button--outline {
|
||||
&.sl-button--default {
|
||||
@include button(
|
||||
$color: var(--input-color),
|
||||
$color--hover: var(--color-primary-500),
|
||||
$color--focus: var(--color-primary-500),
|
||||
$color--active: var(--color-primary-450),
|
||||
$background-color: var(--color-white),
|
||||
$background-color--hover: var(--color-white),
|
||||
$background-color--focus: var(--color-white),
|
||||
$background-color--active: var(--color-white),
|
||||
$border-color: $form-control-border-color,
|
||||
$border-color--hover: var(--color-primary-600),
|
||||
$border-color--focus: var(--color-primary-600),
|
||||
$border-color--active: var(--color-primary-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-primary)
|
||||
);
|
||||
background-color: white;
|
||||
border-color: var(--form-control-border-color);
|
||||
color: var(--form-control-color);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--color-white);
|
||||
border-color: var(--color-primary-60);
|
||||
color: var(--color-primary-50);
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
background-color: var(--color-white);
|
||||
border-color: var(--color-primary-60);
|
||||
color: var(--color-primary-50);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width)
|
||||
hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: var(--color-white);
|
||||
border-color: var(--color-primary-45);
|
||||
color: var(--color-primary-45);
|
||||
}
|
||||
}
|
||||
|
||||
&.sl-button--primary {
|
||||
@include button(
|
||||
$color: var(--color-primary),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-primary-900),
|
||||
$background-color--hover: var(--color-primary-500),
|
||||
$background-color--focus: var(--color-primary-500),
|
||||
$background-color--active: var(--color-primary-450),
|
||||
$border-color: var(--color-primary-800),
|
||||
$border-color--hover: var(--color-primary),
|
||||
$border-color--focus: var(--color-primary),
|
||||
$border-color--active: var(--color-primary-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-primary)
|
||||
);
|
||||
@include outline-button(primary);
|
||||
}
|
||||
|
||||
&.sl-button--success {
|
||||
@include button(
|
||||
$color: var(--color-success),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-success-900),
|
||||
$background-color--hover: var(--color-success-500),
|
||||
$background-color--focus: var(--color-success-500),
|
||||
$background-color--active: var(--color-success-450),
|
||||
$border-color: var(--color-success-800),
|
||||
$border-color--hover: var(--color-success),
|
||||
$border-color--focus: var(--color-success),
|
||||
$border-color--active: var(--color-success-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-success)
|
||||
);
|
||||
@include outline-button(success);
|
||||
}
|
||||
|
||||
&.sl-button--info {
|
||||
@include button(
|
||||
$color: var(--color-info),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-info-900),
|
||||
$background-color--hover: var(--color-info-500),
|
||||
$background-color--focus: var(--color-info-500),
|
||||
$background-color--active: var(--color-info-450),
|
||||
$border-color: var(--color-info-800),
|
||||
$border-color--hover: var(--color-info),
|
||||
$border-color--focus: var(--color-info),
|
||||
$border-color--active: var(--color-info-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-info)
|
||||
);
|
||||
@include outline-button(info);
|
||||
}
|
||||
|
||||
&.sl-button--warning {
|
||||
@include button(
|
||||
$color: var(--color-warning),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-warning-900),
|
||||
$background-color--hover: var(--color-warning-500),
|
||||
$background-color--focus: var(--color-warning-500),
|
||||
$background-color--active: var(--color-warning-450),
|
||||
$border-color: var(--color-warning-800),
|
||||
$border-color--hover: var(--color-warning),
|
||||
$border-color--focus: var(--color-warning),
|
||||
$border-color--active: var(--color-warning-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-warning)
|
||||
);
|
||||
@include outline-button(warning);
|
||||
}
|
||||
|
||||
&.sl-button--danger {
|
||||
@include button(
|
||||
$color: var(--color-danger),
|
||||
$color--hover: var(--color-white),
|
||||
$color--focus: var(--color-white),
|
||||
$color--active: var(--color-white),
|
||||
$background-color: var(--color-danger-900),
|
||||
$background-color--hover: var(--color-danger-500),
|
||||
$background-color--focus: var(--color-danger-500),
|
||||
$background-color--active: var(--color-danger-450),
|
||||
$border-color: var(--color-danger-800),
|
||||
$border-color--hover: var(--color-danger),
|
||||
$border-color--focus: var(--color-danger),
|
||||
$border-color--active: var(--color-danger-450),
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--color-focus-danger)
|
||||
);
|
||||
@include outline-button(danger);
|
||||
}
|
||||
}
|
||||
|
||||
// Text buttons
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Text buttons modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--text {
|
||||
@include button(
|
||||
$color: var(--color-gray-200),
|
||||
$color--hover: var(--color-gray-400),
|
||||
$color--focus: var(--color-gray-400),
|
||||
$color--active: var(--color-gray-100),
|
||||
$background-color: transparent,
|
||||
$background-color--hover: transparent,
|
||||
$background-color--focus: transparent,
|
||||
$background-color--active: transparent,
|
||||
$border-color: transparent,
|
||||
$border-color--hover: transparent,
|
||||
$border-color--focus: transparent,
|
||||
$border-color--active: transparent,
|
||||
$border-width: var(--input-border-width),
|
||||
$focus-ring-width: var(--input-focus-ring-width),
|
||||
$focus-ring-color: var(--input-focus-ring-color)
|
||||
);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-primary-50);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-primary-60);
|
||||
}
|
||||
|
||||
&:focus:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-primary-60);
|
||||
box-shadow: 0 0 0 var(--focus-ring-width)
|
||||
hsla(var(--color-primary-hue), var(--color-primary-saturation), 50%, var(--focus-ring-alpha));
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: var(--color-primary-40);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Block modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Size modifiers
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--small {
|
||||
font-size: var(--input-font-size--small);
|
||||
height: var(--input-height--small);
|
||||
line-height: calc(var(--input-height--small) - var(--input-border-width) * 2);
|
||||
border-radius: var(--input-border-radius--small);
|
||||
font-size: var(--form-control-font-size--small);
|
||||
height: var(--form-control-height--small);
|
||||
line-height: calc(var(--form-control-height--small) - var(--form-control-border-width) * 2);
|
||||
border-radius: var(--form-control-border-radius--small);
|
||||
padding: 0 var(--button-padding-x--small);
|
||||
}
|
||||
|
||||
.sl-button--medium {
|
||||
font-size: var(--input-font-size--medium);
|
||||
height: var(--input-height--medium);
|
||||
line-height: calc(var(--input-height--medium) - var(--input-border-width) * 2);
|
||||
border-radius: var(--input-border-radius--medium);
|
||||
font-size: var(--form-control-font-size--medium);
|
||||
height: var(--form-control-height--medium);
|
||||
line-height: calc(var(--form-control-height--medium) - var(--form-control-border-width) * 2);
|
||||
border-radius: var(--form-control-border-radius--medium);
|
||||
padding: 0 var(--button-padding-x--medium);
|
||||
}
|
||||
|
||||
.sl-button--large {
|
||||
font-size: var(--input-font-size--large);
|
||||
height: var(--input-height--large);
|
||||
line-height: calc(var(--input-height--large) - var(--input-border-width) * 2);
|
||||
border-radius: var(--input-border-radius--large);
|
||||
font-size: var(--form-control-font-size--large);
|
||||
height: var(--form-control-height--large);
|
||||
line-height: calc(var(--form-control-height--large) - var(--form-control-border-width) * 2);
|
||||
border-radius: var(--form-control-border-radius--large);
|
||||
padding: 0 var(--button-padding-x--large);
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Round modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--round {
|
||||
&.sl-button--small {
|
||||
border-radius: var(--input-height--small);
|
||||
border-radius: var(--form-control-height--small);
|
||||
}
|
||||
|
||||
&.sl-button--medium {
|
||||
border-radius: var(--input-height--medium);
|
||||
border-radius: var(--form-control-height--medium);
|
||||
}
|
||||
|
||||
&.sl-button--large {
|
||||
border-radius: var(--input-height--large);
|
||||
border-radius: var(--form-control-height--large);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Circle modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--circle {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
&.sl-button--small {
|
||||
width: var(--input-height--small);
|
||||
width: var(--form-control-height--small);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.sl-button--medium {
|
||||
width: var(--input-height--medium);
|
||||
width: var(--form-control-height--medium);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.sl-button--large {
|
||||
width: var(--input-height--large);
|
||||
width: var(--form-control-height--large);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -383,12 +279,11 @@
|
||||
|
||||
// Caret modifier
|
||||
.sl-button--caret {
|
||||
.sl-button__suffix,
|
||||
.sl-button__caret:empty {
|
||||
.sl-button__suffix {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sl-button__caret:not(:empty) {
|
||||
.sl-button__caret {
|
||||
position: relative;
|
||||
margin-left: 0.75em;
|
||||
margin-right: 0;
|
||||
@@ -403,7 +298,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Loading modifier
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
.sl-button--loading {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
@@ -427,3 +325,12 @@
|
||||
animation: var(--button-spinner-animation);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,10 @@
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
|
||||
$dropdown-divider-border-color: tint($form-control-border-color, 50%) !default;
|
||||
$dropdown-divider-margin-y: 10px !default;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sl-dropdown-divider {
|
||||
border-top: solid 1px $dropdown-divider-border-color;
|
||||
margin: $dropdown-divider-margin-y 0;
|
||||
border-top: solid 1px var(--menu-divider-border-color);
|
||||
margin: var(--menu-padding-y) 0;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
|
||||
$dropdown-item-padding-x: $menu-padding-x !default;
|
||||
$dropdown-item-padding-y: $menu-padding-y !default;
|
||||
$dropdown-item-transition-speed: 100ms !default;
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
@@ -13,20 +8,23 @@ $dropdown-item-transition-speed: 100ms !default;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
transition: $dropdown-item-transition-speed color, $dropdown-item-transition-speed background-color,
|
||||
$dropdown-item-transition-speed fill;
|
||||
background-color: var(--menu-item-background-color);
|
||||
color: var(--menu-item-color);
|
||||
padding: var(--menu-padding-y) var(--menu-padding-x);
|
||||
transition: var(--menu-item-transition-speed) color, var(--menu-item-transition-speed) background-color,
|
||||
var(--menu-item-transition-speed) fill;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
&.sl-dropdown-item--active:not(.sl-dropdown-item--disabled) {
|
||||
background-color: $menu-background-color--hover;
|
||||
color: $menu-color--hover;
|
||||
background-color: var(--menu-item-background-color--active);
|
||||
color: var(--menu-item-color--active);
|
||||
}
|
||||
|
||||
&.sl-dropdown-item--disabled {
|
||||
color: $menu-color--disabled;
|
||||
background-color: var(--menu-item-background-color--disabled);
|
||||
color: var(--menu-item-color--disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
|
||||
$dropdown-font-family: $menu-font-family !default;
|
||||
$dropdown-font-weight: $menu-font-weight !default;
|
||||
$dropdown-font-size: $menu-font-size !default;
|
||||
$dropdown-border-color: $menu-border-color !default;
|
||||
$dropdown-background-color: $menu-background-color !default;
|
||||
$dropdown-box-shadow: $menu-box-shadow !default;
|
||||
$dropdown-color: $menu-color !default;
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
@@ -26,19 +17,18 @@ $dropdown-color: $menu-color !default;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-height: 50vh;
|
||||
font-family: $dropdown-font-family;
|
||||
font-weight: $dropdown-font-weight;
|
||||
font-size: $dropdown-font-size;
|
||||
color: $dropdown-color;
|
||||
background-color: $dropdown-background-color;
|
||||
border: solid 1px $dropdown-border-color;
|
||||
font-family: var(--menu-font-family);
|
||||
font-weight: var(--menu-font-weight);
|
||||
font-size: var(--menu-font-size);
|
||||
background-color: var(--menu-background-color);
|
||||
border: solid 1px var(--menu-border-color);
|
||||
border-radius: 4px;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
padding-top: $menu-padding-y;
|
||||
padding-bottom: $menu-padding-y;
|
||||
box-shadow: var(--menu-box-shadow);
|
||||
padding-top: var(--menu-padding-y);
|
||||
padding-bottom: var(--menu-padding-y);
|
||||
opacity: 0;
|
||||
overflow-y: auto;
|
||||
transition: 100ms opacity;
|
||||
transition: var(--menu-transition-speed) opacity;
|
||||
}
|
||||
|
||||
.sl-dropdown--open .sl-dropdown__menu {
|
||||
|
||||
@@ -1,19 +1,9 @@
|
||||
@import 'reset';
|
||||
@import 'variables';
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
--spinner-animation: 1s linear infinite spin;
|
||||
--spinner-border-width: 2px;
|
||||
--spinner-color: var(--color-primary);
|
||||
--spinner-color: var(--color-primary-50);
|
||||
--spinner-margin-x: 4px;
|
||||
|
||||
display: inline-block;
|
||||
@@ -28,3 +18,12 @@
|
||||
vertical-align: middle;
|
||||
animation: var(--spinner-animation);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
|
||||
<meta name="description" content="For when you don’t need the whole boot." />
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
|
||||
<meta name="description" content="For when you don’t need the whole boot.">
|
||||
<title>Shoelace: A forward-thinking component library built with Web Components</title>
|
||||
<link rel="icon" href="/assets/images/favicon.png" />
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
<link rel="icon" href="/assets/images/favicon.png">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
<link rel="stylesheet" href="/assets/themes/default.theme.css">
|
||||
<script type="module" src="/build/shoelace.esm.js"></script>
|
||||
<script nomodule src="/build/shoelace.js"></script>
|
||||
|
||||
@@ -37,7 +39,7 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><img src="/assets/images/wordmark.svg" alt="Shoelace" /></h1>
|
||||
<h1><img src="/assets/images/wordmark.svg" alt="Shoelace"></h1>
|
||||
|
||||
<h2>Button</h2>
|
||||
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
// Slightly darken a color
|
||||
@function shade($color, $percentage) {
|
||||
@return mix(black, $color, $percentage);
|
||||
}
|
||||
|
||||
// Slightly lighten a color
|
||||
@function tint($color, $percentage) {
|
||||
@return mix(white, $color, $percentage);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
// Given a map, outputs a list of custom properties scoped to the provided selector
|
||||
@mixin generateCustomProperties($map, $prefix: '') {
|
||||
@each $key, $value in $map {
|
||||
--#{$prefix}#{$key}: #{$value};
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,9 @@
|
||||
:host {
|
||||
box-sizing: border-box;
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
& *,
|
||||
& *:before,
|
||||
& *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,288 +0,0 @@
|
||||
@import 'functions';
|
||||
@import 'mixins';
|
||||
|
||||
$theme-colors: (
|
||||
primary: #409eff,
|
||||
success: #67c23a,
|
||||
info: #909399,
|
||||
warning: #e6a23c,
|
||||
danger: #f56c6c,
|
||||
white: #fff,
|
||||
black: #00070b
|
||||
);
|
||||
|
||||
$gray-colors: (
|
||||
100: tint(map-get($theme-colors, black), 10%),
|
||||
150: tint(map-get($theme-colors, black), 15%),
|
||||
200: tint(map-get($theme-colors, black), 20%),
|
||||
250: tint(map-get($theme-colors, black), 25%),
|
||||
300: tint(map-get($theme-colors, black), 30%),
|
||||
350: tint(map-get($theme-colors, black), 35%),
|
||||
400: tint(map-get($theme-colors, black), 40%),
|
||||
450: tint(map-get($theme-colors, black), 45%),
|
||||
500: tint(map-get($theme-colors, black), 50%),
|
||||
550: tint(map-get($theme-colors, black), 55%),
|
||||
600: tint(map-get($theme-colors, black), 60%),
|
||||
650: tint(map-get($theme-colors, black), 65%),
|
||||
700: tint(map-get($theme-colors, black), 70%),
|
||||
750: tint(map-get($theme-colors, black), 75%),
|
||||
800: tint(map-get($theme-colors, black), 80%),
|
||||
850: tint(map-get($theme-colors, black), 85%),
|
||||
900: tint(map-get($theme-colors, black), 90%)
|
||||
);
|
||||
|
||||
$primary-colors: (
|
||||
100: shade(map-get($theme-colors, primary), 90%),
|
||||
150: shade(map-get($theme-colors, primary), 78.75%),
|
||||
200: shade(map-get($theme-colors, primary), 67.5%),
|
||||
250: shade(map-get($theme-colors, primary), 56.25%),
|
||||
300: shade(map-get($theme-colors, primary), 45%),
|
||||
350: shade(map-get($theme-colors, primary), 33.75%),
|
||||
400: shade(map-get($theme-colors, primary), 22.5%),
|
||||
450: shade(map-get($theme-colors, primary), 11.25%),
|
||||
500: map-get($theme-colors, primary),
|
||||
550: tint(map-get($theme-colors, primary), 11.25%),
|
||||
600: tint(map-get($theme-colors, primary), 22.5%),
|
||||
650: tint(map-get($theme-colors, primary), 33.75%),
|
||||
700: tint(map-get($theme-colors, primary), 45%),
|
||||
750: tint(map-get($theme-colors, primary), 56.25%),
|
||||
800: tint(map-get($theme-colors, primary), 67.5%),
|
||||
850: tint(map-get($theme-colors, primary), 78.75%),
|
||||
900: tint(map-get($theme-colors, primary), 90%)
|
||||
);
|
||||
|
||||
$success-colors: (
|
||||
100: shade(map-get($theme-colors, success), 90%),
|
||||
150: shade(map-get($theme-colors, success), 78.75%),
|
||||
200: shade(map-get($theme-colors, success), 67.5%),
|
||||
250: shade(map-get($theme-colors, success), 56.25%),
|
||||
300: shade(map-get($theme-colors, success), 45%),
|
||||
350: shade(map-get($theme-colors, success), 33.75%),
|
||||
400: shade(map-get($theme-colors, success), 22.5%),
|
||||
450: shade(map-get($theme-colors, success), 11.25%),
|
||||
500: map-get($theme-colors, success),
|
||||
550: tint(map-get($theme-colors, success), 11.25%),
|
||||
600: tint(map-get($theme-colors, success), 22.5%),
|
||||
650: tint(map-get($theme-colors, success), 33.75%),
|
||||
700: tint(map-get($theme-colors, success), 45%),
|
||||
750: tint(map-get($theme-colors, success), 56.25%),
|
||||
800: tint(map-get($theme-colors, success), 67.5%),
|
||||
850: tint(map-get($theme-colors, success), 78.75%),
|
||||
900: tint(map-get($theme-colors, success), 90%)
|
||||
);
|
||||
|
||||
$info-colors: (
|
||||
100: shade(map-get($theme-colors, info), 90%),
|
||||
150: shade(map-get($theme-colors, info), 78.75%),
|
||||
200: shade(map-get($theme-colors, info), 67.5%),
|
||||
250: shade(map-get($theme-colors, info), 56.25%),
|
||||
300: shade(map-get($theme-colors, info), 45%),
|
||||
350: shade(map-get($theme-colors, info), 33.75%),
|
||||
400: shade(map-get($theme-colors, info), 22.5%),
|
||||
450: shade(map-get($theme-colors, info), 11.25%),
|
||||
500: map-get($theme-colors, info),
|
||||
550: tint(map-get($theme-colors, info), 11.25%),
|
||||
600: tint(map-get($theme-colors, info), 22.5%),
|
||||
650: tint(map-get($theme-colors, info), 33.75%),
|
||||
700: tint(map-get($theme-colors, info), 45%),
|
||||
750: tint(map-get($theme-colors, info), 56.25%),
|
||||
800: tint(map-get($theme-colors, info), 67.5%),
|
||||
850: tint(map-get($theme-colors, info), 78.75%),
|
||||
900: tint(map-get($theme-colors, info), 90%)
|
||||
);
|
||||
|
||||
$warning-colors: (
|
||||
100: shade(map-get($theme-colors, warning), 90%),
|
||||
150: shade(map-get($theme-colors, warning), 78.75%),
|
||||
200: shade(map-get($theme-colors, warning), 67.5%),
|
||||
250: shade(map-get($theme-colors, warning), 56.25%),
|
||||
300: shade(map-get($theme-colors, warning), 45%),
|
||||
350: shade(map-get($theme-colors, warning), 33.75%),
|
||||
400: shade(map-get($theme-colors, warning), 22.5%),
|
||||
450: shade(map-get($theme-colors, warning), 11.25%),
|
||||
500: map-get($theme-colors, warning),
|
||||
550: tint(map-get($theme-colors, warning), 11.25%),
|
||||
600: tint(map-get($theme-colors, warning), 22.5%),
|
||||
650: tint(map-get($theme-colors, warning), 33.75%),
|
||||
700: tint(map-get($theme-colors, warning), 45%),
|
||||
750: tint(map-get($theme-colors, warning), 56.25%),
|
||||
800: tint(map-get($theme-colors, warning), 67.5%),
|
||||
850: tint(map-get($theme-colors, warning), 78.75%),
|
||||
900: tint(map-get($theme-colors, warning), 90%)
|
||||
);
|
||||
|
||||
$danger-colors: (
|
||||
100: shade(map-get($theme-colors, danger), 90%),
|
||||
150: shade(map-get($theme-colors, danger), 78.75%),
|
||||
200: shade(map-get($theme-colors, danger), 67.5%),
|
||||
250: shade(map-get($theme-colors, danger), 56.25%),
|
||||
300: shade(map-get($theme-colors, danger), 45%),
|
||||
350: shade(map-get($theme-colors, danger), 33.75%),
|
||||
400: shade(map-get($theme-colors, danger), 22.5%),
|
||||
450: shade(map-get($theme-colors, danger), 11.25%),
|
||||
500: map-get($theme-colors, danger),
|
||||
550: tint(map-get($theme-colors, danger), 11.25%),
|
||||
600: tint(map-get($theme-colors, danger), 22.5%),
|
||||
650: tint(map-get($theme-colors, danger), 33.75%),
|
||||
700: tint(map-get($theme-colors, danger), 45%),
|
||||
750: tint(map-get($theme-colors, danger), 56.25%),
|
||||
800: tint(map-get($theme-colors, danger), 67.5%),
|
||||
850: tint(map-get($theme-colors, danger), 78.75%),
|
||||
900: tint(map-get($theme-colors, danger), 90%)
|
||||
);
|
||||
|
||||
$focus-colors: (
|
||||
primary: rgba(map-get($theme-colors, primary), 0.33),
|
||||
success: rgba(map-get($theme-colors, success), 0.33),
|
||||
info: rgba(map-get($theme-colors, info), 0.33),
|
||||
warning: rgba(map-get($theme-colors, warning), 0.33),
|
||||
danger: rgba(map-get($theme-colors, danger), 0.33),
|
||||
white: rgba(map-get($theme-colors, white), 0.33),
|
||||
black: rgba(map-get($theme-colors, black), 0.33)
|
||||
);
|
||||
|
||||
$fonts: (
|
||||
sans-serif:
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
|
||||
serif: "Cambria, Cochin, Georgia, Times, 'Times New Roman', serif",
|
||||
monospace: "Menlo, Monaco, 'Courier New', monospace",
|
||||
weight--light: 300,
|
||||
weight--normal: 400,
|
||||
weight--bold: 500,
|
||||
color-primary: map-get($gray-colors, 200),
|
||||
color-secondary: map-get($gray-colors, 600)
|
||||
);
|
||||
|
||||
$inputs: (
|
||||
font-family: map-get($fonts, sans-serif),
|
||||
font-weight: map-get($fonts, weight--normal),
|
||||
font-size--small: 12px,
|
||||
font-size--medium: 14px,
|
||||
font-size--large: 16px,
|
||||
color: map-get($gray-colors, 400),
|
||||
height--small: 32px,
|
||||
height--medium: 38px,
|
||||
height--large: 44px,
|
||||
border-width: 1px,
|
||||
border-color: map-get($gray-colors, 800),
|
||||
border-color--hover: map-get($gray-colors, 700),
|
||||
border-color--focus: map-get($theme-colors, primary),
|
||||
border-color--disabled: map-get($gray-colors, 800),
|
||||
border-radius--small: 4px,
|
||||
border-radius--medium: 4px,
|
||||
border-radius--large: 4px,
|
||||
background-color: map-get($theme-colors, white),
|
||||
background-color--hover: map-get($theme-colors, white),
|
||||
background-color--focus: map-get($theme-colors, white),
|
||||
background-color-disabled: map-get($gray-colors, 900),
|
||||
focus-ring-width: 2px,
|
||||
focus-ring-color: map-get($focus-colors, primary),
|
||||
placeholder-color: map-get($gray-colors, 700),
|
||||
transition-speed: 150ms
|
||||
);
|
||||
|
||||
$menus: (
|
||||
font-family: map-get($fonts, sans-serif),
|
||||
font-weight: map-get($fonts, weight--normal),
|
||||
font-size: 16px,
|
||||
border-color: map-get($gray-colors, 900),
|
||||
background-color: map-get($theme-colors, white),
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1),
|
||||
color: map-get($gray-colors, 400),
|
||||
color--selected: map-get($theme-colors, primary),
|
||||
color--disabled: map-get($gray-colors, 700),
|
||||
padding-x: 30px,
|
||||
padding-y: 10px
|
||||
);
|
||||
|
||||
// Generate custom styles scoped to each component's host element
|
||||
:host {
|
||||
@include generateCustomProperties($theme-colors, 'color-');
|
||||
@include generateCustomProperties($gray-colors, 'color-gray-');
|
||||
@include generateCustomProperties($primary-colors, 'color-primary-');
|
||||
@include generateCustomProperties($success-colors, 'color-success-');
|
||||
@include generateCustomProperties($info-colors, 'color-info-');
|
||||
@include generateCustomProperties($warning-colors, 'color-warning-');
|
||||
@include generateCustomProperties($danger-colors, 'color-danger-');
|
||||
@include generateCustomProperties($focus-colors, 'color-focus-');
|
||||
@include generateCustomProperties($fonts, 'font-');
|
||||
@include generateCustomProperties($inputs, 'input-');
|
||||
@include generateCustomProperties($menus, 'menu-');
|
||||
}
|
||||
|
||||
// TODO: remove all SCSS vars!
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Colors
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$color-primary: #409eff !default;
|
||||
$color-success: #67c23a !default;
|
||||
$color-info: #909399 !default;
|
||||
$color-warning: #e6a23c !default;
|
||||
$color-danger: #f56c6c !default;
|
||||
$color-white: #fff !default;
|
||||
$color-black: #00070b !default;
|
||||
|
||||
$color-gray-10: tint($color-black, 10%) !default;
|
||||
$color-gray-20: tint($color-black, 20%) !default;
|
||||
$color-gray-30: tint($color-black, 30%) !default;
|
||||
$color-gray-40: tint($color-black, 40%) !default;
|
||||
$color-gray-50: tint($color-black, 50%) !default;
|
||||
$color-gray-60: tint($color-black, 60%) !default;
|
||||
$color-gray-70: tint($color-black, 70%) !default;
|
||||
$color-gray-80: tint($color-black, 80%) !default;
|
||||
$color-gray-90: tint($color-black, 90%) !default;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Fonts
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
||||
'Helvetica Neue', sans-serif !default;
|
||||
$font-serif: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !default;
|
||||
$font-monospace: Menlo, Monaco, Courier New, monospace !default;
|
||||
$font-size: 16px !default;
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 500 !default;
|
||||
|
||||
$text-color-primary: $color-gray-20 !default;
|
||||
$text-color-secondary: $color-gray-60 !default;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Form controls (inputs, textareas, buttons, et al)
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$form-control-font-family: $font-sans-serif !default;
|
||||
$form-control-font-weight: $font-weight-normal !default;
|
||||
|
||||
$form-control-font-size--small: 12px !default;
|
||||
$form-control-font-size--medium: 14px !default;
|
||||
$form-control-font-size--large: 16px !default;
|
||||
|
||||
$form-control-height--small: 32px !default;
|
||||
$form-control-height--medium: 38px !default;
|
||||
$form-control-height--large: 44px !default;
|
||||
|
||||
$form-control-border-color: tint($color-black, 85%) !default;
|
||||
$form-control-color: $color-gray-40 !default;
|
||||
|
||||
$form-control-transition-speed: 150ms;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// Menus (dropdowns, selects, et al)
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
$menu-font-family: $font-sans-serif !default;
|
||||
$menu-font-weight: $font-weight-normal !default;
|
||||
$menu-font-size: $font-size !default;
|
||||
$menu-border-color: tint($form-control-border-color, 50%) !default;
|
||||
$menu-background-color: $color-white !default;
|
||||
$menu-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !default;
|
||||
$menu-color: $color-gray-40 !default;
|
||||
$menu-background-color--hover: tint($color-primary, 90%) !default;
|
||||
$menu-color--hover: $color-primary !default;
|
||||
$menu-color--disabled: $color-gray-70 !default;
|
||||
$menu-padding-x: 30px !default;
|
||||
$menu-padding-y: 10px !default;
|
||||
Reference in New Issue
Block a user