diff --git a/src/App.js b/src/App.js index 2c4c602..e12c101 100755 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import ButtonPage from './elements/button/ButtonPage.jsx'; import TagPage from './elements/tag/TagPage.jsx'; import CheckboxPage from './elements/checkbox/CheckboxPage.jsx'; import './base_bundle_entry.scss'; +import './zeppelin-element-library.css'; // import './icons.font'; function App() { diff --git a/src/assets/fonts/zepicons.eot b/src/assets/fonts/zepicons.eot new file mode 100644 index 0000000..1a5ed8f Binary files /dev/null and b/src/assets/fonts/zepicons.eot differ diff --git a/src/assets/fonts/zepicons.svg b/src/assets/fonts/zepicons.svg new file mode 100644 index 0000000..ee06700 --- /dev/null +++ b/src/assets/fonts/zepicons.svg @@ -0,0 +1,330 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/fonts/zepicons.ttf b/src/assets/fonts/zepicons.ttf new file mode 100644 index 0000000..0cd5549 Binary files /dev/null and b/src/assets/fonts/zepicons.ttf differ diff --git a/src/assets/fonts/zepicons.woff b/src/assets/fonts/zepicons.woff new file mode 100644 index 0000000..b85e533 Binary files /dev/null and b/src/assets/fonts/zepicons.woff differ diff --git a/src/assets/fonts/zepicons.woff2 b/src/assets/fonts/zepicons.woff2 new file mode 100644 index 0000000..1aaf991 Binary files /dev/null and b/src/assets/fonts/zepicons.woff2 differ diff --git a/src/base_bundle_entry.scss b/src/base_bundle_entry.scss index b8992b4..893908b 100644 --- a/src/base_bundle_entry.scss +++ b/src/base_bundle_entry.scss @@ -27,3 +27,4 @@ $include-typography: true !default; @import './elements/button/button'; @import './elements/tag/tag'; +@import './elements/checkbox/checkbox'; diff --git a/src/elements/checkbox/CheckboxPage.jsx b/src/elements/checkbox/CheckboxPage.jsx index 7a2a7b9..b62bfa8 100644 --- a/src/elements/checkbox/CheckboxPage.jsx +++ b/src/elements/checkbox/CheckboxPage.jsx @@ -6,28 +6,54 @@ function CheckboxPage() {
-
+
+
+
+ + +
+
+
-
+
+ + +
); } diff --git a/src/elements/checkbox/_checkbox.scss b/src/elements/checkbox/_checkbox.scss index 9cdac3c..6a6b58e 100644 --- a/src/elements/checkbox/_checkbox.scss +++ b/src/elements/checkbox/_checkbox.scss @@ -1,50 +1,83 @@ -//Checkbox - base style - @mixin checkbox { + $lineHeight: 2.125rem; + $fontSize: 36px; + // strip the units (expecting a px value, but remove so we've just got an int) + $baseFont: ($fontSize) / ($fontSize * 0 + 1); + // ensure our base is a rem val + $base: ($lineHeight) / ($lineHeight * 0 + 1) * 1rem; + // get our borderwidth in rems + $borderWidth: (2 / (2 * 0 + 1) / $baseFont) * 1rem; + $boxSize: $base/1.7; .#{$prefix}checkbox { - position: relative; - display: block; - margin-bottom: 0.5rem; - border: 2px solid get('colors.gray.gray-dark.hex'); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), - inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); - } - - .#{$prefix}checkbox.disabled .#{$prefix}-checkbox--label { - color: get('colors.gray.gray.hex'); - cursor: not-allowed; - } - - .#{$prefix}checkbox--label { - @include themify($themes) { - //color: themed('primary'); - color: 'orange'; - padding-left: 12px; - margin-bottom: 0; + .#{$prefix}checkbox__label { cursor: pointer; + line-height: $base; + position: relative; + display: inline-block; + padding-left: $base; + font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, + Segoe UI, Open Sans, Helvetica Neue, Arial, sans-serif; + margin-bottom: 0; + &:before, + &:after { + box-sizing: border-box; + line-height: $base; + content: ' '; + display: block; + position: absolute; + top: $base/4.75; + left: 0; + width: $boxSize; + height: $boxSize; + border-radius: 0; + } + &:before { + cursor: pointer; + width: ($boxSize) + $borderWidth * 2; + height: ($boxSize) + $borderWidth * 2; + margin: -$borderWidth; + border: 2px solid get('colors.gray.gray.hex'); + border-radius: 0; + } } - } - .#{$prefix}checkbox--input { - position: absolute; - margin-top: 0.25rem; - margin-left: -1.25rem; - } - - .#{$prefix}checkbox--input:only-child { - position: static; - } - - .#{$prefix}checkbox--inline { - display: inline-block; - } - - .#{$prefix}checkbox--inline .#{$prefix}checkbox--label { - vertical-align: middle; - } - - .#{$prefix}checkbox--inline + .#{$prefix}checkbox--inline { - margin-left: 0.75rem; + /* hide the input element */ + .#{$prefix}checkbox__input { + opacity: 0; + &:disabled + .#{$prefix}checkbox__label:before { + cursor: not-allowed; + background: get('colors.gray.grayLighter.hex'); + border: 2px solid get('colors.gray.gray.hex'); + } + &:disabled + .#{$prefix}checkbox__label { + cursor: not-allowed; + } + &:checked + .#{$prefix}checkbox__label:before { + font-family: zepicons; + content: '\f112'; + //content: '\2713'; + display: inline-block; + background: get('colors.gray.white.hex'); + line-height: $boxSize + $borderWidth; + font-size: 18px; + text-align: center; + transform: scale(1); + @include themify($themes) { + color: themed('primary'); + } + } + &:checked:focus + .#{$prefix}checkbox__label:before { + @include themify($themes) { + box-shadow: 0 0 5px 1px themed('primary'); + background: get('colors.gray.white.hex'); + } + } + &:active + .#{$prefix}checkbox__label:before { + @include themify($themes) { + background: themed('hover'); + } + } + } } } diff --git a/src/zeppelin-element-library.css b/src/zeppelin-element-library.css new file mode 100644 index 0000000..41b3d19 --- /dev/null +++ b/src/zeppelin-element-library.css @@ -0,0 +1,1039 @@ +/* zeppelin-element-library version v0.0.0 */ +a, +abbr, +acronym, +address, +applet, +article, +aside, +audio, +b, +big, +blockquote, +body, +canvas, +caption, +center, +cite, +code, +dd, +del, +details, +dfn, +div, +dl, +dt, +em, +embed, +fieldset, +figcaption, +figure, +footer, +form, +h1, +h2, +h3, +h4, +h5, +h6, +header, +hgroup, +html, +i, +iframe, +img, +ins, +kbd, +label, +legend, +li, +mark, +menu, +nav, +object, +ol, +output, +p, +pre, +q, +ruby, +s, +samp, +section, +small, +span, +strike, +strong, +sub, +summary, +sup, +table, +tbody, +td, +tfoot, +th, +thead, +time, +tr, +tt, +u, +ul, +var, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:after, +blockquote:before, +q:after, +q:before { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +@font-face { + font-family: Roboto; + font-style: normal; + font-weight: 300; + src: url(assets/fonts/roboto-v18-latin-300.eot); + src: local('Roboto Light'), local('Roboto-Light'), + url(assets/fonts/roboto-v18-latin-300.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/roboto-v18-latin-300.woff2) format('woff2'), + url(assets/fonts/roboto-v18-latin-300.woff) format('woff'), + url(assets/fonts/roboto-v18-latin-300.ttf) format('truetype'), + url(assets/fonts/roboto-v18-latin-300.svg#Roboto) format('svg'); +} +@font-face { + font-family: Roboto; + font-style: italic; + font-weight: 400; + src: url(assets/fonts/roboto-v18-latin-italic.eot); + src: local('Roboto Italic'), local('Roboto-Italic'), + url(assets/fonts/roboto-v18-latin-italic.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/roboto-v18-latin-italic.woff2) format('woff2'), + url(assets/fonts/roboto-v18-latin-italic.woff) format('woff'), + url(assets/fonts/roboto-v18-latin-italic.ttf) format('truetype'), + url(assets/fonts/roboto-v18-latin-italic.svg#Roboto) format('svg'); +} +@font-face { + font-family: Roboto; + font-style: normal; + font-weight: 400; + src: url(assets/fonts/roboto-v18-latin-regular.eot); + src: local('Roboto'), local('Roboto-Regular'), + url(assets/fonts/roboto-v18-latin-regular.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/roboto-v18-latin-regular.woff2) format('woff2'), + url(assets/fonts/roboto-v18-latin-regular.woff) format('woff'), + url(assets/fonts/roboto-v18-latin-regular.ttf) format('truetype'), + url(assets/fonts/roboto-v18-latin-regular.svg#Roboto) format('svg'); +} +@font-face { + font-family: Roboto; + font-style: normal; + font-weight: 500; + src: url(assets/fonts/roboto-v18-latin-500.eot); + src: local('Roboto Medium'), local('Roboto-Medium'), + url(assets/fonts/roboto-v18-latin-500.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/roboto-v18-latin-500.woff2) format('woff2'), + url(assets/fonts/roboto-v18-latin-500.woff) format('woff'), + url(assets/fonts/roboto-v18-latin-500.ttf) format('truetype'), + url(assets/fonts/roboto-v18-latin-500.svg#Roboto) format('svg'); +} +@font-face { + font-family: Roboto; + font-style: normal; + font-weight: 700; + src: url(assets/fonts/roboto-v18-latin-700.eot); + src: local('Roboto Bold'), local('Roboto-Bold'), + url(assets/fonts/roboto-v18-latin-700.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/roboto-v18-latin-700.woff2) format('woff2'), + url(assets/fonts/roboto-v18-latin-700.woff) format('woff'), + url(assets/fonts/roboto-v18-latin-700.ttf) format('truetype'), + url(assets/fonts/roboto-v18-latin-700.svg#Roboto) format('svg'); +} +@font-face { + font-family: Teko; + font-style: normal; + font-weight: 400; + src: url(assets/fonts/teko-v7-latin-regular.eot); + src: local('Teko Regular'), local('Teko-Regular'), + url(assets/fonts/teko-v7-latin-regular.eot?#iefix) + format('embedded-opentype'), + url(assets/fonts/teko-v7-latin-regular.woff2) format('woff2'), + url(assets/fonts/teko-v7-latin-regular.woff) format('woff'), + url(assets/fonts/teko-v7-latin-regular.ttf) format('truetype'), + url(assets/fonts/teko-v7-latin-regular.svg#Teko) format('svg'); +} +@font-face { + font-family: Teko; + font-style: normal; + font-weight: 500; + src: url(assets/fonts/teko-v7-latin-500.eot); + src: local('Teko Medium'), local('Teko-Medium'), + url(assets/fonts/teko-v7-latin-500.eot?#iefix) format('embedded-opentype'), + url(assets/fonts/teko-v7-latin-500.woff2) format('woff2'), + url(assets/fonts/teko-v7-latin-500.woff) format('woff'), + url(assets/fonts/teko-v7-latin-500.ttf) format('truetype'), + url(assets/fonts/teko-v7-latin-500.svg#Teko) format('svg'); +} +@font-face { + font-family: Teko; + font-style: normal; + font-weight: 700; + src: url(assets/fonts/teko-v7-latin-700.eot); + src: local('Teko Bold'), local('Teko-Bold'), + url(assets/fonts/teko-v7-latin-700.eot?#iefix) format('embedded-opentype'), + url(assets/fonts/teko-v7-latin-700.woff2) format('woff2'), + url(assets/fonts/teko-v7-latin-700.woff) format('woff'), + url(assets/fonts/teko-v7-latin-700.ttf) format('truetype'), + url(assets/fonts/teko-v7-latin-700.svg#Teko) format('svg'); +} +.zep-color--indigo-blue { + color: #27166f; +} +.zep-background-color--indigo-blue { + background-color: #27166f; +} +.zep-border-color--indigo-blue { + border-color: #27166f; +} +.zep-color--cat-yellow { + color: #f0b823; +} +.zep-background-color--cat-yellow { + background-color: #f0b823; +} +.zep-border-color--cat-yellow { + border-color: #f0b823; +} +.zep-color--rental-red { + color: #af0e0e; +} +.zep-background-color--rental-red { + background-color: #af0e0e; +} +.zep-border-color--rental-red { + border-color: #af0e0e; +} +.zep-color--zlab-blue { + color: #00aeef; +} +.zep-background-color--zlab-blue { + background-color: #00aeef; +} +.zep-border-color--zlab-blue { + border-color: #00aeef; +} +.zep-color--black { + color: #000; +} +.zep-background-color--black { + background-color: #000; +} +.zep-border-color--black { + border-color: #000; +} +.zep-color--gray-dark { + color: #101111; +} +.zep-background-color--gray-dark { + background-color: #101111; +} +.zep-border-color--gray-dark { + border-color: #101111; +} +.zep-color--gray-mid-dark { + color: #373d3f; +} +.zep-background-color--gray-mid-dark { + background-color: #373d3f; +} +.zep-border-color--gray-mid-dark { + border-color: #373d3f; +} +.zep-color--gray { + color: #464a4c; +} +.zep-background-color--gray { + background-color: #464a4c; +} +.zep-border-color--gray { + border-color: #464a4c; +} +.zep-color--text-gray { + color: #555f61; +} +.zep-background-color--text-gray { + background-color: #555f61; +} +.zep-border-color--text-gray { + border-color: #555f61; +} +.zep-color--gray-light { + color: #6f7c80; +} +.zep-background-color--gray-light { + background-color: #6f7c80; +} +.zep-border-color--gray-light { + border-color: #6f7c80; +} +.zep-color--disabled { + color: #c1c7c9; +} +.zep-background-color--disabled { + background-color: #c1c7c9; +} +.zep-border-color--disabled { + border-color: #c1c7c9; +} +.zep-color--gray-lighter { + color: #eceeef; +} +.zep-background-color--gray-lighter { + background-color: #eceeef; +} +.zep-border-color--gray-lighter { + border-color: #eceeef; +} +.zep-color--gray-mid { + color: #f2f3f4; +} +.zep-background-color--gray-mid { + background-color: #f2f3f4; +} +.zep-border-color--gray-mid { + border-color: #f2f3f4; +} +.zep-color--gray-lightest { + color: #f7f7f9; +} +.zep-background-color--gray-lightest { + background-color: #f7f7f9; +} +.zep-border-color--gray-lightest { + border-color: #f7f7f9; +} +.zep-color--white { + color: #fff; +} +.zep-background-color--white { + background-color: #fff; +} +.zep-border-color--white { + border-color: #fff; +} +.zep-color--success { + color: #5cb85c; +} +.zep-background-color--success { + background-color: #5cb85c; +} +.zep-border-color--success { + border-color: #5cb85c; +} +.zep-color--warning { + color: #f0ad4e; +} +.zep-background-color--warning { + background-color: #f0ad4e; +} +.zep-border-color--warning { + border-color: #f0ad4e; +} +.zep-color--alert { + color: #ff6562; +} +.zep-background-color--alert { + background-color: #ff6562; +} +.zep-border-color--alert { + border-color: #ff6562; +} +.zep-color--info { + color: #5bc0de; +} +.zep-background-color--info { + background-color: #5bc0de; +} +.zep-border-color--info { + border-color: #5bc0de; +} +.zep-color--xing { + color: #026466; +} +.zep-background-color--xing { + background-color: #026466; +} +.zep-border-color--xing { + border-color: #026466; +} +.zep-color--facebook { + color: #4267b2; +} +.zep-background-color--facebook { + background-color: #4267b2; +} +.zep-border-color--facebook { + border-color: #4267b2; +} +.zep-color--twitter { + color: #1da1f2; +} +.zep-background-color--twitter { + background-color: #1da1f2; +} +.zep-border-color--twitter { + border-color: #1da1f2; +} +.zep-color--linkedin { + color: #0077b5; +} +.zep-background-color--linkedin { + background-color: #0077b5; +} +.zep-border-color--linkedin { + border-color: #0077b5; +} +.zep-color--kununu { + color: #99c613; +} +.zep-background-color--kununu { + background-color: #99c613; +} +.zep-border-color--kununu { + border-color: #99c613; +} +.zep-color--youtube { + color: red; +} +.zep-background-color--youtube { + background-color: red; +} +.zep-border-color--youtube { + border-color: red; +} +.zep-color--googleplus { + color: #dd4b39; +} +.zep-background-color--googleplus { + background-color: #dd4b39; +} +.zep-border-color--googleplus { + border-color: #dd4b39; +} +.zep-color--cat-yellow-hover { + color: #fae6b2; +} +.zep-background-color--cat-yellow-hover { + background-color: #fae6b2; +} +.zep-border-color--cat-yellow-hover { + border-color: #fae6b2; +} +.zep-typo--display-1 { + font-size: 3.5em; +} +.zep-typo--display-1, +.zep-typo--display-2 { + font-family: Teko; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--display-2 { + font-size: 4.5em; +} +.zep-typo--display-3 { + font-size: 5.5em; +} +.zep-typo--display-3, +.zep-typo--display-4 { + font-family: Teko; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--display-4 { + font-size: 6em; +} +.zep-typo--normal-1 { + font-size: 0.75em; +} +.zep-typo--normal-1, +.zep-typo--normal-2 { + font-family: Roboto; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--normal-2 { + font-size: 0.875em; +} +.zep-typo--normal-3 { + font-family: Roboto; + font-size: 1em; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--normal-4 { + font-size: 1.25em; +} +.zep-typo--normal-4, +.zep-typo--normal-5 { + font-family: Teko; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--normal-5 { + font-size: 1.5em; +} +.zep-typo--normal-6 { + font-size: 1.75em; +} +.zep-typo--normal-6, +.zep-typo--normal-7 { + font-family: Teko; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--normal-7 { + font-size: 2.25em; +} +.zep-typo--normal-8 { + font-family: Teko; + font-size: 2.5em; + font-weight: 400; + line-height: 1.5; + text-transform: none; + margin: 0; +} +.zep-typo--special-1 { + font-size: 0.75em; +} +.zep-typo--special-1, +.zep-typo--special-2 { + font-family: Roboto; + font-weight: 400; + line-height: 1.5; + text-transform: uppercase; + margin: 0; +} +.zep-typo--special-2 { + font-size: 0.875em; +} +.zep-typo--special-3 { + font-size: 1em; +} +.zep-button, +.zep-typo--special-3, +.zep-typo--special-4 { + font-family: Teko; + font-weight: 400; + line-height: 1.5; + text-transform: uppercase; + margin: 0; +} +.zep-button, +.zep-typo--special-4 { + font-size: 1.5em; +} +* { + box-sizing: border-box; +} +body, +html { + font-size: 16px; + font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, + Open Sans, Helvetica Neue, Arial, sans-serif; + margin: 0; + padding: 0; + height: 100%; +} +img { + max-width: 100%; + height: auto; +} +a { + text-decoration: none; + cursor: pointer; +} +.zep-visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); +} +.zep-visually-hidden:focus { + position: static; + width: auto; + height: auto; +} +[aria-hidden='true'], +[hidden] { + display: none; +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; +} +.zep-button { + box-sizing: border-box; + display: inline-block; + border: 0; + background: rgba(0, 0, 0, 0); + outline: 0; + text-align: center; + cursor: pointer; + line-height: 3rem; + height: 3rem; + padding: 0 1.125rem; +} +.zep-button.zep-button-primary { + color: #fff; + background-color: #27166f; +} +.zep-button.zep-button-primary.zep-button-primary--hover, +.zep-button.zep-button-primary:focus, +.zep-button.zep-button-primary:hover { + background-color: #361e9a; +} +.zep-button.zep-button-primary.zep-button-primary--disabled, +.zep-button.zep-button-primary:disabled { + color: #c1c7c9; + background-color: #eceeef; +} +.zep-button.zep-button-secondary { + background-color: #fff; + border: 2px solid #27166f; + line-height: calc(3rem - 4px); +} +.zep-button.zep-button-secondary.zep-button-secondary--hover, +.zep-button.zep-button-secondary:focus, +.zep-button.zep-button-secondary:hover { + color: #fff; + background-color: #27166f; + border-color: #27166f; +} +.zep-button.zep-button-secondary.zep-button-secondary--disabled, +.zep-button.zep-button-secondary:disabled { + color: #c1c7c9; + background-color: #fff; + border-color: #eceeef; + cursor: not-allowed; +} +.zep-button--full { + display: block; + width: 100%; +} +.zep-tag { + box-sizing: border-box; + display: inline-block; + border: 2px solid #f0b823; + padding: 0.625rem; + background-color: #fff; + color: #000; +} +.zep-tag.zep-tag--hover, +.zep-tag:focus, +.zep-tag:hover { + background-color: #fae6b2; +} +.zep-tag i, +.zep-tag img, +.zep-tag svg { + width: 12px; + height: 12px; + color: #f0b823; + margin-left: 0.625rem; + float: right; + cursor: pointer; +} +@font-face { + font-family: zepicons; + src: url(assets/fonts/zepicons.eot?#iefix) format('embedded-opentype'), + url(assets/fonts/zepicons.woff) format('woff'), + url(assets/fonts/zepicons.woff2) format('woff2'), + url(assets/fonts/zepicons.ttf) format('truetype'), + url(assets/fonts/zepicons.svg#zepicons) format('svg'); +} +.zepicons { + line-height: 1; +} +.zepicons:before { + font-family: zepicons !important; + font-style: normal; + font-weight: 400 !important; + vertical-align: top; +} +.zepicons-account:before { + content: '\f101'; +} +.zepicons-add-cart:before { + content: '\f102'; +} +.zepicons-add-solution:before { + content: '\f103'; +} +.zepicons-attachment:before { + content: '\f104'; +} +.zepicons-average:before { + content: '\f105'; +} +.zepicons-bell:before { + content: '\f106'; +} +.zepicons-bookmark:before { + content: '\f107'; +} +.zepicons-br:before { + content: '\f108'; +} +.zepicons-briefcase:before { + content: '\f109'; +} +.zepicons-calendar-clock:before { + content: '\f10a'; +} +.zepicons-calendar-range:before { + content: '\f10b'; +} +.zepicons-camera:before { + content: '\f10c'; +} +.zepicons-cart:before { + content: '\f10d'; +} +.zepicons-cat-new:before { + content: '\f10e'; +} +.zepicons-cat-service:before { + content: '\f10f'; +} +.zepicons-cat-used:before { + content: '\f110'; +} +.zepicons-chat:before { + content: '\f111'; +} +.zepicons-check:before { + content: '\f112'; +} +.zepicons-chevron-down:before { + content: '\f113'; +} +.zepicons-chevron-left:before { + content: '\f114'; +} +.zepicons-chevron-right:before { + content: '\f115'; +} +.zepicons-chevron-up:before { + content: '\f116'; +} +.zepicons-clock:before { + content: '\f117'; +} +.zepicons-close:before { + content: '\f118'; +} +.zepicons-compare:before { + content: '\f119'; +} +.zepicons-contact-mail:before { + content: '\f11a'; +} +.zepicons-contacts:before { + content: '\f11b'; +} +.zepicons-copy:before { + content: '\f11c'; +} +.zepicons-crosshair:before { + content: '\f11d'; +} +.zepicons-delete:before { + content: '\f11e'; +} +.zepicons-direction:before { + content: '\f11f'; +} +.zepicons-dots-horizontal:before { + content: '\f120'; +} +.zepicons-dots-vertical:before { + content: '\f121'; +} +.zepicons-download:before { + content: '\f122'; +} +.zepicons-dropdown:before { + content: '\f123'; +} +.zepicons-edit:before { + content: '\f124'; +} +.zepicons-email:before { + content: '\f125'; +} +.zepicons-expand:before { + content: '\f126'; +} +.zepicons-facebook:before { + content: '\f127'; +} +.zepicons-file-document:before { + content: '\f128'; +} +.zepicons-file:before { + content: '\f129'; +} +.zepicons-filter:before { + content: '\f12a'; +} +.zepicons-flag:before { + content: '\f12b'; +} +.zepicons-gb:before { + content: '\f12c'; +} +.zepicons-ger:before { + content: '\f12d'; +} +.zepicons-global:before { + content: '\f12e'; +} +.zepicons-googleplus:before { + content: '\f12f'; +} +.zepicons-headset:before { + content: '\f130'; +} +.zepicons-help:before { + content: '\f131'; +} +.zepicons-hide:before { + content: '\f132'; +} +.zepicons-home:before { + content: '\f133'; +} +.zepicons-image-album:before { + content: '\f134'; +} +.zepicons-image:before { + content: '\f135'; +} +.zepicons-in:before { + content: '\f136'; +} +.zepicons-info:before { + content: '\f137'; +} +.zepicons-instagram:before { + content: '\f138'; +} +.zepicons-it:before { + content: '\f139'; +} +.zepicons-kununu:before { + content: '\f13a'; +} +.zepicons-link:before { + content: '\f13b'; +} +.zepicons-linkedin:before { + content: '\f13c'; +} +.zepicons-list-plus:before { + content: '\f13d'; +} +.zepicons-logout:before { + content: '\f13e'; +} +.zepicons-map-marker:before { + content: '\f13f'; +} +.zepicons-map:before { + content: '\f140'; +} +.zepicons-menu:before { + content: '\f141'; +} +.zepicons-minus:before { + content: '\f142'; +} +.zepicons-next-page:before { + content: '\f143'; +} +.zepicons-open-in-new:before { + content: '\f144'; +} +.zepicons-phone:before { + content: '\f145'; +} +.zepicons-plus:before { + content: '\f146'; +} +.zepicons-previous-page:before { + content: '\f147'; +} +.zepicons-print:before { + content: '\f148'; +} +.zepicons-ps-ps:before { + content: '\f149'; +} +.zepicons-ps-service:before { + content: '\f14a'; +} +.zepicons-ps-used:before { + content: '\f14b'; +} +.zepicons-reload:before { + content: '\f14c'; +} +.zepicons-rental-infrastructure:before { + content: '\f14d'; +} +.zepicons-rental-logistics:before { + content: '\f14e'; +} +.zepicons-rental-rent:before { + content: '\f14f'; +} +.zepicons-ru:before { + content: '\f150'; +} +.zepicons-sa:before { + content: '\f151'; +} +.zepicons-search:before { + content: '\f152'; +} +.zepicons-settings:before { + content: '\f153'; +} +.zepicons-sg:before { + content: '\f154'; +} +.zepicons-share:before { + content: '\f155'; +} +.zepicons-show:before { + content: '\f156'; +} +.zepicons-solutions:before { + content: '\f157'; +} +.zepicons-sort:before { + content: '\f158'; +} +.zepicons-star:before { + content: '\f159'; +} +.zepicons-systems-aviation:before { + content: '\f15a'; +} +.zepicons-systems-products:before { + content: '\f15b'; +} +.zepicons-systems-service:before { + content: '\f15c'; +} +.zepicons-systems-systems:before { + content: '\f15d'; +} +.zepicons-timer:before { + content: '\f15e'; +} +.zepicons-twitter:before { + content: '\f15f'; +} +.zepicons-unfold:before { + content: '\f160'; +} +.zepicons-upload:before { + content: '\f161'; +} +.zepicons-user-edit:before { + content: '\f162'; +} +.zepicons-user:before { + content: '\f163'; +} +.zepicons-users:before { + content: '\f164'; +} +.zepicons-view-grid:before { + content: '\f165'; +} +.zepicons-warning:before { + content: '\f166'; +} +.zepicons-xing:before { + content: '\f167'; +} +.zepicons-youtube:before { + content: '\f168'; +} +.zepicons-zoom-in:before { + content: '\f169'; +} +.zepicons-zoom-out:before { + content: '\f16a'; +}