diff --git a/package-lock.json b/package-lock.json index 4c14c21ad..a5d729617 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4548,6 +4548,12 @@ "pinkie-promise": "^2.0.0" } }, + "fiori-fundamentals": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/fiori-fundamentals/-/fiori-fundamentals-1.3.1.tgz", + "integrity": "sha512-Uy/Y8mQMSXTNgaJRw4FTWCGX3kcRqUuSKE7LWjEj1aWxVhaTXUS5BUs4b9OdTWcuqll2RuZ3fUYtr0L4JRVvPQ==", + "dev": true + }, "flat-cache": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz", @@ -5170,12 +5176,6 @@ "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=" }, - "fundamental-ui": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/fundamental-ui/-/fundamental-ui-1.2.2.tgz", - "integrity": "sha512-gwaaVxrVQyvTIPckgeDuxkg0GDGF6CforzKVSZvmrprIIk0WPWq2vmSl1Ouv4JctYoWKZu1X0+xHTvkjZre9Fw==", - "dev": true - }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", diff --git a/package.json b/package.json index d2dd1b346..ad9b6567c 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "eject": "react-scripts eject" }, "devDependencies": { - "fundamental-ui": "^1.2.2", + "fiori-fundamentals": "^1.3.1", "gh-pages": "^2.0.1" }, "browserslist": [ diff --git a/src/ActionBar/ActionBar.Component.js b/src/ActionBar/ActionBar.Component.js index 3f52334c3..a173abec7 100644 --- a/src/ActionBar/ActionBar.Component.js +++ b/src/ActionBar/ActionBar.Component.js @@ -8,24 +8,16 @@ export const ActionBarComponent = () => { - - + + `; const actionBarNoBackBtnCode = ` - - + + `; @@ -33,7 +25,7 @@ export const ActionBarComponent = () => { } + control={ - + + @@ -144,12 +132,8 @@ export const ActionBarComponent = () => { - - + + @@ -168,7 +152,7 @@ export const ActionBarComponent = () => { } + control={ ); }; diff --git a/src/Alert/Alert.Component.js b/src/Alert/Alert.Component.js index 1f7852038..d6fafeed6 100644 --- a/src/Alert/Alert.Component.js +++ b/src/Alert/Alert.Component.js @@ -1,63 +1,120 @@ -import React from 'react' -import { Alert } from '../' -import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../' +import React from 'react'; +import { Alert } from '../'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; import { Playground } from '../documentation/Playground/Playground'; export const AlertComponent = () => { - const defaultAlertCode = `Default alert with a ` + const defaultAlertCode = `Default alert with a + +تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه `; - const warningAlertCode = ` + const warningAlertCode = `

A dismissible error type alert with template.

More information...

-` + - const errorAlertCode = `Error message with a ` + + تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه +`; + + const errorAlertCode = ` + Error message with a + + + + تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه +`; return (
Alert
- Alerts provide messages within the application that are color-coded to emphasize the level of urgency. + + Alerts provide messages within the application that are color-coded to emphasize the level of urgency. + - + - - + +

Default Alert

- The alert provides information that is useful and relevant, but not critical. It can also provide feedback that an action has been executed. The user will need to dismiss the message. + + The alert provides information that is useful and relevant, but not critical. It can also provide + feedback that an action has been executed. The user will need to dismiss the message. + - Default alert with a + + Default alert with a {' '} + +
+ + تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه + {defaultAlertCode}

Warning Alert

- The alert warns of potential issues, but the user can still continue. The user will need to dismiss the message. Apply type="warning". + + The alert warns of potential issues, but the user can still continue. The user will need to dismiss the + message. Apply type="warning". + - +

A dismissible error type alert with template.

More information...

 + +
+ + + تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه + {warningAlertCode}

Error Alert

- This alert is triggered after the user entered data incorrectly or a system error has occurred. It should interrupt the user. A final action such as Submit cannot be carried out until the user has rectified the error. The user will need to dismiss the message. Apply type="error". + + This alert is triggered after the user entered data incorrectly or a system error has occurred. It + should interrupt the user. A final action such as Submit cannot be carried out until the user has + rectified the error. The user will need to dismiss the message. Apply type="error". + - Error message with a + + Error message with a {' '} + + +
+ + + تم. بسبب أمام وشعار ولم بـ. أحكم والكساد ما فقد. كل وعُرفت الإنزال مدن. انه + {errorAlertCode} @@ -66,16 +123,24 @@ export const AlertComponent = () => {

Playground

- - Default alert with a + } + ]} + > + + Default alert with a{' '} +
); -} - +}; diff --git a/src/Alert/Alert.js b/src/Alert/Alert.js index f57289cda..3d31aaa11 100644 --- a/src/Alert/Alert.js +++ b/src/Alert/Alert.js @@ -16,17 +16,27 @@ export class Alert extends Component { } render() { - const { type, link, linkText, dismissable, children } = this.props; + const { type, link, linkText, dismissable, rtl, children } = this.props; return (
{ - this.state.isActive && ); diff --git a/src/App.css b/src/App.css index c90cd6038..e69de29bb 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5682 +0,0 @@ -@charset "UTF-8"; -@font-face { - font-family: '72Condensed'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-Condensed.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Condensed.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Condensed.ttf") format("truetype"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: '72Condensed'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-CondensedBold.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-CondensedBold.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-CondensedBold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; } - -@font-face { - font-family: '72'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-Regular.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Regular.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Regular.ttf") format("truetype"); - font-weight: normal; - font-style: normal; } - -@font-face { - font-family: '72'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-Italic.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Italic.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Italic.ttf") format("truetype"); - font-weight: normal; - font-style: italic; } - -@font-face { - font-family: '72'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-Light.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Light.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Light.ttf") format("truetype"); - font-weight: 300; - font-style: normal; } - -@font-face { - font-family: '72'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-Bold.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Bold.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-Bold.ttf") format("truetype"); - font-weight: 700; - font-style: normal; } - -@font-face { - font-family: '72'; - src: url("../node_modules/fundamental-ui/dist/fonts/72/72-BoldItalic.woff2") format("woff2"), url("../node_modules/fundamental-ui/dist/fonts/72/72-BoldItalic.woff") format("woff"), url("../node_modules/fundamental-ui/dist/fonts/72/72-BoldItalic.ttf") format("truetype"); - font-weight: 700; - font-style: italic; } - -@font-face { - font-family: "SAP-icons"; - src: url("../node_modules/fundamental-ui/scss/icons/SAP-icons.woff") format("woff"); - font-weight: normal; - font-style: normal; } - -/* data attributes for inserting icons - My Account -*/ -/* class per icon */ -[class*="sap-icon"]::before { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - -.sap-icon--s::before, .sap-icon--small::before { - font-size: 0.85714rem; - line-height: 1; } - -.sap-icon--m::before, .sap-icon--medium::before { - font-size: 1.14286rem; - line-height: 1; } - -.sap-icon--l::before, .sap-icon--large::before { - font-size: 1.42857rem; - line-height: 1; } - -.sap-icon--xl::before, .sap-icon--xlarge::before { - font-size: 1.71429rem; - line-height: 1; } - -.sap-icon--accidental-leave::before { - content: ""; } - -.sap-icon--account::before { - content: ""; } - -.sap-icon--wrench::before { - content: ""; } - -.sap-icon--windows-doors::before { - content: ""; } - -.sap-icon--washing-machine::before { - content: ""; } - -.sap-icon--visits::before { - content: ""; } - -.sap-icon--video::before { - content: ""; } - -.sap-icon--travel-expense::before { - content: ""; } - -.sap-icon--temperature::before { - content: ""; } - -.sap-icon--task::before { - content: ""; } - -.sap-icon--synchronize::before { - content: ""; } - -.sap-icon--survey::before { - content: ""; } - -.sap-icon--settings::before { - content: ""; } - -.sap-icon--search::before { - content: ""; } - -.sap-icon--sales-document::before { - content: ""; } - -.sap-icon--retail-store::before { - content: ""; } - -.sap-icon--refresh::before { - content: ""; } - -.sap-icon--product::before { - content: ""; } - -.sap-icon--present::before { - content: ""; } - -.sap-icon--ppt-attachment::before { - content: ""; } - -.sap-icon--pool::before { - content: ""; } - -.sap-icon--pie-chart::before { - content: ""; } - -.sap-icon--picture::before { - content: ""; } - -.sap-icon--photo-voltaic::before { - content: ""; } - -.sap-icon--phone::before { - content: ""; } - -.sap-icon--pending::before { - content: ""; } - -.sap-icon--pdf-attachment::before { - content: ""; } - -.sap-icon--past::before { - content: ""; } - -.sap-icon--outgoing-call::before { - content: ""; } - -.sap-icon--opportunity::before { - content: ""; } - -.sap-icon--opportunities::before { - content: ""; } - -.sap-icon--notes::before { - content: ""; } - -.sap-icon--money-bills::before { - content: ""; } - -.sap-icon--map::before { - content: ""; } - -.sap-icon--log::before { - content: ""; } - -.sap-icon--line-charts::before { - content: ""; } - -.sap-icon--lightbulb::before { - content: ""; } - -.sap-icon--leads::before { - content: ""; } - -.sap-icon--lead::before { - content: ""; } - -.sap-icon--laptop::before { - content: ""; } - -.sap-icon--kpi-managing-my-area::before { - content: ""; } - -.sap-icon--kpi-corporate-performance::before { - content: ""; } - -.sap-icon--incoming-call::before { - content: ""; } - -.sap-icon--inbox::before { - content: ""; } - -.sap-icon--horizontal-bar-chart::before { - content: ""; } - -.sap-icon--history::before { - content: ""; } - -.sap-icon--heating-cooling::before { - content: ""; } - -.sap-icon--gantt-bars::before { - content: ""; } - -.sap-icon--future::before { - content: ""; } - -.sap-icon--fridge::before { - content: ""; } - -.sap-icon--fallback::before { - content: ""; } - -.sap-icon--expense-report::before { - content: ""; } - -.sap-icon--excel-attachment::before { - content: ""; } - -.sap-icon--energy-saving-lightbulb::before { - content: ""; } - -.sap-icon--employee::before { - content: ""; } - -.sap-icon--email::before { - content: ""; } - -.sap-icon--edit::before { - content: ""; } - -.sap-icon--duplicate::before { - content: ""; } - -.sap-icon--download::before { - content: ""; } - -.sap-icon--doc-attachment::before { - content: ""; } - -.sap-icon--dishwasher::before { - content: ""; } - -.sap-icon--delete::before { - content: ""; } - -.sap-icon--decline::before { - content: ""; } - -.sap-icon--complete::before { - content: ""; } - -.sap-icon--competitor::before { - content: ""; } - -.sap-icon--collections-management::before { - content: ""; } - -.sap-icon--chalkboard::before { - content: ""; } - -.sap-icon--cart::before { - content: ""; } - -.sap-icon--card::before { - content: ""; } - -.sap-icon--camera::before { - content: ""; } - -.sap-icon--calendar::before { - content: ""; } - -.sap-icon--begin::before { - content: ""; } - -.sap-icon--basket::before { - content: ""; } - -.sap-icon--bar-chart::before { - content: ""; } - -.sap-icon--attachment::before { - content: ""; } - -.sap-icon--arrow-top::before { - content: ""; } - -.sap-icon--arrow-right::before { - content: ""; } - -.sap-icon--arrow-left::before { - content: ""; } - -.sap-icon--arrow-bottom::before { - content: ""; } - -.sap-icon--approvals::before { - content: ""; } - -.sap-icon--appointment::before { - content: ""; } - -.sap-icon--alphabetical-order::before { - content: ""; } - -.sap-icon--along-stacked-chart::before { - content: ""; } - -.sap-icon--alert::before { - content: ""; } - -.sap-icon--addresses::before { - content: ""; } - -.sap-icon--address-book::before { - content: ""; } - -.sap-icon--add-filter::before { - content: ""; } - -.sap-icon--add-favorite::before { - content: ""; } - -.sap-icon--add::before { - content: ""; } - -.sap-icon--activities::before { - content: ""; } - -.sap-icon--action::before { - content: ""; } - -.sap-icon--accept::before { - content: ""; } - -.sap-icon--hint::before { - content: ""; } - -.sap-icon--group::before { - content: ""; } - -.sap-icon--check-availability::before { - content: ""; } - -.sap-icon--weather-proofing::before { - content: ""; } - -.sap-icon--payment-approval::before { - content: ""; } - -.sap-icon--batch-payments::before { - content: ""; } - -.sap-icon--bed::before { - content: ""; } - -.sap-icon--arobase::before { - content: ""; } - -.sap-icon--family-care::before { - content: ""; } - -.sap-icon--favorite::before { - content: ""; } - -.sap-icon--navigation-right-arrow::before { - content: ""; } - -.sap-icon--navigation-left-arrow::before { - content: ""; } - -.sap-icon--e-care::before { - content: ""; } - -.sap-icon--less::before { - content: ""; } - -.sap-icon--lateness::before { - content: ""; } - -.sap-icon--lab::before { - content: ""; } - -.sap-icon--internet-browser::before { - content: ""; } - -.sap-icon--instance::before { - content: ""; } - -.sap-icon--inspection::before { - content: ""; } - -.sap-icon--image-viewer::before { - content: ""; } - -.sap-icon--home::before { - content: ""; } - -.sap-icon--grid::before { - content: ""; } - -.sap-icon--goalseek::before { - content: ""; } - -.sap-icon--general-leave-request::before { - content: ""; } - -.sap-icon--create-leave-request::before { - content: ""; } - -.sap-icon--flight::before { - content: ""; } - -.sap-icon--filter::before { - content: ""; } - -.sap-icon--favorite-list::before { - content: ""; } - -.sap-icon--factory::before { - content: ""; } - -.sap-icon--endoscopy::before { - content: ""; } - -.sap-icon--employee-pane::before { - content: ""; } - -.sap-icon--employee-approvals::before { - content: ""; } - -.sap-icon--email-read::before { - content: ""; } - -.sap-icon--electrocardiogram::before { - content: ""; } - -.sap-icon--documents::before { - content: ""; } - -.sap-icon--decision::before { - content: ""; } - -.sap-icon--database::before { - content: ""; } - -.sap-icon--customer-history::before { - content: ""; } - -.sap-icon--customer::before { - content: ""; } - -.sap-icon--credit-card::before { - content: ""; } - -.sap-icon--create-entry-time::before { - content: ""; } - -.sap-icon--contacts::before { - content: ""; } - -.sap-icon--compare::before { - content: ""; } - -.sap-icon--clinical-order::before { - content: ""; } - -.sap-icon--chain-link::before { - content: ""; } - -.sap-icon--pull-down::before { - content: ""; } - -.sap-icon--cargo-train::before { - content: ""; } - -.sap-icon--car-rental::before { - content: ""; } - -.sap-icon--business-card::before { - content: ""; } - -.sap-icon--bar-code::before { - content: ""; } - -.sap-icon--folder-blank::before { - content: ""; } - -.sap-icon--passenger-train::before { - content: ""; } - -.sap-icon--question-mark::before { - content: ""; } - -.sap-icon--world::before { - content: ""; } - -.sap-icon--iphone::before { - content: ""; } - -.sap-icon--ipad::before { - content: ""; } - -.sap-icon--warning::before { - content: ""; } - -.sap-icon--sort::before { - content: ""; } - -.sap-icon--course-book::before { - content: ""; } - -.sap-icon--course-program::before { - content: ""; } - -.sap-icon--add-coursebook::before { - content: ""; } - -.sap-icon--print::before { - content: ""; } - -.sap-icon--save::before { - content: ""; } - -.sap-icon--play::before { - content: ""; } - -.sap-icon--pause::before { - content: ""; } - -.sap-icon--record::before { - content: ""; } - -.sap-icon--response::before { - content: ""; } - -.sap-icon--pushpin-on::before { - content: ""; } - -.sap-icon--pushpin-off::before { - content: ""; } - -.sap-icon--unfavorite::before { - content: ""; } - -.sap-icon--learning-assistant::before { - content: ""; } - -.sap-icon--timesheet::before { - content: ""; } - -.sap-icon--time-entry-request::before { - content: ""; } - -.sap-icon--list::before { - content: ""; } - -.sap-icon--action-settings::before { - content: ""; } - -.sap-icon--share::before { - content: ""; } - -.sap-icon--feed::before { - content: ""; } - -.sap-icon--role::before { - content: ""; } - -.sap-icon--flag::before { - content: ""; } - -.sap-icon--post::before { - content: ""; } - -.sap-icon--inspect::before { - content: ""; } - -.sap-icon--inspect-down::before { - content: ""; } - -.sap-icon--appointment-2::before { - content: ""; } - -.sap-icon--target-group::before { - content: ""; } - -.sap-icon--marketing-campaign::before { - content: ""; } - -.sap-icon--message-error::before { - content: ""; } - -.sap-icon--comment::before { - content: ""; } - -.sap-icon--shipping-status::before { - content: ""; } - -.sap-icon--collaborate::before { - content: ""; } - -.sap-icon--shortcut::before { - content: ""; } - -.sap-icon--lead-outdated::before { - content: ""; } - -.sap-icon--tools-opportunity::before { - content: ""; } - -.sap-icon--permission::before { - content: ""; } - -.sap-icon--supplier::before { - content: ""; } - -.sap-icon--table-view::before { - content: ""; } - -.sap-icon--table-chart::before { - content: ""; } - -.sap-icon--switch-views::before { - content: ""; } - -.sap-icon--e-learning::before { - content: ""; } - -.sap-icon--manager::before { - content: ""; } - -.sap-icon--switch-classes::before { - content: ""; } - -.sap-icon--simple-payment::before { - content: ""; } - -.sap-icon--signature::before { - content: ""; } - -.sap-icon--sales-order-item::before { - content: ""; } - -.sap-icon--sales-order::before { - content: ""; } - -.sap-icon--request::before { - content: ""; } - -.sap-icon--receipt::before { - content: ""; } - -.sap-icon--puzzle::before { - content: ""; } - -.sap-icon--process::before { - content: ""; } - -.sap-icon--private::before { - content: ""; } - -.sap-icon--popup-window::before { - content: ""; } - -.sap-icon--person-placeholder::before { - content: ""; } - -.sap-icon--per-diem::before { - content: ""; } - -.sap-icon--paper-plane::before { - content: ""; } - -.sap-icon--paid-leave::before { - content: ""; } - -.sap-icon--pdf-reader::before { - content: ""; } - -.sap-icon--overview-chart::before { - content: ""; } - -.sap-icon--overlay::before { - content: ""; } - -.sap-icon--org-chart::before { - content: ""; } - -.sap-icon--number-sign::before { - content: ""; } - -.sap-icon--notification-2::before { - content: ""; } - -.sap-icon--my-sales-order::before { - content: ""; } - -.sap-icon--meal::before { - content: ""; } - -.sap-icon--loan::before { - content: ""; } - -.sap-icon--order-status::before { - content: ""; } - -.sap-icon--customer-order-entry::before { - content: ""; } - -.sap-icon--performance::before { - content: ""; } - -.sap-icon--menu::before { - content: ""; } - -.sap-icon--employee-lookup::before { - content: ""; } - -.sap-icon--education::before { - content: ""; } - -.sap-icon--customer-briefing::before { - content: ""; } - -.sap-icon--customer-and-contacts::before { - content: ""; } - -.sap-icon--my-view::before { - content: ""; } - -.sap-icon--accelerated::before { - content: ""; } - -.sap-icon--to-be-reviewed::before { - content: ""; } - -.sap-icon--warning2::before { - content: ""; } - -.sap-icon--feeder-arrow::before { - content: ""; } - -.sap-icon--quality-issue::before { - content: ""; } - -.sap-icon--workflow-tasks::before { - content: ""; } - -.sap-icon--create::before { - content: ""; } - -.sap-icon--home-share::before { - content: ""; } - -.sap-icon--globe::before { - content: ""; } - -.sap-icon--tags::before { - content: ""; } - -.sap-icon--work-history::before { - content: ""; } - -.sap-icon--x-ray::before { - content: ""; } - -.sap-icon--wounds-doc::before { - content: ""; } - -.sap-icon--web-cam::before { - content: ""; } - -.sap-icon--waiver::before { - content: ""; } - -.sap-icon--vertical-bar-chart::before { - content: ""; } - -.sap-icon--upstacked-chart::before { - content: ""; } - -.sap-icon--trip-report::before { - content: ""; } - -.sap-icon--microphone::before { - content: ""; } - -.sap-icon--unpaid-leave::before { - content: ""; } - -.sap-icon--tree::before { - content: ""; } - -.sap-icon--toaster-up::before { - content: ""; } - -.sap-icon--toaster-top::before { - content: ""; } - -.sap-icon--toaster-down::before { - content: ""; } - -.sap-icon--time-account::before { - content: ""; } - -.sap-icon--theater::before { - content: ""; } - -.sap-icon--taxi::before { - content: ""; } - -.sap-icon--subway-train::before { - content: ""; } - -.sap-icon--study-leave::before { - content: ""; } - -.sap-icon--stethoscope::before { - content: ""; } - -.sap-icon--step::before { - content: ""; } - -.sap-icon--sonography::before { - content: ""; } - -.sap-icon--soccor::before { - content: ""; } - -.sap-icon--physical-activity::before { - content: ""; } - -.sap-icon--pharmacy::before { - content: ""; } - -.sap-icon--official-service::before { - content: ""; } - -.sap-icon--offsite-work::before { - content: ""; } - -.sap-icon--nutrition-activity::before { - content: ""; } - -.sap-icon--newspaper::before { - content: ""; } - -.sap-icon--monitor-payments::before { - content: ""; } - -.sap-icon--map-2::before { - content: ""; } - -.sap-icon--machine::before { - content: ""; } - -.sap-icon--mri-scan::before { - content: ""; } - -.sap-icon--end-user-experience-monitoring::before { - content: ""; } - -.sap-icon--unwired::before { - content: ""; } - -.sap-icon--customer-financial-fact-sheet::before { - content: ""; } - -.sap-icon--retail-store-manager::before { - content: ""; } - -.sap-icon--Netweaver-business-client::before { - content: ""; } - -.sap-icon--electronic-medical-record::before { - content: ""; } - -.sap-icon--eam-work-order::before { - content: ""; } - -.sap-icon--customer-view::before { - content: ""; } - -.sap-icon--crm-service-manager::before { - content: ""; } - -.sap-icon--crm-sales::before { - content: ""; } - -.sap-icon--widgets::before { - content: ""; } - -.sap-icon--commission-check::before { - content: ""; } - -.sap-icon--collections-insight::before { - content: ""; } - -.sap-icon--clinical-tast-tracker::before { - content: ""; } - -.sap-icon--citizen-connect::before { - content: ""; } - -.sap-icon--cart-approval::before { - content: ""; } - -.sap-icon--capital-projects::before { - content: ""; } - -.sap-icon--bo-strategy-management::before { - content: ""; } - -.sap-icon--business-objects-mobile::before { - content: ""; } - -.sap-icon--business-objects-explorer::before { - content: ""; } - -.sap-icon--business-objects-experience::before { - content: ""; } - -.sap-icon--bbyd-dashboard::before { - content: ""; } - -.sap-icon--bbyd-active-sales::before { - content: ""; } - -.sap-icon--business-by-design::before { - content: ""; } - -.sap-icon--business-one::before { - content: ""; } - -.sap-icon--sap-box::before { - content: ""; } - -.sap-icon--manager-insight::before { - content: ""; } - -.sap-icon--accounting-document-verification::before { - content: ""; } - -.sap-icon--hr-approval::before { - content: ""; } - -.sap-icon--idea-wall::before { - content: ""; } - -.sap-icon--Chart-Tree-Map::before { - content: ""; } - -.sap-icon--cart-5::before { - content: ""; } - -.sap-icon--cart-4::before { - content: ""; } - -.sap-icon--wallet::before { - content: ""; } - -.sap-icon--vehicle-repair::before { - content: ""; } - -.sap-icon--upload::before { - content: ""; } - -.sap-icon--unlocked::before { - content: ""; } - -.sap-icon--umbrella::before { - content: ""; } - -.sap-icon--travel-request::before { - content: ""; } - -.sap-icon--travel-expense-report::before { - content: ""; } - -.sap-icon--travel-itinerary::before { - content: ""; } - -.sap-icon--time-overtime::before { - content: ""; } - -.sap-icon--thing-type::before { - content: ""; } - -.sap-icon--technical-object::before { - content: ""; } - -.sap-icon--tag::before { - content: ""; } - -.sap-icon--syringe::before { - content: ""; } - -.sap-icon--syntax::before { - content: ""; } - -.sap-icon--suitcase::before { - content: ""; } - -.sap-icon--simulate::before { - content: ""; } - -.sap-icon--shield::before { - content: ""; } - -.sap-icon--share-2::before { - content: ""; } - -.sap-icon--sales-quote::before { - content: ""; } - -.sap-icon--repost::before { - content: ""; } - -.sap-icon--provision::before { - content: ""; } - -.sap-icon--projector::before { - content: ""; } - -.sap-icon--add-product::before { - content: ""; } - -.sap-icon--pipeline-analysis::before { - content: ""; } - -.sap-icon--add-photo::before { - content: ""; } - -.sap-icon--palette::before { - content: ""; } - -.sap-icon--nurse::before { - content: ""; } - -.sap-icon--sales-notification::before { - content: ""; } - -.sap-icon--mileage::before { - content: ""; } - -.sap-icon--meeting-room::before { - content: ""; } - -.sap-icon--media-forward::before { - content: ""; } - -.sap-icon--media-play::before { - content: ""; } - -.sap-icon--media-pause::before { - content: ""; } - -.sap-icon--media-reverse::before { - content: ""; } - -.sap-icon--media-rewind::before { - content: ""; } - -.sap-icon--measurement-document::before { - content: ""; } - -.sap-icon--measuring-point::before { - content: ""; } - -.sap-icon--measure::before { - content: ""; } - -.sap-icon--map-3::before { - content: ""; } - -.sap-icon--locked::before { - content: ""; } - -.sap-icon--letter::before { - content: ""; } - -.sap-icon--journey-arrive::before { - content: ""; } - -.sap-icon--journey-change::before { - content: ""; } - -.sap-icon--journey-depart::before { - content: ""; } - -.sap-icon--it-system::before { - content: ""; } - -.sap-icon--it-instance::before { - content: ""; } - -.sap-icon--it-host::before { - content: ""; } - -.sap-icon--iphone-2::before { - content: ""; } - -.sap-icon--ipad-2::before { - content: ""; } - -.sap-icon--inventory::before { - content: ""; } - -.sap-icon--insurance-house::before { - content: ""; } - -.sap-icon--insurance-life::before { - content: ""; } - -.sap-icon--insurance-car::before { - content: ""; } - -.sap-icon--initiative::before { - content: ""; } - -.sap-icon--incident::before { - content: ""; } - -.sap-icon--group-2::before { - content: ""; } - -.sap-icon--goal::before { - content: ""; } - -.sap-icon--functional-location::before { - content: ""; } - -.sap-icon--full-screen::before { - content: ""; } - -.sap-icon--form::before { - content: ""; } - -.sap-icon--fob-watch::before { - content: ""; } - -.sap-icon--blank-tag::before { - content: ""; } - -.sap-icon--family-protection::before { - content: ""; } - -.sap-icon--folder::before { - content: ""; } - -.sap-icon--fax-machine::before { - content: ""; } - -.sap-icon--example::before { - content: ""; } - -.sap-icon--eraser::before { - content: ""; } - -.sap-icon--employee-rejections::before { - content: ""; } - -.sap-icon--drop-down-list::before { - content: ""; } - -.sap-icon--draw-rectangle::before { - content: ""; } - -.sap-icon--document::before { - content: ""; } - -.sap-icon--doctor::before { - content: ""; } - -.sap-icon--discussion-2::before { - content: ""; } - -.sap-icon--discussion::before { - content: ""; } - -.sap-icon--dimension::before { - content: ""; } - -.sap-icon--customer-and-supplier::before { - content: ""; } - -.sap-icon--crop::before { - content: ""; } - -.sap-icon--add-contact::before { - content: ""; } - -.sap-icon--compare-2::before { - content: ""; } - -.sap-icon--color-fill::before { - content: ""; } - -.sap-icon--collision::before { - content: ""; } - -.sap-icon--curriculum::before { - content: ""; } - -.sap-icon--chart-axis::before { - content: ""; } - -.sap-icon--full-stacked-chart::before { - content: ""; } - -.sap-icon--full-stacked-column-chart::before { - content: ""; } - -.sap-icon--vertical-bar-chart-2::before { - content: ""; } - -.sap-icon--horizontal-bar-chart-2::before { - content: ""; } - -.sap-icon--horizontal-stacked-chart::before { - content: ""; } - -.sap-icon--vertical-stacked-chart::before { - content: ""; } - -.sap-icon--choropleth-chart::before { - content: ""; } - -.sap-icon--geographic-bubble-chart::before { - content: ""; } - -.sap-icon--multiple-radar-chart::before { - content: ""; } - -.sap-icon--radar-chart::before { - content: ""; } - -.sap-icon--crossed-line-chart::before { - content: ""; } - -.sap-icon--multiple-line-chart::before { - content: ""; } - -.sap-icon--multiple-bar-chart::before { - content: ""; } - -.sap-icon--line-chart::before { - content: ""; } - -.sap-icon--line-chart-dual-axis::before { - content: ""; } - -.sap-icon--bubble-chart::before { - content: ""; } - -.sap-icon--scatter-chart::before { - content: ""; } - -.sap-icon--multiple-pie-chart::before { - content: ""; } - -.sap-icon--column-chart-dual-axis::before { - content: ""; } - -.sap-icon--tag-cloud-chart::before { - content: ""; } - -.sap-icon--area-chart::before { - content: ""; } - -.sap-icon--cause::before { - content: ""; } - -.sap-icon--cart-3::before { - content: ""; } - -.sap-icon--cart-2::before { - content: ""; } - -.sap-icon--bus-public-transport::before { - content: ""; } - -.sap-icon--burglary::before { - content: ""; } - -.sap-icon--building::before { - content: ""; } - -.sap-icon--border::before { - content: ""; } - -.sap-icon--bookmark::before { - content: ""; } - -.sap-icon--badge::before { - content: ""; } - -.sap-icon--attachment-audio::before { - content: ""; } - -.sap-icon--attachment-video::before { - content: ""; } - -.sap-icon--attachment-html::before { - content: ""; } - -.sap-icon--attachment-photo::before { - content: ""; } - -.sap-icon--attachment-e-pub::before { - content: ""; } - -.sap-icon--attachment-zip-file::before { - content: ""; } - -.sap-icon--attachment-text-file::before { - content: ""; } - -.sap-icon--add-equipment::before { - content: ""; } - -.sap-icon--add-activity::before { - content: ""; } - -.sap-icon--activity-individual::before { - content: ""; } - -.sap-icon--activity-2::before { - content: ""; } - -.sap-icon--add-activity-2::before { - content: ""; } - -.sap-icon--activity-items::before { - content: ""; } - -.sap-icon--activity-assigned-to-goal::before { - content: ""; } - -.sap-icon--status-positive::before { - content: ""; } - -.sap-icon--status-negative::before { - content: ""; } - -.sap-icon--status-inactive::before { - content: ""; } - -.sap-icon--status-critical::before { - content: ""; } - -.sap-icon--blank-tag-2::before { - content: ""; } - -.sap-icon--cart-full::before { - content: ""; } - -.sap-icon--locate-me::before { - content: ""; } - -.sap-icon--paging::before { - content: ""; } - -.sap-icon--company-view::before { - content: ""; } - -.sap-icon--document-text::before { - content: ""; } - -.sap-icon--explorer::before { - content: ""; } - -.sap-icon--personnel-view::before { - content: ""; } - -.sap-icon--sorting-ranking::before { - content: ""; } - -.sap-icon--drill-down::before { - content: ""; } - -.sap-icon--drill-up::before { - content: ""; } - -.sap-icon--vds-file::before { - content: ""; } - -.sap-icon--sap-logo-shape::before { - content: ""; } - -.sap-icon--folder-full::before { - content: ""; } - -.sap-icon--system-exit::before { - content: ""; } - -.sap-icon--system-exit-2::before { - content: ""; } - -.sap-icon--close-command-field::before { - content: ""; } - -.sap-icon--open-command-field::before { - content: ""; } - -.sap-icon--sys-enter-2::before { - content: ""; } - -.sap-icon--sys-enter::before { - content: ""; } - -.sap-icon--sys-help-2::before { - content: ""; } - -.sap-icon--sys-help::before { - content: ""; } - -.sap-icon--sys-back::before { - content: ""; } - -.sap-icon--sys-back-2::before { - content: ""; } - -.sap-icon--sys-cancel::before { - content: ""; } - -.sap-icon--sys-cancel-2::before { - content: ""; } - -.sap-icon--open-folder::before { - content: ""; } - -.sap-icon--sys-find-next::before { - content: ""; } - -.sap-icon--sys-find::before { - content: ""; } - -.sap-icon--sys-monitor::before { - content: ""; } - -.sap-icon--sys-prev-page::before { - content: ""; } - -.sap-icon--sys-first-page::before { - content: ""; } - -.sap-icon--sys-next-page::before { - content: ""; } - -.sap-icon--sys-last-page::before { - content: ""; } - -.sap-icon--generate-shortcut::before { - content: ""; } - -.sap-icon--create-session::before { - content: ""; } - -.sap-icon--display-more::before { - content: ""; } - -.sap-icon--enter-more::before { - content: ""; } - -.sap-icon--zoom-in::before { - content: ""; } - -.sap-icon--zoom-out::before { - content: ""; } - -.sap-icon--header::before { - content: ""; } - -.sap-icon--detail-view::before { - content: ""; } - -.sap-icon--collapse::before { - content: ""; } - -.sap-icon--expand::before { - content: ""; } - -.sap-icon--positive::before { - content: ""; } - -.sap-icon--negative::before { - content: ""; } - -.sap-icon--display::before { - content: ""; } - -.sap-icon--menu2::before { - content: ""; } - -.sap-icon--redo::before { - content: ""; } - -.sap-icon--undo::before { - content: ""; } - -.sap-icon--navigation-up-arrow::before { - content: ""; } - -.sap-icon--navigation-down-arrow::before { - content: ""; } - -.sap-icon--down::before { - content: ""; } - -.sap-icon--up::before { - content: ""; } - -.sap-icon--shelf::before { - content: ""; } - -.sap-icon--background::before { - content: ""; } - -.sap-icon--resize::before { - content: ""; } - -.sap-icon--move::before { - content: ""; } - -.sap-icon--show::before { - content: ""; } - -.sap-icon--hide::before { - content: ""; } - -.sap-icon--nav-back::before { - content: ""; } - -.sap-icon--error::before { - content: ""; } - -.sap-icon--slim-arrow-right::before { - content: ""; } - -.sap-icon--slim-arrow-left::before { - content: ""; } - -.sap-icon--slim-arrow-down::before { - content: ""; } - -.sap-icon--slim-arrow-up::before { - content: ""; } - -.sap-icon--forward::before { - content: ""; } - -.sap-icon--overflow::before { - content: ""; } - -.sap-icon--value-help::before { - content: ""; } - -.sap-icon--multiselect::before { - content: ""; } - -.sap-icon--exitfullscreen::before { - content: ""; } - -.sap-icon--sys-add::before { - content: ""; } - -.sap-icon--sys-minus::before { - content: ""; } - -.sap-icon--dropdown::before { - content: ""; } - -.sap-icon--expand-group::before { - content: ""; } - -.sap-icon--vertical-grip::before { - content: ""; } - -.sap-icon--horizontal-grip::before { - content: ""; } - -.sap-icon--sort-descending::before { - content: ""; } - -.sap-icon--sort-ascending::before { - content: ""; } - -.sap-icon--arrow-down::before { - content: ""; } - -.sap-icon--legend::before { - content: ""; } - -.sap-icon--collapse-group::before { - content: ""; } - -.sap-icon--message-warning::before { - content: ""; } - -.sap-icon--message-information::before { - content: ""; } - -.sap-icon--message-success::before { - content: ""; } - -.sap-icon--restart::before { - content: ""; } - -.sap-icon--stop::before { - content: ""; } - -.sap-icon--add-process::before { - content: ""; } - -.sap-icon--cancel-maintenance::before { - content: ""; } - -.sap-icon--activate::before { - content: ""; } - -.sap-icon--resize-horizontal::before { - content: ""; } - -.sap-icon--resize-vertical::before { - content: ""; } - -.sap-icon--connected::before { - content: ""; } - -.sap-icon--disconnected::before { - content: ""; } - -.sap-icon--edit-outside::before { - content: ""; } - -.sap-icon--key::before { - content: ""; } - -.sap-icon--minimize::before { - content: ""; } - -.sap-icon--back-to-top::before { - content: ""; } - -.sap-icon--hello-world::before { - content: ""; } - -.sap-icon--outbox::before { - content: ""; } - -.sap-icon--donut-chart::before { - content: ""; } - -.sap-icon--heatmap-chart::before { - content: ""; } - -.sap-icon--horizontal-bullet-chart::before { - content: ""; } - -.sap-icon--vertical-bullet-chart::before { - content: ""; } - -.sap-icon--call::before { - content: ""; } - -.sap-icon--download-from-cloud::before { - content: ""; } - -.sap-icon--upload-to-cloud::before { - content: ""; } - -.sap-icon--jam::before { - content: ""; } - -.sap-icon--sap-ui5::before { - content: ""; } - -.sap-icon--message-popup::before { - content: ""; } - -.sap-icon--cloud::before { - content: ""; } - -.sap-icon--horizontal-waterfall-chart::before { - content: ""; } - -.sap-icon--vertical-waterfall-chart::before { - content: ""; } - -.sap-icon--broken-link::before { - content: ""; } - -.sap-icon--headset::before { - content: ""; } - -.sap-icon--thumb-up::before { - content: ""; } - -.sap-icon--thumb-down::before { - content: ""; } - -.sap-icon--multiselect-all::before { - content: ""; } - -.sap-icon--multiselect-none::before { - content: ""; } - -.sap-icon--scissors::before { - content: ""; } - -.sap-icon--sound::before { - content: ""; } - -.sap-icon--sound-loud::before { - content: ""; } - -.sap-icon--sound-off::before { - content: ""; } - -.sap-icon--date-time::before { - content: ""; } - -.sap-icon--user-settings::before { - content: ""; } - -.sap-icon--key-user-settings::before { - content: ""; } - -.sap-icon--developer-settings::before { - content: ""; } - -.sap-icon--text-formatting::before { - content: ""; } - -.sap-icon--bold-text::before { - content: ""; } - -.sap-icon--italic-text::before { - content: ""; } - -.sap-icon--underline-text::before { - content: ""; } - -.sap-icon--text-align-justified::before { - content: ""; } - -.sap-icon--text-align-left::before { - content: ""; } - -.sap-icon--text-align-center::before { - content: ""; } - -.sap-icon--text-align-right::before { - content: ""; } - -.sap-icon--bullet-text::before { - content: ""; } - -.sap-icon--numbered-text::before { - content: ""; } - -.sap-icon--co::before { - content: ""; } - -.sap-icon--ui-notifications::before { - content: ""; } - -.sap-icon--bell::before { - content: ""; } - -.sap-icon--cancel-share::before { - content: ""; } - -.sap-icon--write-new-document::before { - content: ""; } - -.sap-icon--write-new::before { - content: ""; } - -.sap-icon--cancel::before { - content: ""; } - -.sap-icon--screen-split-one::before { - content: ""; } - -.sap-icon--screen-split-two::before { - content: ""; } - -.sap-icon--screen-split-three::before { - content: ""; } - -.sap-icon--customize::before { - content: ""; } - -.sap-icon--user-edit::before { - content: ""; } - -.sap-icon--source-code::before { - content: ""; } - -.sap-icon--copy::before { - content: ""; } - -.sap-icon--paste::before { - content: ""; } - -.sap-icon--line-chart-time-axis::before { - content: ""; } - -.sap-icon--clear-filter::before { - content: ""; } - -.sap-icon--reset::before { - content: ""; } - -.sap-icon--trend-up::before { - content: ""; } - -.sap-icon--trend-down::before { - content: ""; } - -.sap-icon--cursor::before { - content: ""; } - -.sap-icon--add-document::before { - content: ""; } - -.sap-icon--create-form::before { - content: ""; } - -.sap-icon--resize-corner::before { - content: ""; } - -.sap-icon--chevron-phase::before { - content: ""; } - -.sap-icon--chevron-phase-2::before { - content: ""; } - -.sap-icon--rhombus-milestone::before { - content: ""; } - -.sap-icon--rhombus-milestone-2::before { - content: ""; } - -.sap-icon--circle-task::before { - content: ""; } - -.sap-icon--circle-task-2::before { - content: ""; } - -.sap-icon--project-definition-triangle::before { - content: ""; } - -.sap-icon--project-definition-triangle-2::before { - content: ""; } - -.sap-icon--master-task-triangle::before { - content: ""; } - -.sap-icon--master-task-triangle-2::before { - content: ""; } - -.sap-icon--program-triangles::before { - content: ""; } - -.sap-icon--program-triangles-2::before { - content: ""; } - -.sap-icon--mirrored-task-circle::before { - content: ""; } - -.sap-icon--mirrored-task-circle-2::before { - content: ""; } - -.sap-icon--checklist-item::before { - content: ""; } - -.sap-icon--checklist-item-2::before { - content: ""; } - -.sap-icon--checklist::before { - content: ""; } - -.sap-icon--checklist-2::before { - content: ""; } - -.sap-icon--chart-table-view::before { - content: ""; } - -.sap-icon--filter-analytics::before { - content: ""; } - -.sap-icon--filter-facets::before { - content: ""; } - -.sap-icon--filter-fields::before { - content: ""; } - -.sap-icon--indent::before { - content: ""; } - -.sap-icon--outdent::before { - content: ""; } - -.sap-icon--heading-1::before { - content: ""; } - -.sap-icon--heading-2::before { - content: ""; } - -.sap-icon--heading-3::before { - content: ""; } - -.sap-icon--decrease-line-height::before { - content: ""; } - -.sap-icon--increase-line-height::before { - content: ""; } - -:root { - --color-action-1: map-get($fd-colors-action, 1); - --color-text-1: map-get($fd-colors-text, 1); - --color-text-2: map-get($fd-colors-text, 2); - --color-text-3: map-get($fd-colors-text, 3); - --color-text-inverse-1: map-get($fd-colors-text-inverse, 1); - --color-text-inverse-2: map-get($fd-colors-text-inverse, 2); - --color-text-inverse-3: map-get($fd-colors-text-inverse, 3); - --color-background-1: map-get($fd-colors-background, 1); - --color-background-2: map-get($fd-colors-background, 2); - --color-neutral-1: map-get($fd-colors-neutral, 1); - --color-neutral-2: map-get($fd-colors-neutral, 2); - --color-neutral-3: map-get($fd-colors-neutral, 3); - --color-status-1: map-get($fd-colors-status, 1); - --color-status-2: map-get($fd-colors-status, 2); - --color-status-3: map-get($fd-colors-status, 3); - --color-accent-1: map-get($fd-colors-status, 1); - --color-accent-2: map-get($fd-colors-status, 2); - --color-accent-3: map-get($fd-colors-status, 3); - --color-accent-4: map-get($fd-colors-status, 4); - --color-accent-5: map-get($fd-colors-status, 5); - --color-accent-6: map-get($fd-colors-status, 6); - --color-accent-7: map-get($fd-colors-status, 7); - --color-accent-8: map-get($fd-colors-status, 8); - --color-accent-9: map-get($fd-colors-status, 9); } - -/*! -* @section Root Element -* Default styles for root elements -*/ -html { - box-sizing: border-box; - min-height: 100%; } - -html, -body { - font-size: 14px; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - line-height: 1.42857; } - -* { - box-sizing: inherit; } - *::before, *::after { - box-sizing: inherit; } - -body { - margin: 0; - background-color: #f3f4f5; - -webkit-font-smoothing: antialiased; - color: #32363a; } - -/** -* @section Header Elements -* Default styles for header elements -*/ -h1, h2, h3, h4, h5, h6 { - text-rendering: optimizeLegibility; - margin-bottom: 12px; - margin-top: 0; } - -/*! -* @section Block Elements -* Default styles for block elements -*/ -p, ul, ol, blockquote, table, figure { - margin-top: 0; - margin-bottom: 12px; } - p:last-child, ul:last-child, ol:last-child, blockquote:last-child, table:last-child, figure:last-child { - margin-bottom: 0; } - -/*! -* @section List Elements -* Default styles for lists -*/ -ul, ol { - padding-left: 0; } - -/*! -* @section Phrases Elements -* Default styles for phrase elements -*/ -img { - line-height: 0; - vertical-align: middle; } - -a { - text-decoration: none; - display: inline-block; - transition: all 0.125s ease-in; - color: #0a6ed1; } - a:hover { - color: #085caf; } - a:active, a[aria-selected="true"], a.is-selected, a[aria-pressed="true"], a.is-pressed, a:focus { - color: #0854a0; - outline: none; } - a[aria-disabled="true"], a.is-disabled { - color: rgba(10, 110, 209, 0.4); - cursor: not-allowed; } - -pre, -code { - font-family: monospace; } - -/*! -* @section Button Elements -* Default styles for button elements -*/ -button::-moz-focus-inner, -input[type="submit"]::-moz-focus-inner { - border: 0; - padding: 0; } - -input[type=radio], input[type=checkbox] { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - appearance: none; - -webkit-appearance: textfield; - -moz-appearance: textfield; - font-size: inherit; - box-sizing: border-box; - outline: none; - border-style: solid; - border-width: 1px; - border-color: #dededf; - border-radius: 4px; - color: #32363a; - background-color: transparent; - transition: border-color 0.125s; - transition: border-color 0.125s ease-in, background-color 0.125s ease-in, background-image 0.125s ease-in; } - input:focus[type=radio], input:focus[type=checkbox], input:hover[type=radio], input:hover[type=checkbox] { - border-color: #0a6ed1; } - input.is-invalid[type=radio], input.is-invalid[type=checkbox] { - border-color: #ee0000; } - input.is-valid[type=radio], input.is-valid[type=checkbox] { - border-color: #359c46; } - input.is-warning[type=radio], input.is-warning[type=checkbox] { - border-color: #f59518; } - input:disabled[type=radio], input:disabled[type=checkbox], input[aria-disabled="true"][type=radio], input[aria-disabled="true"][type=checkbox], input.is-disabled[type=radio], input.is-disabled[type=checkbox] { - cursor: not-allowed; - color: #6f7275; - border-color: #ebebec; - background-color: #fafafa; } - input[readonly][type=radio], input[readonly][type=checkbox], input.is-readonly[type=radio], input.is-readonly[type=checkbox] { - color: #32363a; - border-color: #ebebec; - border-width: 0 0 1px; - border-radius: 0; } - input[type=radio]::after, input[type=checkbox]::after { - transition: border-color 0.125s ease-in; } - input[type=radio]::placeholder, input[type=checkbox]::placeholder { - color: #6f7275; } - -fieldset { - border: 0; - padding: 0; - margin: 0; } - -input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], -textarea { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - appearance: none; - -webkit-appearance: textfield; - -moz-appearance: textfield; - font-size: inherit; - box-sizing: border-box; - outline: none; - border-style: solid; - border-width: 1px; - border-color: #dededf; - border-radius: 4px; - color: #32363a; - background-color: transparent; - transition: border-color 0.125s; - height: 36px; - padding-left: 16px; - padding-right: 16px; - width: 100%; } - input[type=text]:focus, input[type=text]:hover, input[type=password]:focus, input[type=password]:hover, input[type=email]:focus, input[type=email]:hover, input[type=url]:focus, input[type=url]:hover, input[type=search]:focus, input[type=search]:hover, input[type=tel]:focus, input[type=tel]:hover, input[type=number]:focus, input[type=number]:hover, input[type=date]:focus, input[type=date]:hover, - textarea:focus, - textarea:hover { - border-color: #0a6ed1; } - input[type=text].is-invalid, input[type=password].is-invalid, input[type=email].is-invalid, input[type=url].is-invalid, input[type=search].is-invalid, input[type=tel].is-invalid, input[type=number].is-invalid, input[type=date].is-invalid, - textarea.is-invalid { - border-color: #ee0000; } - input[type=text].is-valid, input[type=password].is-valid, input[type=email].is-valid, input[type=url].is-valid, input[type=search].is-valid, input[type=tel].is-valid, input[type=number].is-valid, input[type=date].is-valid, - textarea.is-valid { - border-color: #359c46; } - input[type=text].is-warning, input[type=password].is-warning, input[type=email].is-warning, input[type=url].is-warning, input[type=search].is-warning, input[type=tel].is-warning, input[type=number].is-warning, input[type=date].is-warning, - textarea.is-warning { - border-color: #f59518; } - input[type=text]:disabled, input[type=text][aria-disabled="true"], input[type=text].is-disabled, input[type=password]:disabled, input[type=password][aria-disabled="true"], input[type=password].is-disabled, input[type=email]:disabled, input[type=email][aria-disabled="true"], input[type=email].is-disabled, input[type=url]:disabled, input[type=url][aria-disabled="true"], input[type=url].is-disabled, input[type=search]:disabled, input[type=search][aria-disabled="true"], input[type=search].is-disabled, input[type=tel]:disabled, input[type=tel][aria-disabled="true"], input[type=tel].is-disabled, input[type=number]:disabled, input[type=number][aria-disabled="true"], input[type=number].is-disabled, input[type=date]:disabled, input[type=date][aria-disabled="true"], input[type=date].is-disabled, - textarea:disabled, - textarea[aria-disabled="true"], - textarea.is-disabled { - cursor: not-allowed; - color: #6f7275; - border-color: #ebebec; - background-color: #fafafa; } - input[type=text][readonly], input[type=text].is-readonly, input[type=password][readonly], input[type=password].is-readonly, input[type=email][readonly], input[type=email].is-readonly, input[type=url][readonly], input[type=url].is-readonly, input[type=search][readonly], input[type=search].is-readonly, input[type=tel][readonly], input[type=tel].is-readonly, input[type=number][readonly], input[type=number].is-readonly, input[type=date][readonly], input[type=date].is-readonly, - textarea[readonly], - textarea.is-readonly { - color: #32363a; - border-color: #ebebec; - border-width: 0 0 1px; - border-radius: 0; } - -textarea { - height: 72px; - padding-top: 16px; } - -select { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - appearance: none; - -webkit-appearance: textfield; - -moz-appearance: textfield; - font-size: inherit; - box-sizing: border-box; - outline: none; - border-style: solid; - border-width: 1px; - border-color: #dededf; - border-radius: 4px; - color: #32363a; - background-color: transparent; - transition: border-color 0.125s; - height: 36px; - padding-left: 16px; - padding-right: 16px; - appearance: none; - -moz-appearance: none; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMyMTI2MkMiIGQ9Ik0xMS45MzUgMS40NzVMNi4xODggNy45MjdhLjI2NC4yNjQgMCAwIDEtLjM3OCAwTC4wNjUgMS40NzVhLjIzNi4yMzYgMCAwIDEgLjAyNi0uMzQzTDEuMzgxLjA1OGEuMjUzLjI1MyAwIDAgMSAuMTYzLS4wNTlMMS41NjMgMGEuMjUyLjI1MiAwIDAgMSAuMTcxLjA4NWw0LjI2NSA0Ljg4IDQuMjY3LTQuODhhLjI1Mi4yNTIgMCAwIDEgLjM1Mi0uMDI3bDEuMjkxIDEuMDc0Yy4wNS4wNDIuMDgxLjEwMi4wODYuMTY2YS4yMzYuMjM2IDAgMCAxLS4wNi4xNzd6Ii8+PC9zdmc+); - background-repeat: no-repeat; - background-position: calc(100% - 12px) center; - padding-right: 44px; - width: 100%; } - select:focus, select:hover { - border-color: #0a6ed1; } - select.is-invalid { - border-color: #ee0000; } - select.is-valid { - border-color: #359c46; } - select.is-warning { - border-color: #f59518; } - select:disabled, select[aria-disabled="true"], select.is-disabled { - cursor: not-allowed; - color: #6f7275; - border-color: #ebebec; - background-color: #fafafa; } - select[readonly], select.is-readonly { - color: #32363a; - border-color: #ebebec; - border-width: 0 0 1px; - border-radius: 0; } - select:focus, select:hover { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMDhGRDIiIGQ9Ik0xMS45MzUgMS40NzVMNi4xODggNy45MjdhLjI2NC4yNjQgMCAwIDEtLjM3OCAwTC4wNjUgMS40NzVhLjIzNi4yMzYgMCAwIDEgLjAyNi0uMzQzTDEuMzgxLjA1OGEuMjUzLjI1MyAwIDAgMSAuMTYzLS4wNTlMMS41NjMgMGEuMjUyLjI1MiAwIDAgMSAuMTcxLjA4NWw0LjI2NSA0Ljg4IDQuMjY3LTQuODhhLjI1Mi4yNTIgMCAwIDEgLjM1Mi0uMDI3bDEuMjkxIDEuMDc0Yy4wNS4wNDIuMDgxLjEwMi4wODYuMTY2YS4yMzYuMjM2IDAgMCAxLS4wNi4xNzd6Ii8+PC9zdmc+); } - select[aria-expanded="true"], select.is-expanded { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMDhGRDIiIGQ9Ik0xMS45MzUgNi41M0w2LjE4OC4xMDRhLjI2NC4yNjQgMCAwIDAtLjM3OCAwTC4wNjUgNi41M2EuMjQuMjQgMCAwIDAtLjA2MS4xNzcuMjM3LjIzNyAwIDAgMCAuMDg3LjE2NWwxLjI5IDEuMDcxYS4yNTguMjU4IDAgMCAwIC4xNjMuMDU4TDEuNTYzIDhhLjI1Mi4yNTIgMCAwIDAgLjE3MS0uMDg1bDQuMjY1LTQuODYxIDQuMjY3IDQuODYxYy4wNDMuMDQ5LjEwNC4wOC4xNy4wODVhLjI2MS4yNjEgMCAwIDAgLjE4Mi0uMDU3bDEuMjkxLTEuMDcxYS4yMzYuMjM2IDAgMCAwIC4wMjYtLjM0MnoiLz48L3N2Zz4=); } - select[disabled], select[aria-disabled="true"], select.is-disabled { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiM2Mzc1OEIiIGQ9Ik0xMS45MzUgMS40NzVMNi4xODggNy45MjdhLjI2NC4yNjQgMCAwIDEtLjM3OCAwTC4wNjUgMS40NzVhLjIzNS4yMzUgMCAwIDEgLjAyNi0uMzQzTDEuMzgxLjA1OGEuMjUzLjI1MyAwIDAgMSAuMTYzLS4wNTlMMS41NjMgMGEuMjUyLjI1MiAwIDAgMSAuMTcxLjA4NWw0LjI2NSA0Ljg4IDQuMjY3LTQuODhhLjI1Mi4yNTIgMCAwIDEgLjM1Mi0uMDI3bDEuMjkxIDEuMDc0Yy4wNS4wNDIuMDgxLjEwMi4wODYuMTY2YS4yMzQuMjM0IDAgMCAxLS4wNi4xNzd6Ii8+PC9zdmc+); } - select[multiple] { - height: 108px; - background-image: none; - padding-top: 16px; } - -input[type=radio], input[type=checkbox] { - height: 16px; - width: 16px; - margin: 0; - vertical-align: middle; - position: relative; - cursor: pointer; } - input[type=radio]:checked, input[type=checkbox]:checked { - border-color: #0a6ed1; - background-color: #0a6ed1; } - input[type=radio][disabled], input[type=radio][aria-disabled="true"], input[type=radio].is-disabled, input[type=checkbox][disabled], input[type=checkbox][aria-disabled="true"], input[type=checkbox].is-disabled { - border-color: #ebebec; - background-color: #fafafa; } - -input[type="checkbox"]::before { - content: ""; - width: 10px; - height: 5px; - border-color: transparent; - border-style: solid; - border-width: 0 0 2px 2px; - transform: rotate(-45deg); - position: absolute; - z-index: 2; - top: calc(50% - 4px); - left: calc(50% - 10px/2); } - -input[type="checkbox"]:checked::before { - border-color: #ffffff; } - -input[type="checkbox"][disabled]::before, input[type="checkbox"][aria-disabled="true"]::before, input[type="checkbox"].is-disabled::before { - border-color: #515559; } - -input[type="radio"] { - border-radius: 50%; } - input[type="radio"]::after { - content: ""; - border-radius: 50%; - width: 8px; - height: 8px; - position: absolute; - top: calc(50% - (8px/2)); - left: calc(50% - (8px/2)); - transition: background-color 0.125s ease-in; - background-color: transparent; } - input[type="radio"]:checked { - background-color: #ffffff; } - input[type="radio"]:checked::after { - background-color: #0a6ed1; } - input[type="radio"]:checked[disabled]::after, input[type="radio"]:checked[aria-disabled="true"]::after, input[type="radio"]:checked.is-disabled::after { - background-color: #515559; } - -/*! -.fd-section+(--full-bleed, --no-border) - .fd-section__header - .fd-section__title - .fd-section__actions - .fd-section__footer -*/ -.fd-section { - padding: 16px 40px 20px; - border-bottom: none; } - .fd-section::after { - content: ""; - display: table; - clear: both; } - .fd-section:last-child, .fd-section--no-border { - border-bottom: 0; } - .fd-section--full-bleed, .fd-section--bleed { - padding-right: 0; - padding-left: 0; } - .fd-section--full-bleed .fd-section__header, .fd-section--full-bleed .fd-section__footer, .fd-section--bleed .fd-section__header, .fd-section--bleed .fd-section__footer { - margin-left: 40px; - margin-right: 40px; } - .fd-section__header { - min-height: 40px; - display: flex; - align-items: center; - margin-bottom: 20px; } - .fd-section__title { - font-size: 1.71429rem; - line-height: 1.33333; - font-weight: 400; - color: #515559; - flex: 1; - margin-bottom: 0; } - .fd-section__actions { - margin-left: auto; } - .fd-section__footer { - display: flex; - justify-content: center; } - -.fd-container { - margin-bottom: 12px; - max-width: 1290px; } - .fd-container::after { - content: ""; - display: table; - clear: both; } - .fd-container:last-child { - margin-bottom: 0; } - .fd-container--fluid { - max-width: 100%; } - .fd-container--flex { - display: flex; } - .fd-container--centered { - margin-left: auto; - margin-right: auto; } - -/* -WHY THIS: -Other semantic grids don't eaily allow for fixed gutter widths -nor do they take advantage of the CSS calc function -and they can get kind of confusing. -This is meant for simple layout problems —  -i.e., you have a box and you need three cols inside of equal widths -with gutters between. - -The FLOW terminology is meant to be netural outside of rows and columns -and comes from the HTML5 spec referring to elements that can contain other elements -http://w3c.github.io/html/dom.html#kinds-of-content-flow-content - -USAGE: -— Outer containers should contain the `@include flow-box` base styles -— Columns get `@include flow` with `$span` and `$cols` params - -EXAMPLE MARKUP: -
-
x
-
x
-
x
-
x
-
- -EXAMPLE CSS: -section { - @include flow-box() - .box { - @include flow(2); - &:first-child { - @include flow-shift(2); - } - } -} - -OUTPUT: -This will render 4 boxes spanning 2 cols each indented 2 cols -(based on defaults) - -|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| - | box | | box | | box | | box | - -*/ -/*! - .fd-col+(--1...12, --shift-1...11) -*/ -.fd-col { - flex: 1; } - @media (min-width: 800px) { - .fd-col--1 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 1 ) + 0px); } - .fd-col--1:last-child { - margin-right: 0; } - .fd-col--2 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 2 ) + 24px); } - .fd-col--2:last-child { - margin-right: 0; } - .fd-col--3 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 3 ) + 48px); } - .fd-col--3:last-child { - margin-right: 0; } - .fd-col--4 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 4 ) + 72px); } - .fd-col--4:last-child { - margin-right: 0; } - .fd-col--5 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 5 ) + 96px); } - .fd-col--5:last-child { - margin-right: 0; } - .fd-col--6 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 6 ) + 120px); } - .fd-col--6:last-child { - margin-right: 0; } - .fd-col--7 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 7 ) + 144px); } - .fd-col--7:last-child { - margin-right: 0; } - .fd-col--8 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 8 ) + 168px); } - .fd-col--8:last-child { - margin-right: 0; } - .fd-col--9 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 9 ) + 192px); } - .fd-col--9:last-child { - margin-right: 0; } - .fd-col--10 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 10 ) + 216px); } - .fd-col--10:last-child { - margin-right: 0; } - .fd-col--11 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 11 ) + 240px); } - .fd-col--11:last-child { - margin-right: 0; } - .fd-col--12 { - float: left; - margin-right: 24px; - width: calc( ( ( (100% - 264px) / 12 ) * 12 ) + 264px); } - .fd-col--12:last-child { - margin-right: 0; } - .fd-col--shift-1 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 1 ) + 24px); } - .fd-col--shift-2 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 2 ) + 48px); } - .fd-col--shift-3 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 3 ) + 72px); } - .fd-col--shift-4 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 4 ) + 96px); } - .fd-col--shift-5 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 5 ) + 120px); } - .fd-col--shift-6 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 6 ) + 144px); } - .fd-col--shift-7 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 7 ) + 168px); } - .fd-col--shift-8 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 8 ) + 192px); } - .fd-col--shift-9 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 9 ) + 216px); } - .fd-col--shift-10 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 10 ) + 240px); } - .fd-col--shift-11 { - margin-left: calc( ( ( (100% - 264px) / 12 ) * 11 ) + 264px); } } - [class^="fd-col"] { - margin-bottom: 12px; } - [class^="fd-col"]:last-child { - margin-bottom: 0; } - @media (min-width: 800px) { - [class^="fd-col"] { - margin-bottom: 0; } } - -/*! -.fd-ui+(--fixed) - .fd-ui__header+(--fixed) - .fd-ui__app - .fd-ui__footer+(--fixed) - .fd-ui__overlay -*/ -.fd-ui { - position: absolute; - min-height: 100vh; - width: 100vw; - max-width: 100vw; - background: none; - background-size: cover; - background-attachment: fixed; } - .fd-ui--fixed { - display: flex; - flex-direction: column; - max-height: 100vh; } - .fd-ui--fixed .fd-ui__header { - flex: 0 0 50px; - position: static; } - .fd-ui--fixed .fd-ui__footer { - flex: 0 0 40px; - position: static; } - .fd-ui--fixed .fd-ui__app { - overflow: scroll; - margin-top: 0; - flex: 1; - min-height: auto; } - .fd-ui__header { - position: absolute; - z-index: 1; - background: #ffffff; - width: 100%; - min-height: 50px; - height: 50px; - border-bottom: solid 1px #dededf; } - .fd-ui__header--fixed { - position: fixed; } - .fd-ui__footer { - background: #ffffff; - width: 100%; - min-height: 40px; - height: 40px; - border-top: solid 1px #dededf; } - .fd-ui__footer--fixed { - position: fixed; - bottom: 0; } - .fd-ui__app { - margin-top: 50px; - min-height: calc(100vh - 40px - 50px); - width: 100%; - display: flex; - position: relative; } - .fd-ui__overlay { - position: absolute; } - -/*! -.fd-app - .fd-app__sidebar - .fd-app__main -*/ -.fd-app { - width: 100%; - min-height: 100vh; } - @media (min-width: 800px) { - .fd-app { - display: flex; } } - .fd-app__sidebar { - background-color: #ffffff; - width: 100vw; - max-height: 40px; - border-right: solid 1px #dededf; - overflow: scroll; } - @media (min-width: 800px) { - .fd-app__sidebar { - width: 250px; - max-height: 100%; } } - @media (min-width: 1440px) { - .fd-app__sidebar { - width: 250px; } - .fd-app__sidebar:hover { - width: 250px; - margin-right: 0; } } - .fd-app__main { - flex: 1; - overflow: scroll; } - -.fd-page { - display: flex; - flex-direction: column; - min-height: 100%; - width: 100%; - background-color: #f3f4f5; } - .fd-page__header { - border-style: solid; - border-width: 0; - border-color: #dededf; - background-color: #f3f4f5; - min-height: auto; - padding: 0 40px; } - .fd-page__intro { - font-size: 0.92857rem; - line-height: 1.23077; - font-weight: 400; - padding: 16px 40px; - background-color: #ffffff; - text-align: center; - border-bottom: solid 1px #dededf; - margin-bottom: -1px; } - .fd-page__content { - flex-grow: 1; - margin-bottom: 32px; } - -/*! -.fd-section+(--full-bleed, --no-border) - .fd-section__header - .fd-section__title - .fd-section__actions - .fd-section__footer -*/ -.fd-section { - padding: 16px 40px 20px; - border-bottom: none; } - .fd-section::after { - content: ""; - display: table; - clear: both; } - .fd-section:last-child, .fd-section--no-border { - border-bottom: 0; } - .fd-section--full-bleed, .fd-section--bleed { - padding-right: 0; - padding-left: 0; } - .fd-section--full-bleed .fd-section__header, .fd-section--full-bleed .fd-section__footer, .fd-section--bleed .fd-section__header, .fd-section--bleed .fd-section__footer { - margin-left: 40px; - margin-right: 40px; } - .fd-section__header { - min-height: 40px; - display: flex; - align-items: center; - margin-bottom: 20px; } - .fd-section__title { - font-size: 1.71429rem; - line-height: 1.33333; - font-weight: 400; - color: #515559; - flex: 1; - margin-bottom: 0; } - .fd-section__actions { - margin-left: auto; } - .fd-section__footer { - display: flex; - justify-content: center; } - -/*! -.fd-panel - .fd-panel__header - .fd-panel__title - .fd-panel__actions - .fd-panel__footer -*/ -.fd-panel { - background-color: #ffffff; - box-shadow: 0 5px 20px 0 rgba(50, 54, 58, 0.08); - border-radius: 4px; - border: none; } - .fd-panel::after { - content: ""; - display: table; - clear: both; } - .fd-panel__header { - min-height: 40px; - display: flex; - align-items: center; - border-bottom: solid 1px #eeeeef; - padding: 16px 20px; - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - color: #6f7275; } - .fd-panel__title { - font-size: 1.14286rem; - line-height: 1.25; - font-weight: 400; - flex: 1; - margin-bottom: 0; - color: #32363a; } - .fd-panel__actions { - margin-left: auto; - margin-top: -4px; - margin-bottom: -4px; } - .fd-panel__filters { - padding: 12px 20px; - border-bottom: solid 1px #eeeeef; - transition: all 0.15s ease-in; } - .fd-panel__filters.is-hidden, .fd-panel__filters[aria-hidden="true"] { - padding-top: 0; - padding-bottom: 0; - max-height: 0; - overflow: hidden; } - .fd-panel__body { - padding: 16px 20px; } - .fd-panel__body--full-bleed, .fd-panel__body--bleed { - padding: 0; } - .fd-panel__footer { - display: flex; - justify-content: center; - padding: 16px 20px; - border-top: solid 1px #eeeeef; } - -/*! -.fd-tile-grid+(--2col | --4col | --5col | --6col) -*/ -.fd-panel-grid { - display: flex; - flex-wrap: wrap; - flex-direction: column; - position: relative; } - @media (min-width: 800px) { - .fd-panel-grid { - /* flex fallback */ - display: flex; - flex-direction: row; - flex-wrap: wrap; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 24px; } - .fd-panel-grid--2col { - grid-template-columns: repeat(2, 1fr); } - .fd-panel-grid--3col { - grid-template-columns: repeat(3, 1fr); } - .fd-panel-grid--4col { - grid-template-columns: repeat(4, 1fr); } - .fd-panel-grid--5col { - grid-template-columns: repeat(5, 1fr); } - .fd-panel-grid--6col { - grid-template-columns: repeat(6, 1fr); } - .fd-panel-grid--nogap, .fd-panel-grid--nogutter { - grid-gap: 1px; } - .fd-panel-grid--nogap > *, .fd-panel-grid--nogutter > * { - box-shadow: none; } } - -/*! -.fd-overlay -*/ -.fd-overlay { - position: fixed; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - width: 100vw; - top: 0; - background: rgba(74, 80, 92, 0.3); - z-index: 1000; } - .fd-overlay[aria-hidden="true"] { - display: none; } - -/*! -.fd-alert+(--warning. --error) - .fd-alert__close -*/ -.fd-alert { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - color: #32363a; - border: solid 1px #dededf; - background-color: #fafafa; - padding: 8px 12px; - border-radius: 4px; } - .fd-alert__close { - position: absolute; - right: 4px; - top: 0; - display: inline-block; - padding: 0; - font-smoothing: antialiased; - appearance: none; - outline: 0; - border: 0; - display: inline-block; - text-decoration: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - color: #32363a; - width: 36px; - height: 36px; } - .fd-alert__close::before { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-alert__close::before { - content: ""; } - .fd-alert__close::before { - font-size: 1.42857rem; - line-height: 1; } - .fd-alert--warning { - border-color: #f59518; - background-color: rgba(245, 149, 24, 0.07); } - .fd-alert--error { - border-color: #ee0000; - background-color: rgba(238, 0, 0, 0.07); } - .fd-alert--dismissible { - position: relative; - padding-right: 48px; } - -/*! -.fd-action-bar - .fd-action-bar__title - .fd-action-bar__actions+(.is-disabled | aria-hidden)? - .fd-action-bar__action-item -*/ -.fd-action-bar { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - background-color: transparent; - min-height: 64px; - display: flex; - align-items: stretch; - padding-right: 0; - padding-left: 0; } - .fd-action-bar__header { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - flex: 1; - margin-bottom: 0; - padding-top: 16px; - padding-bottom: 16px; } - .fd-action-bar__title { - font-size: 1.71429rem; - line-height: 1.33333; - font-weight: 400; - margin-bottom: 4px; } - .fd-action-bar__description { - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - text-transform: none; } - .fd-action-bar__actions { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - align-items: center; - transition: opacity 0.25s ease-in; - visibility: visible; } - .fd-action-bar__actions.is-disabled, .fd-action-bar__actions[aria-hidden="true"] { - opacity: 0; - visibility: hidden; } - .fd-action-bar__actions > * { - margin-left: 8px; } - .fd-action-bar__actions > *:first-child { - margin-left: 0; } - -/*! -.fd-badge+(( --success | --warning | --error ), (--pill | --filled)) -*/ -.fd-badge { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - font-weight: 700; - color: #6f7275; - text-transform: uppercase; - line-height: 24px; - vertical-align: middle; - display: inline-block; - padding-left: 8px; - padding-right: 8px; - border-radius: 4px; - border-width: 1px; - border-style: solid; } - .fd-badge--pill { - border-radius: 12px; } - .fd-badge--filled { - background-color: #fafafa; - border: none; } - .fd-badge--filled.fd-badge--success { - background-color: rgba(53, 156, 70, 0.07); } - .fd-badge--filled.fd-badge--warning { - background-color: rgba(245, 149, 24, 0.07); } - .fd-badge--filled.fd-badge--error { - background-color: rgba(238, 0, 0, 0.07); } - .fd-badge--success { - color: #359c46; } - .fd-badge--warning { - color: #f59518; } - .fd-badge--error { - color: #ee0000; } - -/*! -.fd-button+( (--small | --large), --icon, --text, --link, --action-bar)+( (.is-disabled | [aria-disabled=true]) | (.is-selected | [aria-selected=true] | (.is-pressed | [aria-pressed=true])) -*/ -.fd-button, [class*="fd-button--"] { - display: inline-block; - padding: 0; - font-smoothing: antialiased; - appearance: none; - outline: 0; - border: 0; - display: inline-block; - text-decoration: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - background-color: transparent; - color: #0a6ed1; - border: solid 1px #0a6ed1; - padding-left: 10px; - padding-right: 10px; - height: 36px; - max-height: 36px; - min-width: 36px; - transition: all 0.125s ease-in; - line-height: 1; } - .fd-button::before, [class*="fd-button--"]::before { - font-size: 1.42857rem; - line-height: 1; } - .fd-button::before, [class*="fd-button--"]::before { - margin-right: 8px; - vertical-align: middle; } - .fd-button::after, [class*="fd-button--"]::after { - margin-left: 8px; - vertical-align: middle; } - .fd-button[aria-disabled="true"], .fd-button.is-disabled, .fd-button:disabled, [class*="fd-button--"][aria-disabled="true"], [class*="fd-button--"].is-disabled, [class*="fd-button--"]:disabled { - opacity: 0.4; - cursor: not-allowed; } - .fd-button:empty::before, [class*="fd-button--"]:empty::before { - margin-right: 0; } - .fd-button:empty::after, [class*="fd-button--"]:empty::after { - margin-left: 0; } - -.fd-button:hover { - background-color: rgba(0, 0, 0, 0); - border-color: #085caf; } - -.fd-button:active, .fd-button.is-active, .fd-button[aria-selected="true"], .fd-button.is-selected, .fd-button[aria-pressed="true"], .fd-button.is-pressed { - border-color: #0854a0; - background-color: #0a6ed1; - color: #ffffff; } - -.fd-button[aria-disabled="true"], .fd-button.is-disabled, .fd-button:disabled { - background-color: transparent; - color: #0a6ed1; } - -.fd-button--positive { - color: #359c46; - border-color: #359c46; } - .fd-button--positive:hover { - border-color: #359c46; } - .fd-button--positive:active, .fd-button--positive.is-active, .fd-button--positive[aria-selected="true"], .fd-button--positive.is-selected, .fd-button--positive[aria-pressed="true"], .fd-button--positive.is-pressed { - color: #359c46; - border-color: #359c46; - background-color: transparent; } - -.fd-button--negative { - color: #ee0000; - border-color: #ee0000; } - .fd-button--negative:hover { - border-color: #ee0000; } - .fd-button--negative:active, .fd-button--negative.is-active, .fd-button--negative[aria-selected="true"], .fd-button--negative.is-selected, .fd-button--negative[aria-pressed="true"], .fd-button--negative.is-pressed { - color: #ee0000; - border-color: #ee0000; - background-color: transparent; } - -.fd-button--main { - color: #ffffff; - background-color: #0a6ed1; - border: solid 1px #0a6ed1; } - .fd-button--main:hover { - background-color: #085caf; - border-color: #085caf; } - .fd-button--main:active, .fd-button--main.is-active, .fd-button--main[aria-selected="true"], .fd-button--main.is-selected, .fd-button--main[aria-pressed="true"], .fd-button--main.is-pressed { - background-color: #0854a0; } - .fd-button--main[aria-disabled="true"], .fd-button--main.is-disabled, .fd-button--main:disabled { - background-color: #0a6ed1; - color: #ffffff; - opacity: 0.4; } - .fd-button--main.fd-button--positive { - background-color: #359c46; - border-color: #359c46; } - .fd-button--main.fd-button--positive:active, .fd-button--main.fd-button--positive.is-active, .fd-button--main.fd-button--positive[aria-selected="true"], .fd-button--main.fd-button--positive.is-selected, .fd-button--main.fd-button--positive[aria-pressed="true"], .fd-button--main.fd-button--positive.is-pressed { - color: #ffffff; } - .fd-button--main.fd-button--negative { - background-color: #ee0000; - border-color: #ee0000; } - .fd-button--main.fd-button--negative:active, .fd-button--main.fd-button--negative.is-active, .fd-button--main.fd-button--negative[aria-selected="true"], .fd-button--main.fd-button--negative.is-selected, .fd-button--main.fd-button--negative[aria-pressed="true"], .fd-button--main.fd-button--negative.is-pressed { - color: #ffffff; } - -.fd-button--secondary { - color: #0a6ed1; - background-color: transparent; - border: solid 1px transparent; } - .fd-button--secondary:hover { - background-color: #fafafa; - border-color: rgba(0, 0, 0, 0); } - .fd-button--secondary:active, .fd-button--secondary.is-active, .fd-button--secondary[aria-selected="true"], .fd-button--secondary.is-selected, .fd-button--secondary[aria-pressed="true"], .fd-button--secondary.is-pressed { - color: #0a6ed1; - background-color: #eeeeef; - border-color: transparent; } - .fd-button--secondary[aria-disabled="true"], .fd-button--secondary.is-disabled, .fd-button--secondary:disabled { - background-color: transparent; } - -.fd-button--toolbar, .fd-button--grouped { - color: #515559; - background-color: #fafafa; - border: solid 1px #9da2a6; - box-shadow: 0 1px 0 0 #d3d5d7; } - .fd-button--toolbar:hover, .fd-button--grouped:hover { - background-color: #e8e8e8; - border-color: #8a9095; } - .fd-button--toolbar:active, .fd-button--toolbar.is-active, .fd-button--toolbar[aria-selected="true"], .fd-button--toolbar.is-selected, .fd-button--toolbar[aria-pressed="true"], .fd-button--toolbar.is-pressed, .fd-button--grouped:active, .fd-button--grouped.is-active, .fd-button--grouped[aria-selected="true"], .fd-button--grouped.is-selected, .fd-button--grouped[aria-pressed="true"], .fd-button--grouped.is-pressed { - background-color: #e1e1e1; - border-color: transparent; } - .fd-button--toolbar[aria-disabled="true"], .fd-button--toolbar.is-disabled, .fd-button--toolbar:disabled, .fd-button--grouped[aria-disabled="true"], .fd-button--grouped.is-disabled, .fd-button--grouped:disabled { - background-color: transparent; - border-color: #9da2a6; } - -.fd-button--grouped:active, .fd-button--grouped.is-active, .fd-button--grouped[aria-selected="true"], .fd-button--grouped.is-selected, .fd-button--grouped[aria-pressed="true"], .fd-button--grouped.is-pressed { - color: #ffffff; - background-color: #0a6ed1; - border-color: #9da2a6; } - -.fd-button--compact { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - height: 32px; - max-height: 32px; - min-width: 32px; - line-height: 1; } - .fd-button--compact::before { - font-size: 1.14286rem; - line-height: 1; } - .fd-button--compact::after { - font-size: 1.14286rem; - line-height: 1; } - .fd-button--compact::before { - margin-right: 6.0015px; } - .fd-button--compact::after { - margin-left: 6.0015px; } - -.fd-button--xs { - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - height: 24px; - max-height: 24px; - min-width: 24px; - line-height: 1; - padding-left: 8px; - padding-right: 8px; } - .fd-button--xs::before { - font-size: 0.85714rem; - line-height: 1; } - .fd-button--xs::after { - font-size: 0.85714rem; - line-height: 1; } - .fd-button--xs::before, .fd-button--xs::after { - vertical-align: baseline; } - .fd-button--xs::before { - margin-right: 6.0015px; } - .fd-button--xs::after { - margin-left: 6.0015px; } - -.fd-button--s { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - height: 28px; - max-height: 28px; - min-width: 28px; - line-height: 1; } - .fd-button--s::before { - font-size: 1.14286rem; - line-height: 1; } - .fd-button--s::after { - font-size: 1.14286rem; - line-height: 1; } - .fd-button--s::before { - margin-right: 6.0015px; } - .fd-button--s::after { - margin-left: 6.0015px; } - -.fd-button--l { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - height: 40px; - max-height: 40px; - min-width: 40px; - line-height: 1; - padding-left: 12px; - padding-right: 12px; } - .fd-button--l::before { - font-size: 1.42857rem; - line-height: 1; } - .fd-button--l::after { - font-size: 1.42857rem; - line-height: 1; } - -/* -WHY THIS: -Other semantic grids don't eaily allow for fixed gutter widths -nor do they take advantage of the CSS calc function -and they can get kind of confusing. -This is meant for simple layout problems —  -i.e., you have a box and you need three cols inside of equal widths -with gutters between. - -The FLOW terminology is meant to be netural outside of rows and columns -and comes from the HTML5 spec referring to elements that can contain other elements -http://w3c.github.io/html/dom.html#kinds-of-content-flow-content - -USAGE: -— Outer containers should contain the `@include flow-box` base styles -— Columns get `@include flow` with `$span` and `$cols` params - -EXAMPLE MARKUP: -
-
x
-
x
-
x
-
x
-
- -EXAMPLE CSS: -section { - @include flow-box() - .box { - @include flow(2); - &:first-child { - @include flow-shift(2); - } - } -} - -OUTPUT: -This will render 4 boxes spanning 2 cols each indented 2 cols -(based on defaults) - -|--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| |--| - | box | | box | | box | | box | - -*/ -/*! -.fd-breadcrumb - .fd-breadcrumb__item - .fd-breadcrump__link -*/ -.fd-breadcrumb { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 0.92857rem; - line-height: 1.23077; - font-weight: 400; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: -12px; - list-style: none; - padding: 12px 16px 0 0; } - .fd-breadcrumb__item::after { - content: "/"; - margin-right: 16px; } - .fd-breadcrumb__item:last-child::after { - content: none; } - .fd-breadcrumb__link { - margin-right: 16px; } - -/*! -.fd-dropdown+() - .fd-dropdown__control+([disabled]) - .fd-dropdown__menu+() -*/ -.fd-dropdown { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - position: relative; - display: inline-block; } - .fd-dropdown__control { - position: relative; - margin-left: 0; } - .fd-dropdown__control::after { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-dropdown__control::after { - content: ""; - transition: transform 0.125s ease-in; } - .fd-dropdown__control[aria-expanded="true"]::after, .fd-dropdown__control.is-expanded::after { - transform: scaleY(-1); } - .fd-dropdown__control.is-disabled::after, .fd-dropdown__control[disabled]::after, .fd-dropdown__control[aria-disabled="true"]::after { - transform: none; } - .fd-dropdown__control--no-border { - border: none; } - .fd-dropdown__menu { - padding-top: 4px; - padding-bottom: 4px; - margin-left: 0; - padding-left: 0; - min-width: 100%; - border: red; - position: absolute; - white-space: nowrap; - z-index: 2; - border-radius: 4px; - background-color: #ffffff; - box-shadow: 0 0 4px 1px #eeeeef; - opacity: 1; - visibility: visible; - transition: opacity 0.125s ease-in; - margin-top: 1px; } - .fd-dropdown__menu[aria-hidden="true"], .fd-dropdown__menu.is-hidden { - opacity: 0; - visibility: hidden; } - .fd-dropdown__group, .fd-dropdown__list { - list-style: none; - margin-bottom: 0; } - .fd-dropdown__title { - display: block; - margin-bottom: 0; - padding: 8px 20px; - font-size: 0.78571rem; - line-height: 1.45455; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - text-transform: uppercase; - color: #6f7275; - background: #fafafa; } - .fd-dropdown__item { - display: block; - padding: 10px 20px; - color: #515559; } - .fd-dropdown__item:hover { - color: #515559; - background-color: #eeeeef; } - .fd-dropdown__item.is-selected, .fd-dropdown__item[aria-selected="true"] { - color: #515559; - background-color: rgba(10, 110, 209, 0.07); } - -/*! -.fd-form - .fd-form__set? - .fd-form__legend(.is-required) - .fd-form__group? - .fd-form__item+(--check, --inline) - .fd-form__label(.is-required) - .fd-form__control - .fd-form__message(--help, --error, --warning) -*/ -.fd-form { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } - .fd-form__group::after { - content: ""; - display: table; - clear: both; } - .fd-form__group:last-child { - margin-bottom: 0; - margin-right: 0; } - .fd-form__group .fd-form__item { - margin-right: 24px; } - .fd-form__group .fd-form__item:last-child { - margin-bottom: 0; - margin-right: 0; } - .fd-form__set { - margin-bottom: 32px; } - .fd-form__set .fd-form__item--inline { - margin-bottom: 0; } - .fd-form__set .fd-form__message { - margin-top: 8px; } - .fd-form__item { - margin-bottom: 32px; } - .fd-form__item:last-child { - margin-bottom: 0; - margin-right: 0; } - .fd-form__item--check { - position: relative; - display: block; } - .fd-form__item--check::after { - content: ""; - display: table; - clear: both; } - .fd-form__item--check .fd-form__label { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - margin-bottom: 0; - vertical-align: middle; - display: flex; - align-items: center; - line-height: 16px; - cursor: pointer; } - .fd-form__item--check .fd-form__control { - float: left; - vertical-align: middle; - margin-right: 12px; } - .fd-form__item--check .fd-form__help { - float: none; - margin-left: 12px; } - .fd-form__item--inline { - float: left; } - .fd-form__item--inline .fd-form__label { - margin-top: 4px; - width: auto; } - .fd-form__label, .fd-form__legend { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 0.92857rem; - line-height: 1.23077; - font-weight: 400; - display: block; - margin-bottom: 8px; - border: 0; - color: #6f7275; } - .fd-form__label.is-required, .fd-form__legend.is-required { - font-weight: 700; } - .fd-form__control { - min-width: 16px; } - .fd-form__legend { - margin-bottom: 20px; } - .fd-form__help { - float: right; } - .fd-form__message { - clear: both; - display: block; - font-size: 0.92857rem; - line-height: 1.23077; - font-weight: 400; - color: #515559; - padding: 8px 0; - position: relative; } - .fd-form__item--check + .fd-form__message { - transform: translateY(-12px); - margin-bottom: -12px; } - .fd-form__item--inline.fd-form__item--check + .fd-form__message { - transform: translateY(8px); - margin-bottom: 8px; } - .fd-form__message::before { - width: 18px; - height: 18px; - font-style: normal; - position: absolute; - left: 0; - color: #ffffff; - border-radius: 50%; - background-color: #6f7275; - text-align: center; - line-height: 18px; } - .fd-form__message--warning, .fd-form__message--error, .fd-form__message--help { - padding-left: 24px; } - .fd-form__message--warning::before, .fd-form__message--error::before, .fd-form__message--help::before { - left: 0; - top: 7px; } - .fd-form__message--help { - color: #32363a; } - .fd-form__message--help::before { - content: "?"; } - .fd-form__message--warning { - color: #f59518; } - .fd-form__message--warning::before { - content: "!"; - background-color: transparent; - border-radius: 0; - height: 0; - width: 0; - border-bottom: 18px solid #f59518; - border-left: 10px solid transparent; - border-right: 10px solid transparent; - text-indent: -0.15em; - line-height: 22px; } - .fd-form__message--error { - color: #ee0000; } - .fd-form__message--error::before { - content: "!"; - background-color: #ee0000; - color: #ffffff; } - -/*! -.fd-input-group+(--inline) - .fd-input-group__addon+() - .fd-input-group__button -*/ -.fd-input-group { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - vertical-align: bottom; - max-height: 36px; } - .fd-input-group [type="number"] { - -moz-appearance: textfield; } - .fd-input-group [type="number"]::-webkit-outer-spin-button, .fd-input-group [type="number"]::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; } - .fd-input-group [type="search"] { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNEQ1QTZDIiBkPSJNOS43NTQgMTkuNDk2YTkuNjg0IDkuNjg0IDAgMCAwIDYuMDk3LTIuMTU4bDguMjg5IDguMzRhMS4wODQgMS4wODQgMCAwIDAgMS41MzUtMS41MjlsLTguMy04LjM1YTkuNjg5IDkuNjg5IDAgMCAwIDIuMTItNi4wNTRjMC01LjM3Ny00LjM2OS05Ljc1MS05Ljc0MS05Ljc1MVMuMDEzIDQuMzY4LjAxMyA5Ljc0NXM0LjM2OSA5Ljc1MSA5Ljc0MSA5Ljc1MXptMC0xNy4zMzVjNC4xNzcgMCA3LjU3NyAzLjQwMiA3LjU3NyA3LjU4NCAwIDQuMTgyLTMuNCA3LjU4NC03LjU3NyA3LjU4NC00LjE3OCAwLTcuNTc3LTMuNDAyLTcuNTc3LTcuNTg0IDAtNC4xODIgMy4zOTktNy41ODQgNy41NzctNy41ODR6Ii8+PC9zdmc+"); - background-repeat: no-repeat; - background-position: 16px center; - background-size: 16px; - padding-left: 48px; - padding-right: 60px; - -moz-appearance: textfield; } - .fd-input-group [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; - margin: 0; } - .fd-input-group [type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; - margin: 0; } - .fd-input-group--inline { - display: inline-flex; } - .fd-input-group--no-border input { - border-color: transparent; } - .fd-input-group__addon { - color: #6f7275; - padding: 0 12px; - border-style: solid; - border-width: 1px; - border-color: #dededf; - background-color: #fafafa; - justify-content: center; - display: flex; - flex-direction: column; - border-radius: 4px; } - .fd-input-group__addon:first-child { - border-right-width: 0; } - .fd-input-group__addon:last-child { - border-left-width: 0; } - .fd-input-group__addon--button { - padding: 0; } - .fd-input-group__addon--before { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .fd-input-group__addon--after { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - [readonly] + .fd-input-group__addon { - border-top-color: transparent; - border-right-color: transparent; - border-radius: 0; } - [type="search"] + .fd-input-group__addon { - border: 0; - width: 0; } - .fd-input-group--before input[type=text], .fd-input-group--before input[type=password], .fd-input-group--before input[type=email], .fd-input-group--before input[type=url], .fd-input-group--before input[type=search], .fd-input-group--before input[type=tel], .fd-input-group--before input[type=number], .fd-input-group--before input[type=date] { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - .fd-input-group--after input[type=text], .fd-input-group--after input[type=password], .fd-input-group--after input[type=email], .fd-input-group--after input[type=url], .fd-input-group--after input[type=search], .fd-input-group--after input[type=tel], .fd-input-group--after input[type=number], .fd-input-group--after input[type=date] { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .fd-input-group__button { - display: inline-block; - padding: 0; - font-smoothing: antialiased; - appearance: none; - outline: 0; - border: 0; - display: inline-block; - text-decoration: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - flex: 1; - width: 100%; - display: block; - min-width: 48px; } - .fd-input-group__button--step-up, .fd-input-group__button--step-down { - font-size: 10px; - border-radius: 0; } - .fd-input-group__button--step-up::after, .fd-input-group__button--step-down::after { - content: ""; - position: relative; } - .fd-input-group__button--step-up { - border-bottom: solid 1px #dededf; } - .fd-input-group__button--step-up::after { - height: 0; - width: 0; - border-bottom: 8px solid black; - border-left: 6.5px solid transparent; - border-right: 6.5px solid transparent; - top: -10px; } - .fd-input-group__button--step-down::after { - height: 0; - width: 0; - border-left: 6.5px solid transparent; - border-right: 6.5px solid transparent; - border-top: 8px solid black; - top: 10px; } - .fd-input-group__button--clear { - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMDA5Q0RGIiBkPSJNMTMgMEM1LjgyIDAgMCA1LjgyIDAgMTNzNS44MiAxMyAxMyAxMyAxMy01LjgyIDEzLTEzUzIwLjE4IDAgMTMgMHptNS4xOTUgMTcuMzk2YS41NjQuNTY0IDAgMSAxLS43OTkuNzk5TDEzIDEzLjc5OWwtNC4zOTYgNC4zOTZhLjU2NC41NjQgMCAxIDEtLjc5OS0uNzk5TDEyLjIwMSAxMyA3LjgwNSA4LjYwNGEuNTY0LjU2NCAwIDEgMSAuNzk5LS43OTlMMTMgMTIuMjAxbDQuMzk2LTQuMzk2YS41NjQuNTY0IDAgMSAxIC43OTkuNzk5TDEzLjc5OSAxM2w0LjM5NiA0LjM5NnoiLz48L3N2Zz4="); - background-repeat: no-repeat; - background-position: center; - background-size: 20px; - position: relative; - left: -44px; } - -/*! -.fd-label+(--success | --warning | --error) -*/ -.fd-label { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - font-weight: 700; - color: #6f7275; - text-transform: uppercase; - line-height: 24px; - vertical-align: middle; - display: inline-block; - padding-left: 8px; - padding-right: 8px; } - .fd-label--success { - color: #359c46; } - .fd-label--warning { - color: #f59518; } - .fd-label--error { - color: #ee0000; } - -/*! -.fd-pagination -*/ -.fd-pagination { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; } - .fd-pagination__total { - color: #515559; - margin-right: 8px; } - .fd-pagination__nav { - display: inline-block; - padding-left: 0; - margin-left: 0; - list-style: none; - margin-bottom: 0; } - .fd-pagination__link { - color: #0a6ed1; - background-color: transparent; - padding-left: 4px; - padding-right: 4px; - position: relative; } - .fd-pagination__link:active, .fd-pagination__link[aria-selected="true"], .fd-pagination__link.is-selected { - color: #515559; - text-decoration: none; - cursor: default; - font-weight: 700; } - .fd-pagination__link--previous, .fd-pagination__link--next { - padding-left: 8px; - padding-right: 8px; } - .fd-pagination__link--previous::before, .fd-pagination__link--next::before { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-pagination__link--previous::before, .fd-pagination__link--next::before { - content: ""; } - .fd-pagination__link--previous::before, .fd-pagination__link--next::before { - font-size: 0.85714rem; - line-height: 1; } - .fd-pagination__link--next { - transform: scaleX(-1); } - .fd-pagination__link--more::before { - content: "..."; - color: #0a6ed1; - font-weight: 700; } - -/*! -.fd-table - thead - tbody - tr+([aria-selected]) -*/ -.fd-table { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - width: 100%; - max-width: 100%; - border-collapse: collapse; - margin-bottom: 12px; - border-top: solid 0 transparent; } - .fd-table:last-child { - margin-bottom: 0; - margin-right: 0; } - .fd-table tr { - transition: background-color 0.125s ease-in; } - .fd-table tr:hover { - background-color: white; } - .fd-table tr.is-selected, .fd-table tr[aria-selected="true"] { - background-color: #ddedfd; } - .fd-table thead { - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - color: #6f7275; - background-color: #fafafa; - text-transform: uppercase; } - .fd-table thead tr:hover { - background-color: inherit; } - .fd-table thead td, - .fd-table thead th { - border: none; - font-weight: 400; } - .fd-table td, - .fd-table th { - text-align: left; - padding: 12px 12px; - border-style: solid; - border-width: 0; - border-color: transparent; } - .fd-table td:first-child, - .fd-table th:first-child { - padding-left: 24px; } - .fd-table td:last-child, - .fd-table th:last-child { - padding-right: 24px; } - .fd-table td .fd-dropdown__menu, - .fd-table th .fd-dropdown__menu { - min-width: auto; - text-align: left; } - .fd-table a { - color: #0a6ed1; } - .fd-table a:hover { - color: #0a6ed1; } - -/*! -.fd-tabs+() - .fd-tabs__item? - .fd-tabs__link+((.is-selected|[aria-selected=true]),(.is-disabled|[aria-disabled=true])) -.fd-tabs__panel+([aria-expanded]|.is-expanded) -*/ -.fd-tabs { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 12px; - list-style: none; - border-bottom: solid 1px #dededf; } - .fd-tabs__link { - display: block; - position: relative; - padding: 16px 16px; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - cursor: pointer; - color: #32363a; } - .fd-tabs__link:link { - color: #32363a; } - .fd-tabs__link::after { - transition: all 0.125s ease-in; - content: ""; - position: absolute; - bottom: 0; - left: 0; - display: inline-block; - height: 3px; - width: 100%; - background-color: transparent; - border-radius: 4px 4px 0 0; } - .fd-tabs__link:hover { - color: #085caf; } - .fd-tabs__link.is-selected, .fd-tabs__link[aria-selected="true"] { - color: #0a6ed1; } - .fd-tabs__link.is-selected::after, .fd-tabs__link[aria-selected="true"]::after { - background-color: #0a6ed1; } - .fd-tabs__link.is-disabled, .fd-tabs__link[aria-disabled="true"] { - color: rgba(10, 110, 209, 0.4); - cursor: not-allowed; } - .fd-tabs__panel[aria-expanded="false"] { - display: none; } - .fd-tabs__panel.is-expanded, .fd-tabs__panel[aria-expanded="true"] { - display: block; } - -/*! -.fd-modal - .fd-modal__header - .fd-form__title - .fd-form__body - .fd-form__footer-items - .fd-modal__button-primary - .fd-modal__button-secondary -*/ -.fd-modal { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - max-width: 460px; } - .fd-modal__content { - border-radius: 4px; - background-color: #ffffff; } - .fd-modal__header { - position: relative; - border-bottom: 1px solid #eeeeef; - padding: 16px 24px; } - .fd-modal__title { - font-size: 1.14286rem; - line-height: 1.25; - font-weight: 400; - margin-bottom: 0; } - .fd-modal__close { - position: absolute; - right: 4px; - top: 8px; - display: inline-block; - padding: 0; - font-smoothing: antialiased; - appearance: none; - outline: 0; - border: 0; - display: inline-block; - text-decoration: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - color: #32363a; - width: 36px; - height: 36px; } - .fd-modal__close::before { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-modal__close::before { - content: ""; } - .fd-modal__close::before { - font-size: 1.42857rem; - line-height: 1; } - .fd-modal__body { - padding: 16px 24px; - max-height: calc(100vh - 60px - 68px); - overflow-y: auto; } - .fd-modal__body > p { - padding: 0; } - .fd-modal__footer { - padding: 16px 24px; - text-align: right; - border-top: 1px solid #eeeeef; } - -/*! -.fd-tree+(--header) - .fd-tree__group+(--sublevel-1...-6, ([aria-hidden] | .is-hidden)) - .fd-tree__item - .fd-tree__row+(--header, ([aria-selected] | .is-selected)) - .fd-tree__col+(--control, --actions) - .fd-tree__control+([aria-pressed] | .is-pressed) -*/ -.fd-tree { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - position: relative; - width: 100%; - max-width: 100%; - border-bottom: solid 0 transparent; - margin-bottom: 12px; - margin-left: 0; } - .fd-tree:last-child { - margin-bottom: 0; - margin-right: 0; } - .fd-tree:last-child { - margin-bottom: 0; } - .fd-tree--header { - border-bottom: 0; - border-top: solid 0 transparent; - margin-bottom: 0; - background-color: #eeeeef; } - .fd-tree__group { - transition: opacity 0.125s linear; - max-height: auto; - opacity: 1; - margin-bottom: 0; - margin-left: 0; } - .fd-tree__group.is-hidden, .fd-tree__group[aria-hidden="true"] { - max-height: 0; - opacity: 0; - overflow: hidden; } - .fd-tree__item { - border-top: solid 0 transparent; - margin-bottom: 0; - list-style: none; } - .fd-tree__row { - padding: 0 24px; - display: flex; - align-items: center; - position: relative; - transition: background-color 0.125s ease-in; } - .fd-tree__row:hover { - background-color: #f9f9f9; } - .fd-tree__row--header { - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - color: #6f7275; - background-color: #f3f4f5; - text-transform: uppercase; } - .fd-tree__row--header:hover { - background-color: initial; } - .fd-tree__row.is-selected, .fd-tree__row[aria-selected="true"] { - background-color: #0a6ed1; } - .fd-tree__col { - flex: 1; - padding: 12px 0; - padding-left: 30px; } - .fd-tree__col--control { - flex: auto; - width: 20%; } - .fd-tree__group--sublevel-1 .fd-tree__col--control { - padding-left: 60px; } - .fd-tree__group--sublevel-2 .fd-tree__col--control { - padding-left: 90px; } - .fd-tree__group--sublevel-3 .fd-tree__col--control { - padding-left: 120px; } - .fd-tree__group--sublevel-4 .fd-tree__col--control { - padding-left: 150px; } - .fd-tree__group--sublevel-5 .fd-tree__col--control { - padding-left: 180px; } - .fd-tree__group--sublevel-6 .fd-tree__col--control { - padding-left: 210px; } - .fd-tree__group--sublevel-7 .fd-tree__col--control { - padding-left: 240px; } - .fd-tree__group--sublevel-8 .fd-tree__col--control { - padding-left: 270px; } - .fd-tree__col--actions { - padding-top: 0; - padding-bottom: 0; - text-align: right; } - .fd-tree__col--actions .fd-dropdown__menu { - min-width: auto; - text-align: left; } - .fd-tree__control { - display: inline-block; - padding: 0; - font-smoothing: antialiased; - appearance: none; - outline: 0; - border: 0; - display: inline-block; - text-decoration: none; - cursor: pointer; - user-select: none; - vertical-align: middle; - white-space: nowrap; - background-color: transparent; - border-radius: 4px; - position: absolute; - top: calc(50% - 18px/2); - margin-left: -30px; - width: 18px; - margin-right: 12px; - transform: rotate(180deg); - vertical-align: middle; - transition: transform 0.125s linear; - color: #0a6ed1; } - .fd-tree__control::before { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-tree__control::before { - content: ""; } - .fd-tree__control::before { - font-size: 14px; - line-height: 1.42857; } - .fd-tree__control[aria-pressed="true"], .fd-tree__control.is-pressed { - transform: rotate(270deg); } - .fd-tree a { - color: #0a6ed1; } - .fd-tree a:hover { - color: #0a6ed1; } - -/*! -.fd-list-group - .fd-list-group__item - .fd-list-group__action -*/ -.fd-list-group { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - margin-left: 0; } - .fd-list-group__item { - list-style: none; - padding: 10px 16px; - display: flex; - position: relative; - background-color: none; - transition: background-color 0.125s ease-in; } - .fd-list-group__item:hover { - background-color: #f8f8f8; } - .fd-list-group__action { - flex: 1; - text-align: right; - position: relative; - display: inline-block; - max-height: 40px; - padding-top: 0; - top: -10px; - margin-bottom: -20px; - right: -16px; } - -/*! -.fd-tooltip - .fd-tooltip__content+(left, right, bottom-left, bottom-right) -*/ -.fd-inline-help { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - position: relative; - display: inline-block; - width: 18px; - height: 18px; - top: 3px; } - .fd-inline-help::before { - content: "?"; - width: 18px; - height: 18px; - font-style: normal; - position: absolute; - left: 0; - color: #ffffff; - border-radius: 50%; - background-color: #6f7275; - text-align: center; } - .fd-inline-help__content { - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - background: #ffffff; - padding: 12px; - display: block; - position: absolute; - color: #515559; - top: 30px; - right: -12px; - min-width: 350px; - transition: opacity 0.125s ease-in; - text-align: left; - z-index: 1; - border-radius: 5px; - visibility: hidden; - opacity: 0; - filter: drop-shadow(rgba(0, 0, 0, 0.1) 0 2px 10px); } - .fd-inline-help__content::before { - height: 0; - width: 0; - border-bottom: 8px solid white; - border-left: 6.5px solid transparent; - border-right: 6.5px solid transparent; - content: ""; - position: absolute; - top: -8px; - right: 14px; } - .fd-inline-help__content--left { - top: -12px; - left: 30px; } - .fd-inline-help__content--left::before { - top: 16px; - left: -10px; - transform: rotate(-90deg); } - .fd-inline-help__content--right { - top: -12px; - right: 30px; } - .fd-inline-help__content--right::before { - top: 16px; - right: -10px; - transform: rotate(90deg); } - .fd-inline-help__content--bottom-left { - left: -8px; } - .fd-inline-help__content--bottom-left::before { - top: -8px; - left: 12px; } - .fd-inline-help:hover .fd-inline-help__content { - visibility: visible; - opacity: 1; - overflow: visible; } - -/*! -.fd-nav+(--vertical) - .fd-nav__item - .fd-nav__link+((.is-selected|[aria-selected=true]),(.is-disabled|[aria-disabled=true])) -*/ -.fd-nav { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; } - .fd-nav--vertical { - flex-direction: column; } - .fd-nav__link { - display: block; - padding: 12px 16px; } - .fd-nav__link.is-selected, .fd-nav__link[aria-selected="true"] { - color: #32363a; } - -/*! -.fd-tabs+() - .fd-tabs__item? - .fd-tabs__link+((.is-selected|[aria-selected=true]),(.is-disabled|[aria-disabled=true])) -.fd-tabs__panel+([aria-expanded]|.is-expanded) -*/ -.fd-tabs { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 12px; - list-style: none; - border-bottom: solid 1px #dededf; } - .fd-tabs__link { - display: block; - position: relative; - padding: 16px 16px; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - cursor: pointer; - color: #32363a; } - .fd-tabs__link:link { - color: #32363a; } - .fd-tabs__link::after { - transition: all 0.125s ease-in; - content: ""; - position: absolute; - bottom: 0; - left: 0; - display: inline-block; - height: 3px; - width: 100%; - background-color: transparent; - border-radius: 4px 4px 0 0; } - .fd-tabs__link:hover { - color: #085caf; } - .fd-tabs__link.is-selected, .fd-tabs__link[aria-selected="true"] { - color: #0a6ed1; } - .fd-tabs__link.is-selected::after, .fd-tabs__link[aria-selected="true"]::after { - background-color: #0a6ed1; } - .fd-tabs__link.is-disabled, .fd-tabs__link[aria-disabled="true"] { - color: rgba(10, 110, 209, 0.4); - cursor: not-allowed; } - .fd-tabs__panel[aria-expanded="false"] { - display: none; } - .fd-tabs__panel.is-expanded, .fd-tabs__panel[aria-expanded="true"] { - display: block; } - -/*! -.fd-toggle+(--no-border) - .fd-toggle__content+() - .fd-toggle__title+() -*/ -.fd-toggle { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - position: relative; - display: inline-block; - height: 28px; - width: 76px; - padding: 4px 14px 0 14px; } - .fd-toggle__switch { - height: 28px; - width: 28px; - border-radius: 50%; - position: absolute; - top: 0; - left: 4px; - background-color: #fafafa; - border: 1px solid rgba(111, 114, 117, 0.7); - transition: left 0.125s ease-in; - pointer-events: none; - box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); } - .fd-toggle input { - background-color: #dededf; - border-radius: 14px; - width: 100%; - height: 20px; - border-color: transparent; - vertical-align: middle; } - .fd-toggle input:before { - display: none; } - .fd-toggle input:checked { - background: #9AB7E1; - border-color: transparent; } - .fd-toggle input:checked::after { - display: none; } - .fd-toggle input:checked + .fd-toggle__switch { - left: calc(50% + 2px); - background: #0a6ed1; - border-color: #0a6ed1; } - .fd-toggle input:hover { - border-color: transparent; } - .fd-toggle input:active, .fd-toggle input:focus { - border-color: transparent; } - .fd-toggle input[disabled], .fd-toggle input.is-disabled, .fd-toggle input[aria-disabled="true"] { - border-color: transparent; } - .fd-toggle input[disabled] + .fd-toggle__switch, .fd-toggle input.is-disabled + .fd-toggle__switch, .fd-toggle input[aria-disabled="true"] + .fd-toggle__switch { - background-color: #eeeeef; } - .fd-toggle--xsmall { - height: 20px; - width: 54px; - padding-top: 0; } - .fd-toggle--xsmall input { - border-radius: 10px; - height: 14px; } - .fd-toggle--xsmall .fd-toggle__switch { - height: 20px; - width: 20px; } - .fd-toggle--small { - height: 24px; - width: 64px; - padding-top: 2px; } - .fd-toggle--small input { - border-radius: 12px; - height: 16px; } - .fd-toggle--small .fd-toggle__switch { - height: 24px; - width: 24px; } - .fd-toggle--large { - height: 32px; - width: 82px; - padding-top: 6px; } - .fd-toggle--large input { - border-radius: 16px; - height: 22px; } - .fd-toggle--large .fd-toggle__switch { - height: 32px; - width: 32px; } - -/*! -.fd-spinner+(.is-hidden|[aria-hidden=true]) - -Inspired by line scale spinner from Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) -* Copyright 2015 Daniel Cardoso <@DanielCardoso> -* Licensed under MIT -*/ -.fd-spinner { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - position: relative; - width: 29px; - height: 40px; - display: flex; - justify-content: space-between; - margin: 0 auto; } - .fd-spinner.is-hidden, .fd-spinner[aria-hidden="true"] { - display: none; } - .is-busy, - [aria-busy="true"] { - position: relative; - min-height: 40px; } - .is-busy::before, - [aria-busy="true"]::before { - position: absolute; - background-color: rgba(243, 244, 245, 0.95); - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - content: ""; } - .is-busy .fd-spinner, - [aria-busy="true"] .fd-spinner { - position: absolute; - z-index: 2; - left: calc(50% - 29px/2); - top: calc(50% - 40px/2); } - .fd-spinner::before, .fd-spinner::after { - content: ""; - position: relative; - width: 5px; - height: 100%; - background-color: #0a6ed1; - border-radius: 4px; } - .fd-spinner div::before, .fd-spinner div::after { - content: ""; - position: absolute; - width: 5px; - height: 100%; - background-color: #0a6ed1; - border-radius: 4px; } - .fd-spinner div::before { - left: 8px; } - .fd-spinner div::after { - right: 8px; } - .fd-spinner::before { - animation: line-scale 1s infinite ease; - animation-delay: -1s; } - .fd-spinner div::before { - animation: line-scale 1s infinite ease; - animation-delay: -0.9s; } - .fd-spinner div::after { - animation: line-scale 1s infinite ease; - animation-delay: -0.8s; } - .fd-spinner::after { - animation: line-scale 1s infinite ease; - animation-delay: -0.7s; } - -@keyframes line-scale { - 0%, - 40%, - 100% { - transform: scaleY(0.4); } - 80% { - transform: scaleY(1); } } - -/*! -.fd-image+((--circle), (--s|--m|--l)) -*/ -[class*="fd-image"] { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: inline-block; - vertical-align: middle; - background-repeat: no-repeat; - background-size: cover; - background-position: 50%; - border-radius: 4px; } - -.fd-image--s { - width: 24px; - height: 24px; - max-width: 24px; - max-height: 24px; - min-width: 24px; - min-height: 24px; } - -.fd-image--m { - width: 36px; - height: 36px; - max-width: 36px; - max-height: 36px; - min-width: 36px; - min-height: 36px; } - -.fd-image--l { - width: 48px; - height: 48px; - max-width: 48px; - max-height: 48px; - min-width: 48px; - min-height: 48px; } - -.fd-image--circle { - border-radius: 50%; } - -/*! -.fd-global-nav+(--no-border) - .fd-global-nav__content+() - .fd-global-nav__title+() -*/ -.fd-global-nav { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - border-bottom: solid 1px #eeeeef; - background: #ffffff; - height: 50px; - display: flex; - color: #515559; - position: relative; } - .fd-global-nav__group { - min-height: 50px; } - .fd-global-nav__group--left { - position: absolute; - left: 0; - top: 0; } - .fd-global-nav__group--right { - position: absolute; - right: 0; - top: 0; - display: flex; - align-items: center; } - .fd-global-nav__side-menu, .fd-global-nav__logo, .fd-global-nav__product-name { - display: inline-block; - height: 50px; - vertical-align: middle; } - .fd-global-nav__side-menu { - display: inline-flex; - align-items: center; } - .fd-global-nav__logo { - padding-left: 16px; - font-weight: bold; - background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MTIuMzggMjA0Ij48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsLXJ1bGU6ZXZlbm9kZH0uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCl9LmNscy0ye2ZpbGw6I2ZmZn08L3N0eWxlPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iMjA2LjE5IiB4Mj0iMjA2LjE5IiB5Mj0iMjA0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDBiOGYxIi8+PHN0b3Agb2Zmc2V0PSIuMDIiIHN0b3AtY29sb3I9IiMwMWI2ZjAiLz48c3RvcCBvZmZzZXQ9Ii4zMSIgc3RvcC1jb2xvcj0iIzBkOTBkOSIvPjxzdG9wIG9mZnNldD0iLjU4IiBzdG9wLWNvbG9yPSIjMTc3NWM4Ii8+PHN0b3Agb2Zmc2V0PSIuODIiIHN0b3AtY29sb3I9IiMxYzY1YmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxZTVmYmIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+U0FQX2dyYWRfUl9zY3JuX1plaWNoZW5mbMOkY2hlIDE8L3RpdGxlPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTAgMjA0aDIwOC40MUw0MTIuMzggMEgwdjIwNCIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTI0NC43MyAzOC4zNmgtNDAuNnY5Ni41MmwtMzUuNDYtOTYuNTVoLTM1LjE2bC0zMC4yNyA4MC43MkMxMDAgOTguNyA3OSA5MS42NyA2Mi40IDg2LjQgNTEuNDYgODIuODkgMzkuODUgNzcuNzIgNDAgNzJjLjA5LTQuNjggNi4yMy05IDE4LjM4LTguMzggOC4xNy40MyAxNS4zNyAxLjA5IDI5LjcxIDhsMTQuMS0yNC41NUM4OS4wNiA0MC40MiA3MSAzNi4yMSA1Ni4xNyAzNi4xOWgtLjA5Yy0xNy4yOCAwLTMxLjY4IDUuNi00MC42IDE0LjgzQTM0LjIzIDM0LjIzIDAgMCAwIDUuNzcgNzQuN0M1LjU0IDg3LjE1IDEwLjExIDk2IDE5LjcxIDEwM2M4LjEgNS45NCAxOC40NiA5Ljc5IDI3LjYgMTIuNjIgMTEuMjcgMy40OSAyMC40NyA2LjUzIDIwLjM2IDEzQTkuNTcgOS41NyAwIDAgMSA2NSAxMzVjLTIuODEgMi45LTcuMTMgNC0xMy4wOSA0LjEtMTEuNDkuMjQtMjAtMS41Ni0zMy42MS05LjU5TDUuNzcgMTU0LjQyYTkzLjc3IDkzLjc3IDAgMCAwIDQ2IDEyLjIyaDIuMTFjMTQuMjQtLjI1IDI1Ljc0LTQuMzEgMzQuOTItMTEuNzEuNTMtLjQxIDEtLjg0IDEuNDktMS4yOGwtNC4xMiAxMC44NUgxMjNsNi4xOS0xOC44MmE2Ny40NiA2Ny40NiAwIDAgMCAyMS42OCAzLjQzIDY4LjMzIDY4LjMzIDAgMCAwIDIxLjE2LTMuMjVsNiAxOC42NGg2MC4xNHYtMzloMTMuMTFjMzEuNzEgMCA1MC40Ni0xNi4xNSA1MC40Ni00My4yIDAtMzAuMTEtMTguMjItNDMuOTQtNTcuMDEtNDMuOTR6TTE1MC45MSAxMjFhMzYuOTMgMzYuOTMgMCAwIDEtMTMtMi4yOGwxMi44Ny00MC41OWguMjJsMTIuNjUgNDAuNzFhMzguNSAzOC41IDAgMCAxLTEyLjc0IDIuMTZ6bTk2LjItMjMuMzNoLTguOTRWNjQuOTFoOC45NGMxMS45MyAwIDIxLjQ0IDQgMjEuNDQgMTYuMTQgMCAxMi42LTkuNTEgMTYuNTctMjEuNDQgMTYuNTciLz48L3N2Zz4=); - background-repeat: no-repeat; - width: 60px; - margin-left: 20px; - height: 28px; - background-size: contain; } - .fd-global-nav__product-name { - padding: 20px 0 0 8px; - font-size: 0.92857rem; - line-height: 1.23077; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 600; } - .fd-global-nav__launchpad { - padding-top: 0; - max-width: 400px; - margin: 0 auto; - position: relative; } - .fd-global-nav__launchpad button { - min-height: 48px; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMyMTI2MkMiIGQ9Ik0xMS45MzUgMS40NzVMNi4xODggNy45MjdhLjI2NC4yNjQgMCAwIDEtLjM3OCAwTC4wNjUgMS40NzVhLjIzNi4yMzYgMCAwIDEgLjAyNi0uMzQzTDEuMzgxLjA1OGEuMjUzLjI1MyAwIDAgMSAuMTYzLS4wNTlMMS41NjMgMGEuMjUyLjI1MiAwIDAgMSAuMTcxLjA4NWw0LjI2NSA0Ljg4IDQuMjY3LTQuODhhLjI1Mi4yNTIgMCAwIDEgLjM1Mi0uMDI3bDEuMjkxIDEuMDc0Yy4wNS4wNDIuMDgxLjEwMi4wODYuMTY2YS4yMzYuMjM2IDAgMCAxLS4wNi4xNzd6Ii8+PC9zdmc+); - background-repeat: no-repeat; - background-position: calc(100% - 12px) center; - padding-right: 30px; - color: #515559; } - .fd-global-nav__launchpad button:hover { - border-color: transparent; - background-color: #fafafa; } - .fd-global-nav__launchpad button:focus, .fd-global-nav__launchpad button[aria-expanded="true"] { - border-color: transparent; - background-color: rgba(10, 110, 209, 0.07); } - .fd-global-nav__launchpad .fd-mega-menu { - position: absolute; - top: 50px; - left: 0; } - .fd-global-nav__context-menu { - border-left: 1px solid #eeeeef; - border-right: 1px solid #eeeeef; - margin-right: 8px; } - .fd-global-nav__context-menu button { - min-height: 48px; - color: #515559; } - .fd-global-nav__actions { - display: inline-block; } - .fd-global-nav__search { - position: relative; - display: inline-block; } - .fd-global-nav__search input { - position: absolute; - left: -176px; - top: 0px; - background: #ffffff; - border-radius: 0; - border: none; - min-width: 176px; - border-bottom: 1px solid #eeeeef; - box-shadow: 0 5px #fff, 0px -5px #fff; } - .fd-global-nav__search input[aria-hidden="true"] { - display: none; } - .fd-global-nav.is-disabled, .fd-global-nav[disabled] { - opacity: 0.5; } - -/*! -.fd-side-nav - .fd-side-nav__group - .fd-side-nav__title - .fd-side-nav__list - .fd-side-nav__item - .fd-side-nav__link (.has-child, .is-active, .is-expanded) - .fd-side-nav__sublist - .fd-side-nav__subitem - .fd-side-nav__sublink (.is-active) -*/ -.fd-side-nav { - background-color: #ffffff; - min-width: 250px; - margin: 0; - padding: 0; } - .fd-side-nav__group { - list-style: none; - margin-bottom: 0; } - .fd-side-nav__title { - display: block; - margin-bottom: 0; - padding: 8px 20px; - font-size: 0.78571rem; - line-height: 1.45455; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - text-transform: uppercase; - color: #6f7275; - background: #fafafa; } - .fd-side-nav__list, .fd-side-nav__sublist { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; - flex-direction: column; } - .fd-side-nav__sublist[aria-hidden="true"] { - display: none; } - .fd-side-nav__link, .fd-side-nav__sublink { - padding: 10px 20px; - color: #515559; - display: block; - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; } - .fd-side-nav__link:hover, .fd-side-nav__sublink:hover { - background-color: #fafafa; } - .fd-side-nav__link.is-selected, .fd-side-nav__link.is-expanded, .fd-side-nav__link[aria-selected="true"], .fd-side-nav__link[aria-expanded="true"], .fd-side-nav__sublink.is-selected, .fd-side-nav__sublink.is-expanded, .fd-side-nav__sublink[aria-selected="true"], .fd-side-nav__sublink[aria-expanded="true"] { - color: #515559; - background-color: rgba(10, 110, 209, 0.07); - font-weight: 700; } - .fd-side-nav__link.is-disabled, .fd-side-nav__link[aria-disabled="true"], .fd-side-nav__sublink.is-disabled, .fd-side-nav__sublink[aria-disabled="true"] { - color: #6f7275; } - .fd-side-nav__link.has-child { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMyMTI2MkMiIGQ9Ik0xMS45MzUgMS40NzVMNi4xODggNy45MjdhLjI2NC4yNjQgMCAwIDEtLjM3OCAwTC4wNjUgMS40NzVhLjIzNi4yMzYgMCAwIDEgLjAyNi0uMzQzTDEuMzgxLjA1OGEuMjUzLjI1MyAwIDAgMSAuMTYzLS4wNTlMMS41NjMgMGEuMjUyLjI1MiAwIDAgMSAuMTcxLjA4NWw0LjI2NSA0Ljg4IDQuMjY3LTQuODhhLjI1Mi4yNTIgMCAwIDEgLjM1Mi0uMDI3bDEuMjkxIDEuMDc0Yy4wNS4wNDIuMDgxLjEwMi4wODYuMTY2YS4yMzYuMjM2IDAgMCAxLS4wNi4xNzd6Ii8+PC9zdmc+); - background-repeat: no-repeat; - background-position: calc(100% - 12px) center; } - .fd-side-nav__link.is-expanded, .fd-side-nav__link[aria-expanded="true"] { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQ5LjMgKDUxMTY3KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5VbnRpdGxlZDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJkb3dubG9hZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4wMDAwMDAsIDUuMDAwMDAwKSByb3RhdGUoLTE4MC4wMDAwMDApIHRyYW5zbGF0ZSgtNi4wMDAwMDAsIC01LjAwMDAwMCkgIiBmaWxsPSIjMjEyNjJDIj4KICAgICAgICAgICAgPHBhdGggZD0iTTExLjkzNSwyLjQ3NSBMNi4xODgsOC45MjcgQzYuMTM4MzEzODQsOC45Nzc5NDY4NyA2LjA3MDE2Mzg4LDkuMDA2Njc2OTEgNS45OTksOS4wMDY2NzY5MSBDNS45Mjc4MzYxMiw5LjAwNjY3NjkxIDUuODU5Njg2MTYsOC45Nzc5NDY4NyA1LjgxLDguOTI3IEwwLjA2NSwyLjQ3NSBDMC4wMjEwMzMzNzczLDIuNDI2OTMzNjMgLTAuMDAxMTEwMzExODMsMi4zNjI4MzE4NyAwLjAwMzgxMzQxNzEyLDIuMjk3ODc2NTMgQzAuMDA4NzM3MTQ2MDcsMi4yMzI5MjExOCAwLjA0MDI5MDM0NzcsMi4xNzI4ODk3NSAwLjA5MSwyLjEzMiBMMS4zODEsMS4wNTggQzEuNDI2NjkwMywxLjAxOTc1MjI1IDEuNDg0NDE0MTUsMC45OTg4NTgzMzkgMS41NDQsMC45OTkgTDEuNTYzLDEgQzEuNjI4OTQzNzMsMS4wMDQ4MDMxNSAxLjY5MDM1ODEyLDEuMDM1MzMwNzggMS43MzQsMS4wODUgTDUuOTk5LDUuOTY1IEwxMC4yNjYsMS4wODUgQzEwLjM1NjM3MjUsMC45ODE1ODQ0MTYgMTAuNTEyOTEyNiwwLjk2OTU3NzA4NSAxMC42MTgsMS4wNTggTDExLjkwOSwyLjEzMiBDMTEuOTU5LDIuMTc0IDExLjk5LDIuMjM0IDExLjk5NSwyLjI5OCBDMTIuMDAwMjA5MSwyLjM2Mjc0Mjc4IDExLjk3ODUwNDksMi40MjY3NzA0NCAxMS45MzUsMi40NzUgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=); } - .fd-side-nav__sublink { - font-weight: normal; - padding-left: 40px; } - .fd-side-nav__sublink[aria-hidden="true"] { - display: none; } - .fd-side-nav__icon { - padding-right: 10px; } - .fd-side-nav--icons { - min-width: auto; } - .fd-side-nav--icons .fd-side-nav__icon { - padding-right: 0; } - -/*! -.fd-link -*/ -.fd-link { - color: #0a6ed1; - border-bottom: solid 1px #0a6ed1; } - .fd-link:hover { - color: #085caf; - border-bottom-color: #085caf; } - .fd-link:visited { - color: #3b0ad1; - border-bottom-color: #3b0ad1; } - .fd-link:active, .fd-link[aria-selected="true"], .fd-link.is-selected, .fd-link[aria-pressed="true"], .fd-link.is-pressed, .fd-link:focus { - color: #0854a0; - border-bottom-color: #0854a0; } - .fd-link[aria-disabled="true"], .fd-link.is-disabled { - color: rgba(10, 110, 209, 0.4); - border-bottom-color: rgba(10, 110, 209, 0.4); } - -/*! -.fd-image+((--circle), (--s|--m|--l)) -*/ -[class*="fd-identifier"] { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: inline-block; - vertical-align: middle; - text-align: center; - background-repeat: no-repeat; - background-size: cover; - background-position: 50%; - border-radius: 4px; - background-color: #6f7275; - color: #ffffff; } - -.fd-identifier--s { - width: 24px; - height: 24px; - max-width: 24px; - max-height: 24px; - min-width: 24px; - min-height: 24px; - font-size: 0.78571rem; - line-height: 1.45455; - font-weight: 400; - font-weight: 700; - font-stretch: condensed; - line-height: 24px; } - .fd-identifier--s::before { - font-size: 0.85714rem; - line-height: 1; - line-height: 24px; } - -.fd-identifier--m { - width: 36px; - height: 36px; - max-width: 36px; - max-height: 36px; - min-width: 36px; - min-height: 36px; - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - line-height: 36px; } - .fd-identifier--m::before { - font-size: 1.42857rem; - line-height: 1; - line-height: 36px; } - -.fd-identifier--l { - width: 48px; - height: 48px; - max-width: 48px; - max-height: 48px; - min-width: 48px; - min-height: 48px; - font-size: 1.28571rem; - line-height: 1.33333; - font-weight: 400; - line-height: 48px; } - .fd-identifier--l::before { - font-size: 1.71429rem; - line-height: 1; - line-height: 48px; } - -.fd-identifier--circle { - border-radius: 50%; } - -.fd-identifier--transparent { - background-color: transparent; - color: #32363a; } - -/*! -.fd-mega-menu+(--no-border) - .fd-mega-menu__content+() - .fd-mega-menu__title+() -*/ -.fd-mega-menu { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - background-color: #ffffff; - width: 250px; - margin: 0; - padding: 0; - background-color: #ffffff; - box-shadow: 0 5px 20px 0 rgba(50, 54, 58, 0.08); - border-radius: 4px; - border: none; } - .fd-mega-menu__header { - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07); } - .fd-mega-menu__header-link { - padding: 10px 20px; - color: #515559; } - .fd-mega-menu__header-link:before { - padding-right: 10px; - font-size: 22px; - vertical-align: sub; } - .fd-mega-menu__group { - list-style: none; - margin-bottom: 0; } - .fd-mega-menu__title { - display: block; - margin-bottom: 0; - padding: 8px 20px; - font-size: 0.78571rem; - line-height: 1.45455; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; - text-transform: uppercase; - color: #6f7275; - background: #fafafa; } - .fd-mega-menu__list, .fd-mega-menu__sublist { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - flex-wrap: wrap; - padding-left: 0; - margin-bottom: 0; - list-style: none; - flex-direction: column; } - .fd-mega-menu__item { - position: relative; } - .fd-mega-menu__sublist { - width: 200px; - background-color: #ffffff; - box-shadow: 0 5px 20px 0 rgba(50, 54, 58, 0.08); - border-radius: 4px; - position: absolute; - right: -200px; - top: 0; } - .fd-mega-menu__sublist[aria-hidden="true"] { - display: none; } - .fd-mega-menu__link, .fd-mega-menu__sublink { - padding: 10px 20px; - color: #515559; - display: block; - font-size: 1rem; - line-height: 1.42857; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; } - .fd-mega-menu__link:hover, .fd-mega-menu__sublink:hover { - background-color: #fafafa; } - .fd-mega-menu__link.is-selected, .fd-mega-menu__link.is-expanded, .fd-mega-menu__link[aria-selected="true"], .fd-mega-menu__link[aria-expanded="true"], .fd-mega-menu__sublink.is-selected, .fd-mega-menu__sublink.is-expanded, .fd-mega-menu__sublink[aria-selected="true"], .fd-mega-menu__sublink[aria-expanded="true"] { - color: #515559; - background-color: rgba(10, 110, 209, 0.07); - font-weight: bold; } - .fd-mega-menu__link.is-disabled, .fd-mega-menu__link[aria-disabled="true"], .fd-mega-menu__sublink.is-disabled, .fd-mega-menu__sublink[aria-disabled="true"] { - color: #6f7275; } - .fd-mega-menu__link.has-child { - background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4LjAxIDExLjk5Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzIxMjYyYzt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmRvd25sb2FkPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zLjQ3LTEuOTMsOS45MiwzLjgxYS4yNy4yNywwLDAsMSwwLC4zOGgwTDMuNDcsOS45NGEuMjMuMjMsMCwwLDEtLjMzLDBoMEwyLjA1LDguNjJhLjI4LjI4LDAsMCwxLDAtLjE2djBhLjIxLjIxLDAsMCwxLC4wOC0uMTdMNyw0LDIuMDgtLjI2YS4yNy4yNywwLDAsMSwwLS4zNkwzLjEzLTEuOTFBLjIxLjIxLDAsMCwxLDMuMjktMiwuMi4yLDAsMCwxLDMuNDctMS45M1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yIDEuOTkpIi8+PC9zdmc+); - background-repeat: no-repeat; - background-position: calc(100% - 12px) center; - background-size: 8px; } - .fd-mega-menu__sublink { - font-weight: normal; } - .fd-mega-menu__sublink[aria-hidden="true"] { - display: none; } - .fd-mega-menu[aria-hidden="true"] { - display: none; } - .fd-mega-menu.is-disabled, .fd-mega-menu[disabled] { - opacity: 0.5; } - -/*! -.fd-button-group+() - .fd-button -*/ -.fd-button-group { - padding: 0; - margin: 0; - display: inline-flex; - vertical-align: middle; } - .fd-button-group > * { - margin: 0; } - .fd-button-group > *:not(:first-child):not(:last-child) { - border-radius: 0; } - .fd-button-group > *:not(:last-child) { - border-right: none; } - .fd-button-group > *:first-child { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - .fd-button-group > *:last-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } - -/*! -.fd-tile+() - .fd-tile__media+() - .fd-tile__content+() - .fd-tile__title+() - .fd-tile__actions+() -*/ -.fd-tile { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - display: flex; - color: #6f7275; - background-color: #ffffff; } - .fd-tile--button, .fd-tile[role="button"] { - cursor: pointer; - transition: box-shadow 0.125s ease-in; } - .fd-tile--button:hover, .fd-tile[role="button"]:hover { - box-shadow: 0 0 5px 0 rgba(111, 114, 117, 0.4); - position: relative; - z-index: 1; } - .fd-tile[aria-disabled="true"], .fd-tile.is-disabled { - opacity: 0.4; } - .fd-tile__media { - padding: 10px 0 10px 20px; } - .fd-tile__content { - flex: 1; - padding: 10px 20px 10px 12px; - align-self: center; } - .fd-tile__content:first-child { - padding-left: 20px; } - .fd-tile__title { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; - color: #515559; - margin-bottom: 0; } - .fd-tile__actions { - padding: 12px 20px 12px 12px; } - .fd-tile__actions .fd-dropdown__menu { - min-width: auto; - text-align: left; } - -/*! -.fd-product-tile+() - .fd-product-tile__media+() - .fd-product-tile__title+() -*/ -.fd-product-tile { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - color: #6f7275; - background-color: #ffffff; } - .fd-product-tile--button, .fd-product-tile[role="button"] { - cursor: pointer; - transition: box-shadow 0.125s ease-in; } - .fd-product-tile--button:hover, .fd-product-tile[role="button"]:hover { - box-shadow: 0 0 5px 0 rgba(111, 114, 117, 0.4); - position: relative; - z-index: 1; } - .fd-product-tile[aria-disabled="true"], .fd-product-tile.is-disabled { - opacity: 0.4; } - .fd-product-tile__media { - width: 100%; - min-height: 210px; - background-repeat: no-repeat; - background-position: center center; - background-size: cover; } - .fd-product-tile__content { - padding: 20px 20px; } - .fd-product-tile__title { - font-size: 1.14286rem; - line-height: 1.25; - font-weight: 400; - color: #32363a; - margin-bottom: 0; } - -/*! -.fd-tile-grid+(--2col | --4col | --5col | --6col) -*/ -.fd-tile-grid { - display: flex; - flex-wrap: wrap; - flex-direction: column; - position: relative; } - .fd-tile-grid > * { - margin-bottom: 0; - border-radius: 0 !important; - position: relative; - border: solid 1px #f3f4f5; - border-width: 0 1px 1px 0; } - @media (min-width: 800px) { - .fd-tile-grid { - /* flex fallback */ - display: flex; - flex-direction: row; - flex-wrap: wrap; - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 0; } - .fd-tile-grid--2col { - grid-template-columns: repeat(2, 1fr); } - .fd-tile-grid--3col { - grid-template-columns: repeat(3, 1fr); } - .fd-tile-grid--4col { - grid-template-columns: repeat(4, 1fr); } - .fd-tile-grid--5col { - grid-template-columns: repeat(5, 1fr); } - .fd-tile-grid--6col { - grid-template-columns: repeat(6, 1fr); } } - -/*! -.fd-tag+(--no-border) - .fd-tag__content+() - .fd-tag__title+() -*/ -.fd-tag { - font-size: 14px; - line-height: 1.42857; - color: #32363a; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; - color: #515559; - background-color: rgba(10, 110, 209, 0.07); - line-height: 24px; - vertical-align: middle; - display: inline-block; - padding-left: 8px; - padding-right: 8px; - border-radius: 4px; - border-width: 1px; - border-style: solid; - border-color: transparent; - cursor: pointer; } - .fd-tag::after { - font-family: "SAP-icons"; - font-style: normal; - font-weight: normal; - text-align: center; - display: inline-block; - text-decoration: inherit; - text-transform: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - speak: none; } - .fd-tag::after { - content: ""; } - .fd-tag::after { - font-size: 0.85714rem; - line-height: 1; } - .fd-tag::after { - color: #0a6ed1; - margin-left: 4px; } - -/* -see layouts/panel-grid -*/ -/* -see layouts/panel -*/ -.fd-has-text-transform-none { - text-transform: none !important; } - -.fd-has-text-transform-uppercase { - text-transform: uppercase !important; } - -.fd-has-text-transform-lowercase { - text-transform: lowercase !important; } - -.fd-has-font-weight-bold { - font-weight: bold !important; } - -.fd-has-font-style-italic { - font-style: italic !important; } - -.fd-has-text-align-center { - text-align: center !important; } - -.fd-has-text-align-right { - text-align: right !important; } - -.fd-has-float-left { - float: left !important; } - -.fd-has-float-right { - float: right !important; } - -.fd-has-border-radius-0 { - border-radius: 0 !important; } - -.fd-has-border-radius-50percent { - border-radius: 50% !important; } - -.fd-has-type-minus-3 { - font-size: 0.78571rem; - line-height: 1.45455; - font-weight: 400; } - -.fd-has-type-minus-2 { - font-size: 0.85714rem; - line-height: 1.33333; - font-weight: 400; } - -.fd-has-type-minus-1 { - font-size: 0.92857rem; - line-height: 1.23077; - font-weight: 400; } - -.fd-has-type-0 { - font-size: 1rem; - line-height: 1.42857; - font-weight: 400; } - -.fd-has-type-1 { - font-size: 1.14286rem; - line-height: 1.25; - font-weight: 400; } - -.fd-has-type-2 { - font-size: 1.28571rem; - line-height: 1.33333; - font-weight: 400; } - -.fd-has-type-3 { - font-size: 1.71429rem; - line-height: 1.33333; - font-weight: 400; } - -.fd-has-type-4 { - font-size: 2.14286rem; - line-height: 1.2; - font-weight: 300; } - -.fd-has-type-5 { - font-size: 3.42857rem; - line-height: 1.08333; - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; - font-weight: 400; } - -.fd-has-font-family-body { - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } - -.fd-has-font-family-header { - font-family: '72', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } - -.fd-has-font-family-code { - font-family: monospace; } - -.fd-has-font-weight-light { - font-weight: 300; } - -.fd-has-font-weight-reg { - font-weight: 400; } - -.fd-has-font-weight-med { - font-weight: 500; } - -.fd-has-font-weight-semi { - font-weight: 600; } - -.fd-has-font-weight-bold { - font-weight: 700; } - -.fd-has-color-action, -.fd-has-color-action-1 { - color: #0a6ed1 !important; } - -.fd-has-color-action-2 { - color: #9AB7E1 !important; } - -.fd-has-color-text, -.fd-has-color-text-1 { - color: #32363a !important; } - -.fd-has-color-text-2 { - color: #515559 !important; } - -.fd-has-color-text-3 { - color: #6f7275 !important; } - -.fd-has-color-text-inverse, -.fd-has-color-text-inverse-1 { - color: #ffffff !important; } - -.fd-has-color-text-inverse-2 { - color: #f5f5f5 !important; } - -.fd-has-color-text-inverse-3 { - color: #ebebeb !important; } - -.fd-has-color-background, -.fd-has-color-background-1 { - color: #f3f4f5 !important; } - -.fd-has-color-background-2 { - color: #ffffff !important; } - -.fd-has-color-neutral, -.fd-has-color-neutral-1 { - color: #fafafa !important; } - -.fd-has-color-neutral-2 { - color: #eeeeef !important; } - -.fd-has-color-neutral-3 { - color: #dededf !important; } - -.fd-has-color-status, -.fd-has-color-status-1 { - color: #359c46 !important; } - -.fd-has-color-status-2 { - color: #f59518 !important; } - -.fd-has-color-status-3 { - color: #ee0000 !important; } - -.fd-has-color-accent, -.fd-has-color-accent-1 { - color: #5899da !important; } - -.fd-has-color-accent-2 { - color: #ed4a7b !important; } - -.fd-has-color-accent-3 { - color: #945ecf !important; } - -.fd-has-color-accent-4 { - color: #13a4b4 !important; } - -.fd-has-color-accent-5 { - color: #7ca10c !important; } - -.fd-has-color-accent-6 { - color: #bf399e !important; } - -.fd-has-color-accent-7 { - color: #ee6868 !important; } - -.fd-has-color-accent-8 { - color: #686ddf !important; } - -.fd-has-color-accent-9 { - color: #6c8893 !important; } - -.fd-has-background-image { - background-repeat: no-repeat; - background-position: center; - background-size: contain; } - -.fd-has-background-fixed { - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; } - -.fd-has-background-size-contain { - background-size: contain !important; } - -.fd-has-background-size-cover { - background-size: cover !important; } - -.fd-has-background-color-transparent, -.fd-has-background-color-none { - background-color: transparent !important; } - -.fd-has-background-color-action, -.fd-has-background-color-action-1 { - background-color: #0a6ed1 !important; } - -.fd-has-background-color-action-2 { - background-color: #9AB7E1 !important; } - -.fd-has-background-color-text, -.fd-has-background-color-text-1 { - background-color: #32363a !important; } - -.fd-has-background-color-text-2 { - background-color: #515559 !important; } - -.fd-has-background-color-text-3 { - background-color: #6f7275 !important; } - -.fd-has-background-color-text-inverse, -.fd-has-background-color-text-inverse-1 { - background-color: #ffffff !important; } - -.fd-has-background-color-text-inverse-2 { - background-color: #f5f5f5 !important; } - -.fd-has-background-color-text-inverse-3 { - background-color: #ebebeb !important; } - -.fd-has-background-color-background, -.fd-has-background-color-background-1 { - background-color: #f3f4f5 !important; } - -.fd-has-background-color-background-2 { - background-color: #ffffff !important; } - -.fd-has-background-color-neutral, -.fd-has-background-color-neutral-1 { - background-color: #fafafa !important; } - -.fd-has-background-color-neutral-2 { - background-color: #eeeeef !important; } - -.fd-has-background-color-neutral-3 { - background-color: #dededf !important; } - -.fd-has-background-color-status, -.fd-has-background-color-status-1 { - background-color: #359c46 !important; } - -.fd-has-background-color-status-2 { - background-color: #f59518 !important; } - -.fd-has-background-color-status-3 { - background-color: #ee0000 !important; } - -.fd-has-background-color-accent, -.fd-has-background-color-accent-1 { - background-color: #5899da !important; } - -.fd-has-background-color-accent-2 { - background-color: #ed4a7b !important; } - -.fd-has-background-color-accent-3 { - background-color: #945ecf !important; } - -.fd-has-background-color-accent-4 { - background-color: #13a4b4 !important; } - -.fd-has-background-color-accent-5 { - background-color: #7ca10c !important; } - -.fd-has-background-color-accent-6 { - background-color: #bf399e !important; } - -.fd-has-background-color-accent-7 { - background-color: #ee6868 !important; } - -.fd-has-background-color-accent-8 { - background-color: #686ddf !important; } - -.fd-has-background-color-accent-9 { - background-color: #6c8893 !important; } - -.fd-has-margin-none { - margin: 0; } - -.fd-has-padding-none { - padding: 0; } - -.fd-has-margin-top-none { - margin-top: 0 !important; } - -.fd-has-padding-top-none { - padding-top: 0 !important; } - -.fd-has-margin-right-none { - margin-right: 0 !important; } - -.fd-has-padding-right-none { - padding-right: 0 !important; } - -.fd-has-margin-bottom-none { - margin-bottom: 0 !important; } - -.fd-has-padding-bottom-none { - padding-bottom: 0 !important; } - -.fd-has-margin-left-none { - margin-left: 0 !important; } - -.fd-has-padding-left-none { - padding-left: 0 !important; } - -.fd-has-height-base { - height: 4px; } - -.fd-has-margin-base { - margin: 4px; } - -.fd-has-padding-base { - padding: 4px; } - -.fd-has-margin-top-base { - margin-top: 4px; } - -.fd-has-padding-top-base { - padding-top: 4px; } - -.fd-has-margin-right-base { - margin-right: 4px; } - -.fd-has-padding-right-base { - padding-right: 4px; } - -.fd-has-margin-bottom-base { - margin-bottom: 4px; } - -.fd-has-padding-bottom-base { - padding-bottom: 4px; } - -.fd-has-margin-left-base { - margin-left: 4px; } - -.fd-has-padding-left-base { - padding-left: 4px; } - -.fd-has-height-xxs { - height: 8px; } - -.fd-has-margin-xxs { - margin: 8px; } - -.fd-has-padding-xxs { - padding: 8px; } - -.fd-has-margin-top-xxs { - margin-top: 8px; } - -.fd-has-padding-top-xxs { - padding-top: 8px; } - -.fd-has-margin-right-xxs { - margin-right: 8px; } - -.fd-has-padding-right-xxs { - padding-right: 8px; } - -.fd-has-margin-bottom-xxs { - margin-bottom: 8px; } - -.fd-has-padding-bottom-xxs { - padding-bottom: 8px; } - -.fd-has-margin-left-xxs { - margin-left: 8px; } - -.fd-has-padding-left-xxs { - padding-left: 8px; } - -.fd-has-height-xs { - height: 12px; } - -.fd-has-margin-xs { - margin: 12px; } - -.fd-has-padding-xs { - padding: 12px; } - -.fd-has-margin-top-xs { - margin-top: 12px; } - -.fd-has-padding-top-xs { - padding-top: 12px; } - -.fd-has-margin-right-xs { - margin-right: 12px; } - -.fd-has-padding-right-xs { - padding-right: 12px; } - -.fd-has-margin-bottom-xs { - margin-bottom: 12px; } - -.fd-has-padding-bottom-xs { - padding-bottom: 12px; } - -.fd-has-margin-left-xs { - margin-left: 12px; } - -.fd-has-padding-left-xs { - padding-left: 12px; } - -.fd-has-height-s { - height: 16px; } - -.fd-has-margin-s { - margin: 16px; } - -.fd-has-padding-s { - padding: 16px; } - -.fd-has-margin-top-s { - margin-top: 16px; } - -.fd-has-padding-top-s { - padding-top: 16px; } - -.fd-has-margin-right-s { - margin-right: 16px; } - -.fd-has-padding-right-s { - padding-right: 16px; } - -.fd-has-margin-bottom-s { - margin-bottom: 16px; } - -.fd-has-padding-bottom-s { - padding-bottom: 16px; } - -.fd-has-margin-left-s { - margin-left: 16px; } - -.fd-has-padding-left-s { - padding-left: 16px; } - -.fd-has-height-reg { - height: 20px; } - -.fd-has-margin-reg { - margin: 20px; } - -.fd-has-padding-reg { - padding: 20px; } - -.fd-has-margin-top-reg { - margin-top: 20px; } - -.fd-has-padding-top-reg { - padding-top: 20px; } - -.fd-has-margin-right-reg { - margin-right: 20px; } - -.fd-has-padding-right-reg { - padding-right: 20px; } - -.fd-has-margin-bottom-reg { - margin-bottom: 20px; } - -.fd-has-padding-bottom-reg { - padding-bottom: 20px; } - -.fd-has-margin-left-reg { - margin-left: 20px; } - -.fd-has-padding-left-reg { - padding-left: 20px; } - -.fd-has-height-m { - height: 32px; } - -.fd-has-margin-m { - margin: 32px; } - -.fd-has-padding-m { - padding: 32px; } - -.fd-has-margin-top-m { - margin-top: 32px; } - -.fd-has-padding-top-m { - padding-top: 32px; } - -.fd-has-margin-right-m { - margin-right: 32px; } - -.fd-has-padding-right-m { - padding-right: 32px; } - -.fd-has-margin-bottom-m { - margin-bottom: 32px; } - -.fd-has-padding-bottom-m { - padding-bottom: 32px; } - -.fd-has-margin-left-m { - margin-left: 32px; } - -.fd-has-padding-left-m { - padding-left: 32px; } - -.fd-has-height-l { - height: 36px; } - -.fd-has-margin-l { - margin: 36px; } - -.fd-has-padding-l { - padding: 36px; } - -.fd-has-margin-top-l { - margin-top: 36px; } - -.fd-has-padding-top-l { - padding-top: 36px; } - -.fd-has-margin-right-l { - margin-right: 36px; } - -.fd-has-padding-right-l { - padding-right: 36px; } - -.fd-has-margin-bottom-l { - margin-bottom: 36px; } - -.fd-has-padding-bottom-l { - padding-bottom: 36px; } - -.fd-has-margin-left-l { - margin-left: 36px; } - -.fd-has-padding-left-l { - padding-left: 36px; } - -.fd-has-height-xl { - height: 40px; } - -.fd-has-margin-xl { - margin: 40px; } - -.fd-has-padding-xl { - padding: 40px; } - -.fd-has-margin-top-xl { - margin-top: 40px; } - -.fd-has-padding-top-xl { - padding-top: 40px; } - -.fd-has-margin-right-xl { - margin-right: 40px; } - -.fd-has-padding-right-xl { - padding-right: 40px; } - -.fd-has-margin-bottom-xl { - margin-bottom: 40px; } - -.fd-has-padding-bottom-xl { - padding-bottom: 40px; } - -.fd-has-margin-left-xl { - margin-left: 40px; } - -.fd-has-padding-left-xl { - padding-left: 40px; } - -.fd-has-clearfix::after { - content: ""; - display: table; - clear: both; } - -.fd-has-display-flex { - display: flex; } - -.fd-has-display-block { - display: block; } - -.fd-has-align-items-center { - align-items: center; } - -.fd-has-flex-grow-1 { - flex-grow: 1; } - -.fd-has-grid-row-span-2 { - grid-row: span 2; } - -.fd-has-grid-column-span-2 { - grid-column: span 2; } - -.fd-has-grid-row-span-3 { - grid-row: span 3; } - -.fd-has-grid-column-span-3 { - grid-column: span 3; } - -.fd-has-grid-row-span-4 { - grid-row: span 4; } - -.fd-has-grid-column-span-4 { - grid-column: span 4; } - -.fd-has-grid-row-span-5 { - grid-row: span 5; } - -.fd-has-grid-column-span-5 { - grid-column: span 5; } - -.fd-has-grid-row-span-6 { - grid-row: span 6; } - -.fd-has-grid-column-span-6 { - grid-column: span 6; } - -.fd-has-grid-gap-0, -.fd-has-grid-gap-none { - grid-gap: 0 !important; } - -.fd-has-grid-gap-1 { - grid-gap: 1px !important; } - -.App { - background-color: white; } - -.fd-tile__content .fd-badge, -.fd-tile__content .fd-label, -.fd-tile__content .fd-status-label, -.fd-tile__content .fd-tag, -.fd-tile__content [class*='fd-identifier'], -.fd-tile__content [class*='fd-image'], -.fd-tile__content [class*='fd-form'] { - margin-right: 10px; } - -.fd-tile__content .fd-button--grouped { - margin-right: 0; } - -.fd-tile__content .fd-input-group [class*='fd-button'] { - margin-right: 0; } - -.fd-tabs__content { - padding-top: 10px; - padding-bottom: 10px; } - -.docs-component { - margin-bottom: -28px; - border-radius: 4px; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding-bottom: 8px; - border: 1px solid #ccc; } - -.fd-side-nav--icons { - max-width: 65px; } - -.container { - display: flex; - justify-content: space-between; - height: 100vh; - overflow: hidden; - width: 90%; - margin-left: auto; - margin-right: auto; } - -.logo { - font-size: 1.25rem; - margin-bottom: 0; - display: flex; - justify-content: center; } - .logo > a { - color: inherit; } - -.logo-subtitle { - font-size: 0.75rem; } - -.sidebar { - color: #21262c; - min-width: 16rem; - background-color: #f1f3f6; } - -.nav { - list-style: none; - border-top: 2px solid #dbe7f3; - height: 90%; - overflow: auto; } - -.nav-item { - display: block; - color: #21262c; - font-size: 0.875rem; - position: relative; - padding: 13px 40px; } - -.side-nav__headers { - color: #424e5a; - padding: 15px 20px; - display: block; } - -.nav-item--selected { - border-left: 6px solid #2fd0c8; } - -.nav-item:hover, -.nav-item--active { - color: #424e5a; - border-left: 6px solid #2fd0c8; - padding-left: 34px; } - -.content { - flex-grow: 1; - overflow-y: scroll; - padding-bottom: 2rem; - background-color: white; } - -.content-margin { - margin-right: auto; - margin-left: auto; - padding-left: 1rem; - padding-right: 1rem; } - -.property-header { - text-align: left; - padding-right: 15px; } - -.header { - margin: 12px 0; } - -input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], input[type=tel], input[type=number], input[type=date], -textarea { - border-radius: 0; } - -.fd-side-nav { - max-width: 250px; } - -.row { - display: flex; } - -.col { - padding-right: 15px; - padding-left: 15px; - -webkit-box-flex: 1; - flex: 1; } - -.form-group { - max-height: 500px; - overflow-y: scroll; - display: block; - padding: 20px; - border: 1px #eee solid; } - -.schema { - display: block; - padding: 20px; - border: 1px #eee solid; } - -.form-group-sublevel { - display: block; - padding: 20px; - border: 1px #eee solid; } - -.tn-form__label { - padding-left: 25px; } - -.fd-calendar__content { - background: white; } - -.fd-date-picker { - display: inline-block; } - -.demo-icon-wrapper { - padding: 10px; - float: left; - width: 16%; - text-align: center; - height: 120px; } diff --git a/src/App.scss b/src/App.scss index 81e90f461..27353c5d3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,6 +1,6 @@ -$fd-icons-path: '../node_modules/fundamental-ui/scss/icons/'; -$fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/'; -@import '../node_modules/fundamental-ui/scss/all.scss'; +$fd-icons-path: '../node_modules/fiori-fundamentals/scss/icons/'; +$fd-fonts-path: '../node_modules/fiori-fundamentals/dist/fonts/'; +@import '../node_modules/fiori-fundamentals/scss/all.scss'; .App { background-color: white; @@ -10,13 +10,16 @@ $fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/'; .fd-badge, .fd-label, .fd-status-label, - .fd-tag, + .fd-token, .fd-dropdown, - .fd-popover, + .fd-button-group, [class*='fd-identifier'], - [class*='fd-image'], - [class*='fd-form'] { - margin-right: 10px; + { + margin-right: 20px; + } + + .fd-popover { + margin-right: 60px; } .fd-button--grouped { @@ -30,7 +33,11 @@ $fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/'; } .fd-doc__margin button { - margin-right: 10px; + margin-right: 20px; + } + + .fd-doc__margin [class*='fd-image'] { + margin-right: 20px; } } @@ -137,18 +144,6 @@ $fd-fonts-path: '../node_modules/fundamental-ui/dist/fonts/'; margin: 12px 0; } -input[type='text'], -input[type='password'], -input[type='email'], -input[type='url'], -input[type='search'], -input[type='tel'], -input[type='number'], -input[type='date'], -textarea { - border-radius: 0; -} - .fd-side-nav { max-width: 250px; } @@ -196,6 +191,10 @@ textarea { display: inline-block; } +.fd-calendar { + display: inline-block; +} + .demo-icon-wrapper { padding: 10px; float: left; diff --git a/src/Badge/Badge.Component.js b/src/Badge/Badge.Component.js index 20adeb236..12e2cb87b 100644 --- a/src/Badge/Badge.Component.js +++ b/src/Badge/Badge.Component.js @@ -76,7 +76,7 @@ export const BadgeComponent = () => {

Default Badge

- + Default Default Default @@ -90,7 +90,7 @@ export const BadgeComponent = () => { Apply modifier="pill" to render a pill version of the badge. - + Default Default @@ -110,7 +110,7 @@ export const BadgeComponent = () => { Apply modifier="filled" to render a filled version of the badge. - + Default Default @@ -127,7 +127,7 @@ export const BadgeComponent = () => {

Label

- + @@ -138,7 +138,7 @@ export const BadgeComponent = () => {

Status Indicator Label with build in status icons

- + Default Default Default @@ -153,7 +153,7 @@ export const BadgeComponent = () => { {statusCode}

Status Indicator Label with any icons

- + Custom Icon Success Warning diff --git a/src/Button/Button.Component.js b/src/Button/Button.Component.js index 6ebbae695..42a5059cd 100644 --- a/src/Button/Button.Component.js +++ b/src/Button/Button.Component.js @@ -1,48 +1,104 @@ import React from 'react'; -import { Button, ButtonGroup, ButtonGrouped } from '../'; +import { Button, ButtonGroup } from '../'; import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; import { Playground } from '../documentation/Playground/Playground'; export const ButtonComponent = () => { - const buttonTypesCode = ` - - - - -`; + const buttonOptionsCode = ` + +`; - const buttonIconCode = ` - - - -`; + const buttonTypesCode = ` + + + +`; - const buttonSizesCode = ` - - - -`; + const buttonIconCode = ` - const buttonStatesCode = ` - -`; + - const buttonGroupCode = ` - - - - + + + + + + + +`; + + const buttonStatesCode = ` + + + + + + + + + + + + + + + + + + + + + +`; + + const buttonGroupCode = ` + + + `; return ( @@ -54,7 +110,7 @@ export const ButtonComponent = () => { instance, the most important button has a blue background where as a red button should only be used if the action it performs is potentially destructive. - + @@ -62,54 +118,78 @@ export const ButtonComponent = () => { type="Inputs" properties={[ { - name: 'type', + name: 'option', description: - "String - The type of the button. Options include 'primary', 'main', 'secondary', and 'toolbar'. Leave empty for default." + "string - indicates the importance of the button. Options include 'emphasized' and 'light'. Leave empty for default." }, { - name: 'semantic', + name: 'type', description: - "String - Semantic buttons. Semantic modifiers include 'positive' and 'negative'. Leave empty for no modifier." + "string - the type of the button. Options include 'standard', 'positive', 'medium', and 'negative'. Leave empty for default/action button." }, { name: 'size', description: - "String - The size of the button. Options include 'xs', 's', 'compact', 'default', and 'l'. Leave empty for default." + "string - the size of the button. There are two sizes. Use 'compact' for compact size. Leave empty for default." }, { name: 'glyph', description: - 'String - The icon to include in the button. See the icon page for the list of icons.' + 'string - the icon to include in the button. See the icon page for the list of icons.' }, { - name: 'state', + name: 'disabled', description: - "String - The state of the button. Options include 'normal', 'selected', and 'disabled'. Leave empty for normal." + "bool - disabled state of the button. Enabled by setting disabled property to true." }, { - name: 'typeAttr', + name: 'selected', description: - "String - Specifies the type attribute for the button element. Options include 'button', 'submit', and 'reset'." + "bool - selected state of the button. Enabled by setting selected property to true." }, - { name: 'onclick', description: 'Func - The function that is executed when the button is clicked.' } + { name: 'onclick', description: 'func - The function that is executed when the button is clicked.' } ]} /> + + +

Button Options

+ + There are three emphasis styles used to indicate the importance of the button on the page.
+ - Emphasized Button: There should only be one highlighted button on the page. This is + the primary call to action.
+ - Regular Button: The default button style and the most common button. There may be + more than one on a page.
+ - Light Button: This is the lowest priority button and most often used with page + content like appearing in a table or list. There may be more than one on the page. + + +
+ + + +
+ + {buttonOptionsCode}

Button Types

- Types can be "primary", "main", "secondary", and "toolbar". Semantic modifiers positive for - approve and negative for reject can be applied to the button. + - Action Button: The default button
+ - Standard Button: Neutral or informative color
+ - Positive Button: Used for positive actions such as approved, ok, yes.
+ - Medium Button: Used for warnings or alert
+ - Negative Button + :Used for negative actions such as decline, cancel, no. +
- +
- - - - - - + + + + +
{buttonTypesCode} @@ -118,22 +198,42 @@ export const ButtonComponent = () => {

Buttons with Icon

- Button can have an icon with text or just and icon. You can use glyph="iconName" to attach - an icon to the button. + Button can have an icon with text or just and icon. You can use glyph="icon-name" to + attach an icon to the button. - +
- - + + - + + -
{buttonIconCode} @@ -142,16 +242,13 @@ export const ButtonComponent = () => {

Button Sizes

- There are five different sizes can be rendered with modifiers: xs, s,{' '} - compact, default, and l. + There are two sizes. The compact size is only used on desktop and it is full size when used + on a touch device. - +
- - - - - + +
{buttonSizesCode} @@ -162,13 +259,54 @@ export const ButtonComponent = () => { There are three states: normal (default), selected, and disabled. - +
- - + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + -
@@ -179,28 +317,18 @@ export const ButtonComponent = () => {

Button Group

- -
- - - - - - - - Left - - Middle - - Right - + + +
+ + + + + {buttonGroupCode} @@ -214,19 +342,20 @@ export const ButtonComponent = () => { typeOfAttribute: 'string' }, { - attribute: 'type', + attribute: 'option', typeOfAttribute: 'string', - enum: ['default', 'main', 'secondary', 'toolbar'] + enum: ['', 'emphasized', 'light'] }, { - attribute: 'semantic', + attribute: 'type', typeOfAttribute: 'string', - enum: ['default', 'positive', 'negative'] + enum: ['', 'standard', 'positive', 'medium', 'negative'] }, + { attribute: 'size', typeOfAttribute: 'string', - enum: ['xs', 's', 'compact', 'l'] + enum: ['', 'compact'] }, { attribute: 'glyph', @@ -857,667 +986,19 @@ export const ButtonComponent = () => { ] }, { - attribute: 'state', - typeOfAttribute: 'string', - enum: ['default', 'selected', 'disabled'] + attribute: 'selected', + typeOfAttribute: 'boolean' + }, + { + attribute: 'disabled', + typeOfAttribute: 'boolean' } ]} > - - -

Playground ButtonGroup

- - - - - - -
); }; diff --git a/src/Button/Button.js b/src/Button/Button.js index 44583804d..635b2d2c7 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -2,16 +2,12 @@ import React from 'react'; import PropTypes from 'prop-types'; export const Button = props => { - const { type, semantic, size, glyph, dropdown, toolbar, state, typeAttr, onclick, children } = props; + const { option, type, size, glyph, dropdown, selected, disabled, typeAttr, onclick, children } = props; return ( - ); -}; - -ButtonGrouped.propTypes = { - size: PropTypes.string, - glyph: PropTypes.string, - state: PropTypes.string -}; diff --git a/src/Calendar/Calendar.Component.js b/src/Calendar/Calendar.Component.js index fc2102daa..0e22e1e27 100644 --- a/src/Calendar/Calendar.Component.js +++ b/src/Calendar/Calendar.Component.js @@ -32,7 +32,7 @@ export const CalendarComponent = () => {

Default Calendar

- + {defaultCalendarCode} @@ -40,7 +40,7 @@ export const CalendarComponent = () => {

Calendar with disabled weekends and disabled before a date

- + {} {calendarDisabledWeekendsBeforeDate} @@ -48,7 +48,7 @@ export const CalendarComponent = () => {

Calendar with disabled weekdays and blocked dates

- + {} {calendarDisabledWeekdaysBlockedDates} @@ -56,7 +56,7 @@ export const CalendarComponent = () => {

Calendar with range selection

- + {} {calendarAllOptions} diff --git a/src/Calendar/Calendar.js b/src/Calendar/Calendar.js index 42dbe7ad1..ecd765a04 100644 --- a/src/Calendar/Calendar.js +++ b/src/Calendar/Calendar.js @@ -427,18 +427,18 @@ export class Calendar extends Component {
-
-
-
- +
diff --git a/src/ContextualMenu/ContextualMenu.Component.js b/src/ContextualMenu/ContextualMenu.Component.js new file mode 100644 index 000000000..795b4369f --- /dev/null +++ b/src/ContextualMenu/ContextualMenu.Component.js @@ -0,0 +1,121 @@ +import React from 'react'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '..'; +import { Popover, Button, Menu, MenuList, MenuItem } from '..'; + +export const ContextualMenuComponent = () => { + + const contextualMenuIconCode = `} + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/>`; + + const contextualMenuMoreTextCode = `More} + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/> + +More} + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } +/>`; + + + return ( +
+
Contextual Menu
+ + The contextual menu component is an opinionated composition of the “Popover” and “Menu” components with the use of a styled button (Button component). A More icon (glyph="vertical-grip") or the word, “More”, is used to indicate there are more options than room to display them. On click or tap, a contextual menu opens.
+ This component is completely composed from other components CSS and doesn’t have any of its own. + + + + +

With Icon

+ + } + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + {contextualMenuIconCode} + + + +

With Text Button

+ + More} + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + More} + noArrow + body={ + + + Option 1 + Option 2 + Option 3 + Option 4 + + + } + /> + + {contextualMenuMoreTextCode} + + +
+ ); +}; diff --git a/src/DatePicker/DatePicker.Component.js b/src/DatePicker/DatePicker.Component.js index 692756a2e..371c6b84c 100644 --- a/src/DatePicker/DatePicker.Component.js +++ b/src/DatePicker/DatePicker.Component.js @@ -1,37 +1,45 @@ -import React from 'react' -import {DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../' -import {DatePicker} from '../' +import React from 'react'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; +import { DatePicker } from '../'; export const DatePickerComponent = () => { + const defaultDatePickerCode = ` +`; + const enableRangeSelectionDatePickerCode = ` +`; - const defaultDatePickerCode = `` - const enableRangeSelectionDatePickerCode = `` + return ( +
+
DatePicker
+ + The date-picker component is an opinionated composition of the "input-group", "popover" and "calendar" + components to accomplish the UI pattern for picking a date. + + - return(
-
DatePicker
- The date-picker component is an opinionated composition of the "input-group", "popover" and "calendar" components to accomplish the UI pattern for picking a date. - - - + - + - - -

Simple Date Picker

- - - - {defaultDatePickerCode} - - -

Range Date Picker

- - - - {enableRangeSelectionDatePickerCode} -
) -}; \ No newline at end of file + + +

Simple Date Picker

+ + + + + {defaultDatePickerCode} + + +

Range Date Picker

+ + + + + {enableRangeSelectionDatePickerCode} +
+ ); +}; diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js index 1ead94776..929683d9c 100644 --- a/src/DatePicker/DatePicker.js +++ b/src/DatePicker/DatePicker.js @@ -1,17 +1,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import {Calendar} from '../' +import { Calendar } from '../'; export class DatePicker extends Component { - constructor(props) { super(props); this.state = { hidden: true, - selectedDate: "", + selectedDate: '', arrSelectedDates: [], - formattedDate: "" + formattedDate: '' }; this.updateDate = this.updateDate.bind(this); @@ -20,56 +19,65 @@ export class DatePicker extends Component { this.formatDate = this.formatDate.bind(this); } - openCalendar = (type) => { - if (type === "input") { + openCalendar = type => { + if (type == 'input') { if (this.state.hidden) { - this.setState({hidden: !this.state.hidden}); + this.setState({ hidden: !this.state.hidden }); } + } else { + this.setState({ hidden: !this.state.hidden }); } - else { - this.setState({hidden: !this.state.hidden}) - } - } - + }; modifyDate(e) { - this.setState({formattedDate: e.target.value}); + this.setState({ formattedDate: e.target.value }); } //This is being used only when the user presses enter or clicks outside of the component formatDate(date) { let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; - let formatDate = ""; + let formatDate = ''; if (this.props.enableRangeSelection) { - - if(date.length === 0) { - return ""; + if (date.length == 0) { + return ''; } - + let firstDateMonth = date[0].getMonth() + 1; let firstDateDay = date[0].getDate(); let firstDateYear = date[0].getFullYear(); - let secondDateMonth = date[1].getMonth() + 1; + let secondDateMonth = date[1].getMonth() + 1; let secondDateDay = date[1].getDate(); let secondDateYear = date[1].getFullYear(); - - if (firstDateYear >= 3000 || secondDateYear >= 3000) { - return ""; + + if (firstDateYear >= 3000 || secondDateYear >= 3000) { + return ''; } - formatDate = firstDateMonth + "/" + firstDateDay + "/" + firstDateYear + "-" + secondDateMonth + "/" + secondDateDay + "/"+ secondDateYear; - } - else { + formatDate = + firstDateMonth + + '/' + + firstDateDay + + '/' + + firstDateYear + + '-' + + secondDateMonth + + '/' + + secondDateDay + + '/' + + secondDateYear; + } else { //Checks if the type of date doesn't match those types and that it doesn't contain any special character symbols - if ((typeof date !== "array" || typeof date !== "date" || typeof date !== "object") && (date.toString().search(regex)!==1)) { - return ""; - } - else { + if ( + (typeof date != 'array' || typeof date != 'date' || typeof date != 'object') && + date.toString().search(regex) != 1 + ) { + return ''; + } else { let month = date[0].getMonth(); let day = date[0].getDate(); let year = date[0].getFullYear(); - - formatDate = month+"/"+day+"/"+year; + + formatDate = month + '/' + day + '/' + year; } } return formatDate; @@ -77,83 +85,92 @@ export class DatePicker extends Component { sendUpdate(e) { let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; - if (e.key === "Enter") { - + if (e.key === 'Enter') { //Checks first if range is enabled - if(this.props.enableRangeSelection) { - + if (this.props.enableRangeSelection) { //If the formattedDate contains a list of special characters symbols then it will be reset - if (this.state.formattedDate.search(regex) !== -1 || this.state.formattedDate === "" || this.state.formattedDate.split("-").length < 2) { - this.setState({formattedDate: "", arrSelectedDates: "undefined", hidden: false}); - } - else { - //Breaks the input into an array - let dateRange = this.state.formattedDate.split("-"); - let dateSeparatedFirstRange = dateRange[0].split("/"); - let dateSeparatedSecondRange = dateRange[1].split("/"); - - //First date - let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10); - let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10); - let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10); - - //Second date - let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10); - let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10); - let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10); - - //Checks if the input is actually numbers and follows the required form - if ((!isNaN(firstYearRange) || !isNaN(firstDateRange) || !isNaN(firstMonthRange)) && (!isNaN(secondYearRange) || !isNaN(secondDateRange) || !isNaN(secondMonthRange)) && - (1 <= firstDateRange && firstDateRange <= 31) && (1 secondDate.getTime() ? arrSelected = [secondDate, firstDate] : arrSelected = [firstDate, secondDate] - - this.setState({ - selectedDate: '', - arrSelectedDates: arrSelected - }) - - } - else { - this.setState({ - formattedDate: "", - selectedDate: "undefined", - arrSelectedDates: "undefined" - }); - } - } - } - else { - if (this.state.formattedDate.search(regex) !== -1) { - this.setState({formattedDate: this.formatDate(this.state.selectedDate), - selectedDate: "undefined"}) + if ( + this.state.formattedDate.search(regex) != -1 || + this.state.formattedDate == '' || + this.state.formattedDate.split('-').length < 2 + ) { + this.setState({ formattedDate: '', arrSelectedDates: 'undefined', hidden: false }); + } else { + //Breaks the input into an array + let dateRange = this.state.formattedDate.split('-'); + let dateSeparatedFirstRange = dateRange[0].split('/'); + let dateSeparatedSecondRange = dateRange[1].split('/'); + + //First date + let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10); + let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10); + let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10); + + //Second date + let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10); + let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10); + let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10); + + //Checks if the input is actually numbers and follows the required form + if ( + (firstYearRange != NaN || firstDateRange != NaN || firstMonthRange != NaN) && + (secondYearRange != NaN || secondDateRange != NaN || secondMonthRange != NaN) && + (1 <= firstDateRange && firstDateRange <= 31) && + (1 < firstMonthRange && firstMonthRange <= 12) && + firstYearRange <= 3000 && + (1 <= secondDateRange && secondDateRange <= 31) && + (1 < secondMonthRange && secondMonthRange <= 12) && + secondYearRange <= 3000 + ) { + let firstDate = new Date(firstYearRange, firstMonthRange - 1, firstDateRange); + let secondDate = new Date(secondYearRange, secondMonthRange - 1, secondDateRange); + let arrSelected = []; + //Swaps the order in case one date is bigger than the other + firstDate.getTime() > secondDate.getTime() + ? (arrSelected = [secondDate, firstDate]) + : (arrSelected = [firstDate, secondDate]); + + this.setState({ + selectedDate: '', + arrSelectedDates: arrSelected + }); + } else { + this.setState({ + formattedDate: '', + selectedDate: 'undefined', + arrSelectedDates: 'undefined' + }); } - else { - - let dateSeparated = this.state.formattedDate.split("/"); - let year = parseInt(dateSeparated[2], 10); - let date = parseInt(dateSeparated[1], 10); - let month = parseInt(dateSeparated[0], 10); - - if ((!isNaN(year) || !isNaN(date) || !isNaN(month)) && (1 <= date && date <= 31) && (1 { - + click = e => { if (this.component.contains(e.target)) { return; } this.clickOutside(); - - } + }; clickOutside = () => { - let regex = /[!$%^&*()_+|~=`{}\[\]:'<>?,.\a-zA-Z]/; - if(this.props.enableRangeSelection) { - - //If the formattedDate contains a list of special characters symbols then it will be reset - if (this.state.formattedDate.search(regex) !== -1 || this.state.formattedDate === "" || this.state.formattedDate.split("-").length < 2) { - this.setState({formattedDate: "", arrSelectedDates: "undefined", hidden: true}); - } - else { - - //The range dates being split. - let dateRange = this.state.formattedDate.split("-"); - let dateSeparatedFirstRange = dateRange[0].split("/"); - let dateSeparatedSecondRange = dateRange[1].split("/"); - - let firstYearRange = parseInt(dateSeparatedFirstRange[2], 10); - let firstDateRange = parseInt(dateSeparatedFirstRange[1], 10); - let firstMonthRange = parseInt(dateSeparatedFirstRange[0], 10); - - let secondYearRange = parseInt(dateSeparatedSecondRange[2], 10); - let secondDateRange = parseInt(dateSeparatedSecondRange[1], 10); - let secondMonthRange = parseInt(dateSeparatedSecondRange[0], 10); - - if ((!isNaN(firstYearRange) || !isNaN(firstDateRange) || !isNaN(firstMonthRange)) && (!isNaN(secondYearRange) || !isNaN(secondDateRange) || !isNaN(secondMonthRange)) && - (1 <= firstDateRange && firstDateRange <= 31) && (1 secondDate.getTime()) { - this.setState({ - selectedDate: '', - arrSelectedDates: [secondDate, firstDate] - }); - } - else { - this.setState({ - selectedDate: '', - arrSelectedDates: [firstDate, secondDate] - }); - } - - } - else { - this.setState({ - formattedDate: "", - arrSelectedDates: "undefined", - selectedDate: "" - }); - } - this.setState({hidden: true}); - } - - } - else { - - if (this.state.formattedDate.search(regex) !== -1) { - this.setState({formattedDate: this.formatDate(this.state.selectedDate), selectedDate: "undefined"}) - } - else { - - let dateSeparated = this.state.formattedDate.split("/"); - let year = parseInt(dateSeparated[2], 10); - let date = parseInt(dateSeparated[1], 10); - let month = parseInt(dateSeparated[0], 10); - - if ((!isNaN(year) || !isNaN(date) || !isNaN(month)) && (1 <= date && date <= 31) && (1 secondDate.getTime()) { this.setState({ - selectedDate: new Date(year, month - 1, date) + selectedDate: '', + arrSelectedDates: [secondDate, firstDate] }); - } - else { + } else { this.setState({ - formattedDate: "", - selectedDate: "undefined" + selectedDate: '', + arrSelectedDates: [firstDate, secondDate] }); } + } else { + this.setState({ + formattedDate: '', + arrSelectedDates: 'undefined', + selectedDate: '' + }); + } + this.setState({ hidden: true }); } - this.setState({hidden: true}); + } else { + if (this.state.formattedDate.search(regex) != -1) { + this.setState({ formattedDate: this.formatDate(this.state.selectedDate), selectedDate: 'undefined' }); + } else { + let dateSeparated = this.state.formattedDate.split('/'); + let year = parseInt(dateSeparated[2], 10); + let date = parseInt(dateSeparated[1], 10); + let month = parseInt(dateSeparated[0], 10); + + if ( + (year != NaN || date != NaN || month != NaN) && + (1 <= date && date <= 31) && + (1 < month && month <= 12) && + year <= 3000 + ) { + this.setState({ + selectedDate: new Date(year, month - 1, date) + }); + } else { + this.setState({ + formattedDate: '', + selectedDate: 'undefined' + }); + } } - } + this.setState({ hidden: true }); + } + }; updateDate(date) { - if (this.props.enableRangeSelection) { - - if (date.length === 2) { + if (date.length == 2) { let firstDateMonth = date[0].getMonth() + 1; let firstDateDay = date[0].getDate(); let firstDateYear = date[0].getFullYear(); @@ -271,60 +288,93 @@ export class DatePicker extends Component { let secondDateDay = date[1].getDate(); let secondDateYear = date[1].getFullYear(); - let formatDate=firstDateMonth+"/"+firstDateDay+"/"+firstDateYear+"-"+secondDateMonth+"/"+secondDateDay+"/"+secondDateYear; + let formatDate = + firstDateMonth + + '/' + + firstDateDay + + '/' + + firstDateYear + + '-' + + secondDateMonth + + '/' + + secondDateDay + + '/' + + secondDateYear; this.setState({ arrSelectedDates: date, formattedDate: formatDate - }) - } - else { + }); + } else { let firstDateMonth = date[0].getMonth() + 1; let firstDateDay = date[0].getDate(); let firstDateYear = date[0].getFullYear(); - let formatDate = firstDateMonth + "/" + firstDateDay + "/" + firstDateYear; + let formatDate = firstDateMonth + '/' + firstDateDay + '/' + firstDateYear; this.setState({ arrSelectedDates: date, formattedDate: formatDate - }) + }); } - } - else { - + } else { let month = date.getMonth() + 1; let day = date.getDate(); let year = date.getFullYear(); - - let formatDate = month+"/"+day+"/"+year; + + let formatDate = month + '/' + day + '/' + year; this.setState({ selectedDate: date, formattedDate: formatDate }); } - } render() { - return (
this.component = component}> -
-
-
- this.openCalendar("input")} value={this.state.formattedDate} onChange={this.modifyDate} onKeyPress={this.sendUpdate}/> - - - -
-
-
- + return ( +
(this.component = component)}> +
+
+
+ this.openCalendar('input')} + value={this.state.formattedDate} + onChange={this.modifyDate} + onKeyPress={this.sendUpdate} + /> + +
+
+
-
) +
+
+ ); } } DatePicker.propTypes = { enableRangeSelection: PropTypes.bool -} \ No newline at end of file +}; diff --git a/src/Dropdown/Dropdown.Component.js b/src/Dropdown/Dropdown.Component.js index 6942c4c0f..9a751f426 100644 --- a/src/Dropdown/Dropdown.Component.js +++ b/src/Dropdown/Dropdown.Component.js @@ -6,7 +6,9 @@ import { Popover, Button, Menu, MenuList, MenuItem } from '../'; export const DropdownComponent = () => { const defaultDropdownCode = ` Select} + id="jhqD0555" + control={} + noArrow body={ @@ -18,56 +20,17 @@ export const DropdownComponent = () => { } /> -`; - - const iconDropdownCode = ` - - Select - - } - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> -`; - - const toolbarDropdownCode = ` - - Select - - } - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> -`; + - const disabledDropdownCode = ` + + } + noArrow body={ @@ -81,13 +44,15 @@ export const DropdownComponent = () => { /> `; - const sizesDropdownCode = ` + const iconDropdownCode = ` + } + noArrow body={ @@ -103,11 +68,13 @@ export const DropdownComponent = () => { + } + noArrow body={ @@ -119,15 +86,17 @@ export const DropdownComponent = () => { } /> - +`; - + const toolbarDropdownCode = ` + } + noArrow body={ @@ -141,13 +110,15 @@ export const DropdownComponent = () => { /> - + + } + noArrow body={ @@ -159,15 +130,18 @@ export const DropdownComponent = () => { } /> - +`; - + const disabledDropdownCode = ` + } + noArrow body={ @@ -177,52 +151,10 @@ export const DropdownComponent = () => { Option 4 - } + } /> `; - const contextualMenuDropdownCode = `} - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } -/> - -More} - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } -/> - -More} - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } -/>`; - return (
Dropdown
@@ -237,19 +169,19 @@ export const DropdownComponent = () => {

Default Dropdown

- + Select} + id="jhqD0555" + control={} + noArrow body={ @@ -262,21 +194,16 @@ export const DropdownComponent = () => { } /> - - {defaultDropdownCode} - - -

Dropdown with Icon

- It can also include complementary information like an icon. - + } + noArrow body={ @@ -290,19 +217,22 @@ export const DropdownComponent = () => { /> - {iconDropdownCode} + {defaultDropdownCode} -

Toolbar Dropdown

- +

Dropdown with Icon

+ It can also include complementary information like an icon. + + } + noArrow body={ @@ -315,24 +245,16 @@ export const DropdownComponent = () => { } /> - - {toolbarDropdownCode} - - -

Disabled State

- - Disabled state can be rendered with state="disabled" class. - - + } + noArrow body={ @@ -346,57 +268,21 @@ export const DropdownComponent = () => { /> - {disabledDropdownCode} + {iconDropdownCode} -

Sizes

- - - - Select - - } - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> - - - - Select - - } - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> - - +

Toolbar Dropdown

+ + + } + noArrow body={ @@ -409,13 +295,16 @@ export const DropdownComponent = () => { } /> - + + + } + noArrow body={ @@ -428,13 +317,23 @@ export const DropdownComponent = () => { } /> + + {toolbarDropdownCode} + + + +

Disabled State

+ + } + noArrow body={ @@ -444,65 +343,12 @@ export const DropdownComponent = () => { Option 4 - } + } /> - {sizesDropdownCode} - - - -

Contextual Menu

- - The contextual menu component is an opinionated composition of the “popover” and “menu” components with - the use of a styled button. A More icon or the word, “More”, is used to indicate there are more options - than room to display them. On click or tap, a contextual menu opens. Composed by the “popover” and - “menu” components. - - - } - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> - - More} - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> + {disabledDropdownCode} - More} - body={ - - - Option 1 - Option 2 - Option 3 - Option 4 - - - } - /> - - {contextualMenuDropdownCode}
); diff --git a/src/Dropdown/Dropdown.js b/src/Dropdown/Dropdown.js index 85c40ca42..2314d4086 100644 --- a/src/Dropdown/Dropdown.js +++ b/src/Dropdown/Dropdown.js @@ -2,15 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; export const Dropdown = props => { - const { size, toolbar, children } = props; + const { standard, children } = props; return ( -
+
{children}
); }; Dropdown.propTypes = { - size: PropTypes.string, - toolbar: PropTypes.bool -}; + standard: PropTypes.bool +}; \ No newline at end of file diff --git a/src/Icon/Icon.Component.js b/src/Icon/Icon.Component.js index 59453988d..e93e64b1c 100644 --- a/src/Icon/Icon.Component.js +++ b/src/Icon/Icon.Component.js @@ -657,7 +657,7 @@ export const IconComponent = () => { - + diff --git a/src/Identifier/Identifier.Component.js b/src/Identifier/Identifier.Component.js index 415612da0..aada56e0a 100644 --- a/src/Identifier/Identifier.Component.js +++ b/src/Identifier/Identifier.Component.js @@ -47,7 +47,7 @@ export const IdentifierComponent = () => {

Icon

- + @@ -57,7 +57,7 @@ export const IdentifierComponent = () => {

Initials

- + WW WW WW @@ -67,7 +67,7 @@ export const IdentifierComponent = () => {

Circle

- + @@ -77,7 +77,7 @@ export const IdentifierComponent = () => {

Transparent

- + WW @@ -86,7 +86,7 @@ export const IdentifierComponent = () => {

Accent Colors

- + diff --git a/src/Image/Image.Component.js b/src/Image/Image.Component.js index b39bc4c43..f9c68edbf 100644 --- a/src/Image/Image.Component.js +++ b/src/Image/Image.Component.js @@ -1,55 +1,68 @@ -import React from 'react' -import { Image } from '../' -import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../' +import React from 'react'; +import { Image } from '../'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; import { Playground } from '../documentation/Playground/Playground'; export const ImageComponent = () => { const sizesImageCode = ` -` +`; -const shapesImageCode = ` + const shapesImageCode = ` -` +`; return (
Image
- When using images, use the following helpers classes to adjust the size and the shape. + + When using images, use the following helpers classes to adjust the size and the shape. + - + - - - + +

Sizes

- - - - + +
+ + + +
{sizesImageCode} - +

Shapes

- - - - + +
+ + + +
{shapesImageCode}

Playground

- - + enum: ['', 'circle'] + } + ]} + > +
); -} \ No newline at end of file +}; diff --git a/src/InlineHelp/InlineHelp.Component.js b/src/InlineHelp/InlineHelp.Component.js index 234c0c85a..e8039ee1b 100644 --- a/src/InlineHelp/InlineHelp.Component.js +++ b/src/InlineHelp/InlineHelp.Component.js @@ -2,9 +2,6 @@ import React from 'react'; import { InlineHelp } from '../'; import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; -const centerStyle = { - textAlign: 'center' -}; export const InlineHelpComponent = () => { const defaultHelpPlacement = ``; @@ -41,44 +38,36 @@ export const InlineHelpComponent = () => {

Default Position

The default positioning of inline help component is bottom right. - -
- Bottom Right (Default)   - -
+ + Bottom Right (Default)   + {defaultHelpPlacement} - + - +

Bottom Left Position

- -
- Bottom Left   - -
+ + Bottom Left   + {bottomLeftHelpPlacement} - + - +

Right Position

- -
- Right   - -
+ + Right   + {rightHelpPlacement} - + - +

Left Position

- -
- Left   - -
+ + Left   + {leftHelpPlacement} diff --git a/src/InputGroup/InputGroup.Component.js b/src/InputGroup/InputGroup.Component.js index 372b145bb..03d9204f9 100644 --- a/src/InputGroup/InputGroup.Component.js +++ b/src/InputGroup/InputGroup.Component.js @@ -1,6 +1,6 @@ -import React from 'react' -import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../' -import { FormItem, FormLabel, FormGroup, InputGroup, Button } from '../' +import React from 'react'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties, Playground } from '../'; +import { FormItem, FormLabel, FormGroup, InputGroup, Button } from '../'; export const InputGroupComponent = () => { const textAddonCode = ` @@ -9,83 +9,177 @@ export const InputGroupComponent = () => { -
+ -` + + +Compact Mode: + + + + + + + + + + + + +`; + const numberInputCode = ` -` + + +Compact mode: + + + + + +`; + const inputWithIconsCode = ` -
+ +Compact mode: + + + + + + + -
+ +Compact mode: + + + + + + + -` + + +Compact mode: + + + + + +`; + const inputWithActionsCode = ` - - + + -
+ +Compact mode: + + + + + + + + + - - + + + +
+

Compact mode

+ + + + + + + + +
+
- - + + + +
); -} \ No newline at end of file +}; diff --git a/src/InputGroup/InputGroup.js b/src/InputGroup/InputGroup.js index c1de743fd..31e8fdd33 100644 --- a/src/InputGroup/InputGroup.js +++ b/src/InputGroup/InputGroup.js @@ -55,7 +55,7 @@ export class InputGroup extends Component { render() { - const { inputType, inputId, inputName, inputValue, inputPlaceholder, addonPos, addon, glyph, actions, children } = this.props; + const { inputType, inputId, inputName, inputValue, inputPlaceholder, addonPos, addon, glyph, actions, compact, children } = this.props; switch (inputType) { @@ -63,7 +63,7 @@ export class InputGroup extends Component { { if (addonPos === 'before') { return ( -
+
{actions ? ( {children} @@ -79,13 +79,13 @@ export class InputGroup extends Component { } )} - +
); } else { return ( -
- +
+ {actions ? ( {children} @@ -107,19 +107,19 @@ export class InputGroup extends Component { } case 'number': return ( -
- +
+ - - + +
); case 'search': return ( -
- +
+ @@ -141,5 +141,6 @@ InputGroup.propTypes = { addonPos: PropTypes.string, addon: PropTypes.string, glyph: PropTypes.string, - actions: PropTypes.bool + actions: PropTypes.bool, + compact: PropTypes.bool } diff --git a/src/ListGroup/ListGroup.Component.js b/src/ListGroup/ListGroup.Component.js index 397862031..260fbfd8f 100644 --- a/src/ListGroup/ListGroup.Component.js +++ b/src/ListGroup/ListGroup.Component.js @@ -14,22 +14,22 @@ export const ListGroupComponent = () => { const actionsListCode = ` List item 1 -
+ {this.informationModalCode} @@ -218,8 +219,8 @@ export class ModalComponent extends Component { destructive or complex action. In this case, the modal has action buttons at the bottom. - - X?
+ {this.confirmationModalCode} diff --git a/src/Modal/Modal.js b/src/Modal/Modal.js index 5df6fd8b8..e0f9139a0 100644 --- a/src/Modal/Modal.js +++ b/src/Modal/Modal.js @@ -41,7 +41,7 @@ export class Modal extends Component {

{title}

); diff --git a/src/Popover/Popover.Component.js b/src/Popover/Popover.Component.js index 0526590e3..19a9fda26 100644 --- a/src/Popover/Popover.Component.js +++ b/src/Popover/Popover.Component.js @@ -5,7 +5,7 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties export const PopoverComponent = () => { const popoverCode = `} + control={} body={ @@ -20,6 +20,7 @@ export const PopoverComponent = () => { } body={ @@ -36,6 +37,7 @@ export const PopoverComponent = () => { } + noArrow body={ @@ -48,9 +50,11 @@ export const PopoverComponent = () => { } /> - } + alignment="right" + noArrow body={ @@ -90,6 +94,14 @@ export const PopoverComponent = () => { name: 'body', description: 'Component - Wrapper that contains the popover content.' }, + { + name: 'noArrow', + description: 'bool - Set to "true" to render a popover body without an arrow. The default option is a popover body with an arrow. Leave empty for default.' + }, + { + name: 'alignment', + description: 'string - The placement of the popover body. Options include "right" and "left". Leave empty for default/left placement.' + }, { name: 'id', description: 'string - optional. Element id.' @@ -100,10 +112,10 @@ export const PopoverComponent = () => {

Popover Example

- + } + control={} body={ @@ -118,6 +130,7 @@ export const PopoverComponent = () => { } body={ @@ -134,6 +147,7 @@ export const PopoverComponent = () => { } + noArrow body={ @@ -149,6 +163,8 @@ export const PopoverComponent = () => { } + alignment="right" + noArrow body={ diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js index 86acf9a4b..042e3c5cc 100644 --- a/src/Popover/Popover.js +++ b/src/Popover/Popover.js @@ -10,7 +10,7 @@ export class Popover extends Component { this.handleOutsideClick = this.handleOutsideClick.bind(this); this.state = { isExpanded: false, - isDisabled: this.props.state === 'disabled' + isDisabled: this.props.disabled }; } @@ -58,21 +58,32 @@ export class Popover extends Component { } render() { - const { id, control, body } = this.props; + const { id, alignment, noArrow, control, body } = this.props; return (
{ this.node = node; }} > - +
{control} - -
+
{body} - +
); } @@ -80,25 +91,8 @@ export class Popover extends Component { Popover.propTypes = { id: PropTypes.string, - state: PropTypes.string -}; - -// ------------------------------------- Popover Control------------------------------------ -export const PopoverControl = props => { - const { id, expanded, trigger, children } = props; - return ( -
- {children} -
- ); -}; - -// -------------------------------------- Popover Body-------------------------------------- -export const PopoverBody = props => { - const { id, hidden, children } = props; - return ( -
- {children} -
- ); + state: PropTypes.string, + alignment: PropTypes.string, + noArrow: PropTypes.bool, + disabled: PropTypes.bool }; diff --git a/src/Routes.js b/src/Routes.js index a167876d2..50fc8c2be 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -7,6 +7,7 @@ import { BadgeComponent } from './Badge/Badge.Component'; import { BreadcrumbComponent } from './Breadcrumb/Breadcrumb.Component'; import { ButtonComponent } from './Button/Button.Component'; import { CalendarComponent } from './Calendar/Calendar.Component'; +import { ContextualMenuComponent } from './ContextualMenu/ContextualMenu.Component'; import { DatePickerComponent } from './DatePicker/DatePicker.Component'; import { DropdownComponent } from './Dropdown/Dropdown.Component'; import { FormsComponent } from './Forms/Forms.Component'; @@ -26,7 +27,7 @@ import { SearchInputComponent } from './SearchInput/SearchInput.Component'; import { SideNavigationComponent } from './SideNavigation/SideNavigation.Component'; import { TableComponent } from './Table/Table.Component'; import { TabsComponent } from './Tabs/Tabs.Component'; -import { TagComponent } from './Tag/Tag.Component'; +import { TokenComponent } from './Token/Token.Component'; import { TileComponent } from './Tile/Tile.Component'; import { ToggleComponent } from './Toggle/Toggle.Component'; import { TreeComponent } from './Tree/Tree.Component'; @@ -42,6 +43,7 @@ export default class Routes extends Component { { url: '/breadcrumb', name: 'Breadcrumb', component: BreadcrumbComponent }, { url: '/button', name: 'Button', component: ButtonComponent }, { url: '/calendar', name: 'Calendar', component: CalendarComponent }, + { url: '/contextualMenu', name: 'Contextual Menu', component: ContextualMenuComponent }, { url: '/datepicker', name: 'Date Picker', component: DatePickerComponent }, { url: '/dropdown', name: 'Dropdown', component: DropdownComponent }, { url: '/forms', name: 'Forms', component: FormsComponent }, @@ -61,9 +63,9 @@ export default class Routes extends Component { { url: '/sideNavigation', name: 'Side Navigation', component: SideNavigationComponent }, { url: '/table', name: 'Table', component: TableComponent }, { url: '/tabs', name: 'Tabs', component: TabsComponent }, - { url: '/tag', name: 'Tag', component: TagComponent }, { url: '/tile', name: 'Tile', component: TileComponent }, { url: '/toggle', name: 'Toggle', component: ToggleComponent }, + { url: '/token', name: 'Token', component: TokenComponent }, { url: '/tree', name: 'Tree', component: TreeComponent } ] }; diff --git a/src/Tag/Tag.Component.js b/src/Tag/Tag.Component.js deleted file mode 100644 index e4756896d..000000000 --- a/src/Tag/Tag.Component.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react' -import { Tag } from './Tag' -import { DocsTile, DocsText, Separator, Header, Description, Import } from '../' - -export const TagComponent = () => { - const tagCode = `Bibendum -Lorem -Dolor -Filter`; - - const closeAction = (name, event) => alert(`close ${name}! You can work with the event itself using the callback.`); - const tagsNames = ['Bibendum', 'Lorem', 'Dolor', 'Filter']; - - return ( -
- -
Tag
- Tags are used to represent contextualizing information. They can be useful to show applied filters, selected values for form field or object metadata. - - - - - - - { - tagsNames.map((name) => { - return closeAction(name, e)}>{name} - }) - } - - {tagCode} -
- ); -} \ No newline at end of file diff --git a/src/Toggle/Toggle.Component.js b/src/Toggle/Toggle.Component.js index e9d438b79..a0a6252c2 100644 --- a/src/Toggle/Toggle.Component.js +++ b/src/Toggle/Toggle.Component.js @@ -1,42 +1,100 @@ -import React from 'react' -import { Toggle } from './Toggle' -import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../' +import React from 'react'; +import { Toggle } from './Toggle'; +import { DocsTile, DocsText, Separator, Header, Description, Import, Properties } from '../'; export const ToggleComponent = () => { - const toggleCode = `Small toggle + const toggleCode = ` + Extra Small toggle + + + Small toggle + Normal toggle -Large toggle` + + Large toggle +`; + + const toggleDisabledCode = ` + Extra Small toggle + + + Small toggle + + + Normal toggle + + + Large toggle +`; return (
-
Toggle
- The toggle component is used to activate or deactivate an element. Uses a visual metaphor that is know to the user with visible differences between on and off state. - It is recommended to always display the toggle with a label above it as well as the label of the selected state. For example, the label above would be Active, the toggle state would be “on” and the selected state label displayed to the right of the toggle would be “Yes”. + + The toggle component is used to activate or deactivate an element. Uses a visual metaphor that is know + to the user with visible differences between on and off state. It is recommended to always display the + toggle with a label above it as well as the label of the selected state. For example, the label above + would be Active, the toggle state would be “on” and the selected state label displayed to the right of + the toggle would be “Yes”. - - + +

Toggle Sizes

- The toggle can be set to 3 sizes: 'small', 'normal' and 'large'. When used with forms, it is recommended to use the small size so that form components will be consistent. + + The toggle can be set to 4 sizes: 'xs', 's', 'normal' and 'l'. For 'normal' size leave empty.
+ When used with forms, it is recommended to use the small size so that form components will be + consistent. + - Small toggle + + Extra Small toggle + + + Small toggle + Normal toggle - Large toggle + + Large toggle + {toggleCode} +

Disabled state

+ + The toggle can be set to the disable state and still indicate the state of the toggle. To do this, add + the 'disabled' parameter to the element. + + + + Extra Small toggle + + + Small toggle + + + Normal toggle + + + Large toggle + + + {toggleDisabledCode} + +
); -} \ No newline at end of file +}; diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js index 5ec06ca67..438e8332d 100644 --- a/src/Toggle/Toggle.js +++ b/src/Toggle/Toggle.js @@ -1,22 +1,41 @@ -import React from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -export const Toggle = (props) => { - const { size, id, children } = props; - return ( -
- +
+ ); + } } Toggle.propTypes = { size: PropTypes.string, id: PropTypes.string -} \ No newline at end of file +}; diff --git a/src/Token/Token.Component.js b/src/Token/Token.Component.js new file mode 100644 index 000000000..5451c0aa9 --- /dev/null +++ b/src/Token/Token.Component.js @@ -0,0 +1,34 @@ +import React from 'react' +import { Token } from './Token' +import { DocsTile, DocsText, Separator, Header, Description, Import } from '..' + +export const TokenComponent = () => { + const tokenCode = `Bibendum +Lorem +Dolor +Filter`; + + const closeAction = (name) => alert(`close ${name}! You can work with the event itself using the callback.`); + const tagsNames = ['Bibendum', 'Lorem', 'Dolor', 'Filter']; + + return ( +
+ +
Token
+ Tokens are used to represent contextualizing information. They can be useful to show applied filters, selected values for form field or object metadata. + + + + + + + { + tagsNames.map((name) => { + return closeAction(name, e)}>{name} + }) + } + + {tokenCode} +
+ ); +} \ No newline at end of file diff --git a/src/Tag/Tag.js b/src/Token/Token.js similarity index 55% rename from src/Tag/Tag.js rename to src/Token/Token.js index f09befbf9..bb364b6ce 100644 --- a/src/Tag/Tag.js +++ b/src/Token/Token.js @@ -1,9 +1,10 @@ import React from 'react'; -export const Tag = (props) => { + +export const Token = (props) => { const { children, clickHandler } = props; return ( - + {children} ); diff --git a/src/documentation/DocsTile/DocsTile.js b/src/documentation/DocsTile/DocsTile.js index 69301a05f..714388bdc 100644 --- a/src/documentation/DocsTile/DocsTile.js +++ b/src/documentation/DocsTile/DocsTile.js @@ -1,37 +1,50 @@ import React from 'react'; import SyntaxHighlighter from 'react-syntax-highlighter'; -import {googlecode} from 'react-syntax-highlighter/styles/hljs'; +import { googlecode } from 'react-syntax-highlighter/styles/hljs'; -export const DocsTile = (props) => { +export const DocsTile = props => { const docsTileStyle = { - borderRadius: "4px 4px 0 0", - border: "1px solid #ccc", - borderBottom: "none", - padding: "10px 0" - } - const { children } = props; + borderRadius: '4px 4px 0 0', + border: '1px solid #ccc', + borderBottom: 'none', + padding: '10px 0', + backgroundColor: '#f3f4f5' + }; + const centerStyle = { + textAlign: 'center' + }; + + const { centered, children } = props; return ( -
-
- {children} -
+
+ {centered ? ( +
+
{children}
+
+ ) : ( +
{children}
+ )}
); -} +}; -export const DocsText = (props) => { +export const DocsText = props => { const docsTextStyle = { - padding: "15px", - fontSize: "13px", - border: "1px solid #ccc", - borderRadius: "0 0 4px 4px", - backgroundColor: "#fff !important", - margin: "0" - } + padding: '15px', + fontSize: '13px', + border: '1px solid #ccc', + borderRadius: '0 0 4px 4px', + backgroundColor: '#fff !important', + margin: '0' + }; const { children } = props; return ( - 
{children}
+ 
+            
+                {children}
+            
+
); -} \ No newline at end of file +}; diff --git a/src/documentation/Playground/Playground.js b/src/documentation/Playground/Playground.js index b3393f2c4..0d557f8bc 100644 --- a/src/documentation/Playground/Playground.js +++ b/src/documentation/Playground/Playground.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import { Alert } from '../../'; import { Badge, Label, Status } from '../../'; -import { Button, ButtonGroup, ButtonGrouped } from '../../'; -import { Dropdown} from '../../'; +import { Button, ButtonGroup } from '../../'; +import { Dropdown } from '../../'; import { Icon } from '../../'; import { Identifier } from '../../'; import { Image } from '../../'; @@ -329,55 +329,15 @@ export class Playground extends Component { ); break; - case 'buttongroup': - componentToGenerate = ( - - - Left - - - - Right - - - ); - break; case 'dropdown': componentToGenerate = ( - - + /> ); break; case 'icon': @@ -459,7 +417,7 @@ export class Playground extends Component { actions={true} >