diff --git a/src/assets/fonts/soramitsu-icons.woff b/src/assets/fonts/soramitsu-icons.woff new file mode 100644 index 00000000..d7fe06f0 Binary files /dev/null and b/src/assets/fonts/soramitsu-icons.woff differ diff --git a/src/assets/icons/activity.svg b/src/assets/icons/activity.svg deleted file mode 100644 index f0c76a4a..00000000 --- a/src/assets/icons/activity.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg deleted file mode 100644 index 13216e69..00000000 --- a/src/assets/icons/arrow-left.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/assets/icons/arrow-top.svg b/src/assets/icons/arrow-top.svg deleted file mode 100644 index 2436d0c7..00000000 --- a/src/assets/icons/arrow-top.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/create.svg b/src/assets/icons/create.svg deleted file mode 100644 index 0ef0864d..00000000 --- a/src/assets/icons/create.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/email.svg b/src/assets/icons/email.svg deleted file mode 100644 index eb67d2e9..00000000 --- a/src/assets/icons/email.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/file-upload.svg b/src/assets/icons/file-upload.svg deleted file mode 100644 index 60eac80c..00000000 --- a/src/assets/icons/file-upload.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/globe.svg b/src/assets/icons/globe.svg deleted file mode 100644 index bdaaf594..00000000 --- a/src/assets/icons/globe.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/assets/icons/link-off.svg b/src/assets/icons/link-off.svg deleted file mode 100644 index c9aebc1f..00000000 --- a/src/assets/icons/link-off.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/link-on.svg b/src/assets/icons/link-on.svg deleted file mode 100644 index bd161522..00000000 --- a/src/assets/icons/link-on.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/log-out.svg b/src/assets/icons/log-out.svg deleted file mode 100644 index 98cfd13c..00000000 --- a/src/assets/icons/log-out.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/assets/icons/more-horizontal.svg b/src/assets/icons/more-horizontal.svg deleted file mode 100644 index dc1ec966..00000000 --- a/src/assets/icons/more-horizontal.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg deleted file mode 100644 index 6d53a8df..00000000 --- a/src/assets/icons/play.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg deleted file mode 100644 index 4977f632..00000000 --- a/src/assets/icons/plus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/refresh-red.svg b/src/assets/icons/refresh-red.svg deleted file mode 100644 index d4db0de1..00000000 --- a/src/assets/icons/refresh-red.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/icons/refresh.svg b/src/assets/icons/refresh.svg deleted file mode 100644 index 3c460cf8..00000000 --- a/src/assets/icons/refresh.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg deleted file mode 100644 index 44135c3e..00000000 --- a/src/assets/icons/stop.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/icons/warning.svg b/src/assets/icons/warning.svg deleted file mode 100644 index e8a57025..00000000 --- a/src/assets/icons/warning.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/components/Button/SButton.vue b/src/components/Button/SButton.vue index 5622b21b..37513e00 100644 --- a/src/components/Button/SButton.vue +++ b/src/components/Button/SButton.vue @@ -13,7 +13,7 @@ :icon="elementIcon" @click="handleClick" > - + @@ -24,11 +24,12 @@ import { Vue, Component, Prop, Inject } from 'vue-property-decorator' import { ElForm } from 'element-ui/types/form' import { ElFormItem } from 'element-ui/types/form-item' +import { SIcon } from '../Icon' import { STooltip } from '../Tooltip' import { ButtonTypes, ButtonSize, ButtonNativeTypes } from './consts' @Component({ - components: { STooltip } + components: { SIcon, STooltip } }) export default class SButton extends Vue { readonly ButtonTypes = ButtonTypes @@ -138,9 +139,8 @@ export default class SButton extends Vue { this.elementIcon = this.icon return '' } - // TODO: add checks for invalid icons this.elementIcon = '' - return `s-icon-${this.icon}` + return this.icon } get isLoading (): boolean { @@ -235,31 +235,60 @@ export default class SButton extends Vue { .action { &.big { width: $size-big; + i { + font-size: 20px; + } } &.medium { width: $size-medium; + i { + font-size: 18px; + } } &.small { width: $size-small; + i { + font-size: 16px; + margin-left: -2px; + margin-top: -2px; + } } + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-hover; border-color: $color-neutral-hover; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } &.alternative { background-color: $color-basic-white; border-color: $color-neutral-border; &:hover, &:active, &:focus, &:disabled, &:disabled:hover { + color: $color-basic-black; background-color: $color-neutral-placeholder; border-color: $color-neutral-placeholder; } + &:disabled, &:disabled:hover { + color: $color-neutral-inactive; + } } } -button > span > i { - top: -10px; - left: -10px; +button { + > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + display: inline-block; + color: inherit; + } + } + &:not(.action) > span > i { + &[class^=s-icon-], &[class^=el-icon-] { + margin-right: 6px; + } + } } diff --git a/src/components/Collapse/SCollapseItem.vue b/src/components/Collapse/SCollapseItem.vue index bc1ad26f..d6d2d96a 100644 --- a/src/components/Collapse/SCollapseItem.vue +++ b/src/components/Collapse/SCollapseItem.vue @@ -53,7 +53,7 @@ export default class SCollapseItem extends Vue { diff --git a/src/components/Form/SFormItem.vue b/src/components/Form/SFormItem.vue index 1c286c97..7fc292a5 100644 --- a/src/components/Form/SFormItem.vue +++ b/src/components/Form/SFormItem.vue @@ -179,9 +179,10 @@ export default class SFormItem extends Vue { } .s-icon-error { position: absolute; - width: 21px; - height: 21px; - background-position: 4px bottom; + bottom: 0; + left: 4px; + font-size: 16px; + color: $color-error; } } } diff --git a/src/components/Icon/SIcon.vue b/src/components/Icon/SIcon.vue new file mode 100644 index 00000000..67103ad3 --- /dev/null +++ b/src/components/Icon/SIcon.vue @@ -0,0 +1,50 @@ + + + diff --git a/src/components/Icon/consts.ts b/src/components/Icon/consts.ts new file mode 100644 index 00000000..c8537cb3 --- /dev/null +++ b/src/components/Icon/consts.ts @@ -0,0 +1,155 @@ +export enum Icons { + Back = 'back', + Warning = 'warning', + Error = 'error', + Logout = 'logout', + Create = 'create', + Refresh = 'refresh', + Activity = 'activity', + Play = 'play', + Stop = 'stop', + BarChart = 'bar-chart', + Book = 'book', + BookmarkAdd = 'bookmark-add', + BookmarkNo = 'bookmark-no', + Bookmark = 'bookmark', + Bookmarks = 'bookmarks', + Box = 'box', + BrowserNo = 'browser-no', + Browser = 'browser', + Brush = 'brush', + Calculator = 'calculator', + CameraCreate = 'camera-create', + CameraNo = 'camera-no', + Camera = 'camera', + Case = 'case', + CheckMark = 'check-mark', + CheckMarks = 'check-marks', + CircleBlock = 'circle-block', + CircleChecked = 'circle-checked', + CircleMenu = 'circle-menu', + CircleMinus = 'circle-minus', + CircleMoreHorizontal = 'circle-more-horizontal', + CircleMoreVertical = 'circle-more-vertical', + CirclePlus = 'circle-plus', + CircleStar = 'circle-star', + CircleX = 'circle-x', + Circle = 'circle', + ClearStyle = 'clear-style', + Copy = 'copy', + Cut = 'cut', + Dashboard = 'dashboard', + Delete = 'delete', + DownloadBold = 'download-bold', + Download = 'download', + Drop = 'drop', + ExternalLink = 'external-link', + EyeNo = 'eye-no', + Eye = 'eye', + Flag = 'flag', + Flame = 'flame', + Glasses = 'glasses', + GlobeNo = 'globe-no', + Globe = 'globe', + HeartNo = 'heart-no', + Heart = 'heart', + Home = 'home', + Image = 'image', + Inbox = 'inbox', + Layers = 'layers', + LightningNo = 'lightning-no', + Lightning = 'lightning', + LinkNo = 'link-no', + Link = 'link', + List = 'list', + Mail = 'mail', + Maximize = 'maximize', + MenuDots = 'menu-dots', + Menu = 'menu', + MicNo = 'mic-no', + Mic = 'mic', + Minimize = 'minimize', + Minus = 'minus', + MoreHorizontal = 'more-horizontal', + MoreVertical = 'more-vertical', + Newspaper = 'newspaper', + Options = 'options', + PaperclipNo = 'paperclip-no', + Paperclip = 'paperclip', + PencilCreate = 'pencil-create', + PencilEdit = 'pencil-edit', + Plus = 'plus', + Presentation = 'presentation', + Printer = 'printer', + Pulse = 'pulse', + Scan = 'scan', + Screenshot = 'screenshot', + Search = 'search', + Send = 'send', + Settings = 'settings', + ShareArrow = 'share-arrow', + Share = 'share', + StarNo = 'star-no', + Star = 'star', + Sticker = 'sticker', + table = 'table', + TextAlignCenter = 'text-align-center', + TextAlignJustify = 'text-align-justify', + TextAlignLeft = 'text-align-left', + TextAlignRight = 'text-align-right', + TextBgcolor = 'text-bgcolor', + TextBold = 'text-bold', + TextColor = 'text-color', + TextItalic = 'text-italic', + TextUnderline = 'text-underline', + ThumbsDown = 'thumbs-down', + ThumbsUp = 'thumbs-up', + ToggleLeft = 'toggle-left', + ToggleRight = 'toggle-right', + TrashEmpty = 'trash-empty', + Trash = 'trash', + User = 'user', + VideoNo = 'video-no', + Video = 'video', + ZoomIn = 'zoom-in', + ZoomOut = 'zoom-out', + ArrowBottomLeft = 'arrow-bottom-left', + ArrowBottomRight = 'arrow-bottom-right', + ArrowBottom = 'arrow-bottom', + ArrowLeft = 'arrow-left', + ArrowRight = 'arrow-right', + ArrowTopLeft = 'arrow-top-left', + ArrowTopRight = 'arrow-top-right', + ArrowTop = 'arrow-top', + Calendar = 'calendar', + CallPhone = 'call-phone', + ChevronBottom = 'chevron-bottom', + ChevronLeft = 'chevron-left', + ChevronRight = 'chevron-right', + ChevronTop = 'chevron-top', + ChevronsBottom = 'chevrons-bottom', + ChevronsLeft = 'chevrons-left', + ChevronsRight = 'chevrons-right', + CircleArrowBottom = 'circle-arrow-bottom', + CircleArrowLeft = 'circle-arrow-left', + CircleArrowRight = 'circle-arrow-right', + CircleArrowTop = 'circle-arrow-top', + CircleChevronBottom = 'circle-chevron-bottom', + CircleChevronLeft = 'circle-chevron-left', + CircleChevronRight = 'circle-chevron-right', + CircleChevronTop = 'circle-chevron-top', + CircleChevronsTop = 'circle-chevrons-top', + File = 'file', + FileUpload = 'file-upload', + Folder = 'folder', + Info = 'info', + Lock = 'lock', + PaperclipVertical = 'paperclip-vertical', + Pencil = 'pencil', + Pin = 'pin', + QuestionCircle = 'question-circle', + Target = 'target', + Time = 'time', + WiFi = 'wi-fi', + X = 'x' +} diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts new file mode 100644 index 00000000..03323d1c --- /dev/null +++ b/src/components/Icon/index.ts @@ -0,0 +1,4 @@ +import SIcon from './SIcon.vue' +import { Icons } from './consts' + +export { SIcon, Icons } diff --git a/src/components/Input/SInput.vue b/src/components/Input/SInput.vue index 8cf14ce6..aa0ba0a3 100644 --- a/src/components/Input/SInput.vue +++ b/src/components/Input/SInput.vue @@ -29,7 +29,7 @@ @focus="handleFocus" /> @@ -313,10 +313,12 @@ export default class SInput extends Vue { .el-input > input { padding-right: 56px; } - .s-icon-file { + .s-icon-file-upload { top: 16px; right: 16px; + font-size: 24px; z-index: 1; + position: absolute; + input { cursor: pointer; position: absolute; diff --git a/src/components/Menu/SMenu.vue b/src/components/Menu/SMenu.vue index 802a8e64..fa76ffaf 100644 --- a/src/components/Menu/SMenu.vue +++ b/src/components/Menu/SMenu.vue @@ -2,6 +2,7 @@ @@ -78,10 +63,17 @@ export default class SSubmenu extends Vue { border-radius: 6px; [class^=s-icon-] { margin-right: 12px; + font-size: 20px; + } + i { + color: var(--s-menu-text-color); } .is-active > & { border-bottom-color: transparent !important; background-color: var(--s-menu-color-hover) !important; + i { + color: var(--s-menu-text-color-active); + } } &:not(.is-disabled):hover { background-color: var(--s-menu-color-hover) !important; diff --git a/src/components/index.ts b/src/components/index.ts index 4180e66b..8daef1e2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -16,6 +16,7 @@ import { SDropdown, SDropdownItem } from './Dropdown' import { SFooter } from './Layout/Footer' import { SForm, SFormItem } from './Form' import { SHeader } from './Layout/Header' +import { SIcon } from './Icon' import { SInput, SJsonInput } from './Input' import { SMain } from './Layout/Main' import { SMenu, SMenuItem, SMenuItemGroup, SSubmenu } from './Menu' @@ -45,6 +46,7 @@ export { SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, diff --git a/src/index.ts b/src/index.ts index e5f97622..9acebb02 100644 --- a/src/index.ts +++ b/src/index.ts @@ -21,6 +21,7 @@ import { SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, @@ -59,6 +60,7 @@ const elements = [ { component: SForm, name: Components.SForm }, { component: SFormItem, name: Components.SFormItem }, { component: SHeader, name: Components.SHeader }, + { component: SIcon, name: Components.SIcon }, { component: SInput, name: Components.SInput }, { component: SJsonInput, name: Components.SJsonInput }, { component: SMain, name: Components.SMain }, @@ -108,6 +110,7 @@ export { SForm, SFormItem, SHeader, + SIcon, SInput, SJsonInput, SMain, diff --git a/src/stories/SButton.stories.ts b/src/stories/SButton.stories.ts index 602a0e6f..c491af8c 100644 --- a/src/stories/SButton.stories.ts +++ b/src/stories/SButton.stories.ts @@ -1,6 +1,6 @@ import { text, boolean, select, withKnobs } from '@storybook/addon-knobs' -import { SButton, SButtonGroup, SRow } from '../components' +import { SButton, SButtonGroup, SRow, SCol, SMain } from '../components' import { ButtonSize, ButtonTypes } from '../components/Button' export default { @@ -142,6 +142,37 @@ export const loading = () => ({ } }) +export const withIcon = () => ({ + components: { SButton, SRow, SCol, SMain }, + template: ` + + + + {{ item.label }} + + + + + {{ item.label }} + + + + + {{ item.label }} + + + + `, + props: { + differentSizeData: { + default: () => differentSizeData + }, + differentTypesData: { + default: () => differentTypesData + } + } +}) + export const buttonGroup = () => ({ components: { SButton, SButtonGroup, SRow }, template: ` diff --git a/src/stories/SIcon.stories.ts b/src/stories/SIcon.stories.ts new file mode 100644 index 00000000..c9f13cc1 --- /dev/null +++ b/src/stories/SIcon.stories.ts @@ -0,0 +1,48 @@ +import { withKnobs, select, number } from '@storybook/addon-knobs' + +import { SCol, SRow, SMain, SIcon } from '../components' +import { Icons } from '../components/Icon' + +export default { + component: SIcon, + title: 'Design System/Icon', + decorators: [withKnobs] +} + +export const configurable = () => ({ + components: { SMain, SRow, SCol, SIcon }, + template: ` + + + + `, + props: { + name: { + default: select('Name', Object.values(Icons), Icons.Activity) + }, + size: { + default: number('Content position', 16) + } + } +}) + +export const allIcons = () => ({ + components: { SMain, SRow, SCol, SIcon }, + template: ` + + + + s-icon-{{ icon }} + + + `, + data: () => ({ + icons: Object.values(Icons) + }) +}) diff --git a/src/styles/icons.scss b/src/styles/icons.scss index 623c651e..73248705 100644 --- a/src/styles/icons.scss +++ b/src/styles/icons.scss @@ -1,140 +1,921 @@ -/* TODO: fix icons due to external usage */ -.s-icon- { - &file { - position: absolute; - background-image: url('~@/assets/icons/file-upload.svg'); - width: 24px; - height: 24px; - } +@import "./variables.scss"; - &refresh { - position: absolute; - background-image: url('~@/assets/icons/refresh.svg'); - width: 16px; - height: 16px; +[class^="s-icon-"], [class*=" s-icon-"] { + font-family: 'soramitsu-icons' !important; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + color: $color-basic-black; +} +/*_____________________________________________Icons variables_____________________________________________*/ +$s-icon-warning: "\e96c"; +$s-icon-logout: "\e98c"; +$s-icon-create: "\e979"; +$s-icon-refresh: "\e976"; +$s-icon-activity: "\e902"; +$s-icon-play: "\e900"; +$s-icon-stop: "\e901"; +$s-icon-bar-chart: "\e903"; +$s-icon-book: "\e904"; +$s-icon-bookmark-add: "\e905"; +$s-icon-bookmark-no: "\e906"; +$s-icon-bookmark: "\e907"; +$s-icon-bookmarks: "\e908"; +$s-icon-box: "\e909"; +$s-icon-browser-no: "\e90a"; +$s-icon-browser: "\e90b"; +$s-icon-brush: "\e90c"; +$s-icon-calculator: "\e90d"; +$s-icon-camera-create: "\e90e"; +$s-icon-camera-no: "\e90f"; +$s-icon-camera: "\e910"; +$s-icon-case: "\e911"; +$s-icon-check-mark: "\e912"; +$s-icon-check-marks: "\e913"; +$s-icon-circle-block: "\e914"; +$s-icon-circle-checked: "\e915"; +$s-icon-circle-menu: "\e916"; +$s-icon-circle-minus: "\e917"; +$s-icon-circle-more-horizontal: "\e918"; +$s-icon-circle-more-vertical: "\e919"; +$s-icon-circle-plus: "\e91a"; +$s-icon-circle-star: "\e91b"; +$s-icon-circle-x: "\e91c"; +$s-icon-circle: "\e91d"; +$s-icon-clear-style: "\e91e"; +$s-icon-copy: "\e91f"; +$s-icon-cut: "\e920"; +$s-icon-dashboard: "\e921"; +$s-icon-delete: "\e922"; +$s-icon-download-bold: "\e923"; +$s-icon-download: "\e924"; +$s-icon-drop: "\e925"; +$s-icon-external-link: "\e926"; +$s-icon-eye-no: "\e927"; +$s-icon-eye: "\e928"; +$s-icon-flag: "\e929"; +$s-icon-flame: "\e92a"; +$s-icon-glasses: "\e92b"; +$s-icon-globe-no: "\e92c"; +$s-icon-globe: "\e92d"; +$s-icon-heart-no: "\e92e"; +$s-icon-heart: "\e92f"; +$s-icon-home: "\e930"; +$s-icon-image: "\e931"; +$s-icon-inbox: "\e932"; +$s-icon-layers: "\e933"; +$s-icon-lightning-no: "\e934"; +$s-icon-lightning: "\e935"; +$s-icon-link-no: "\e936"; +$s-icon-link: "\e937"; +$s-icon-list: "\e938"; +$s-icon-mail: "\e939"; +$s-icon-maximize: "\e93a"; +$s-icon-menu-dots: "\e93b"; +$s-icon-menu: "\e93c"; +$s-icon-mic-no: "\e93d"; +$s-icon-mic: "\e93e"; +$s-icon-minimize: "\e93f"; +$s-icon-minus: "\e940"; +$s-icon-more-horizontal: "\e941"; +$s-icon-more-vertical: "\e942"; +$s-icon-newspaper: "\e943"; +$s-icon-options: "\e944"; +$s-icon-paperclip-no: "\e945"; +$s-icon-paperclip: "\e946"; +$s-icon-pencil-create: "\e947"; +$s-icon-pencil-edit: "\e948"; +$s-icon-plus: "\e949"; +$s-icon-presentation: "\e94a"; +$s-icon-printer: "\e94b"; +$s-icon-pulse: "\e94c"; +$s-icon-scan: "\e94d"; +$s-icon-screenshot: "\e94e"; +$s-icon-search: "\e94f"; +$s-icon-send: "\e950"; +$s-icon-settings: "\e951"; +$s-icon-share-arrow: "\e952"; +$s-icon-share: "\e953"; +$s-icon-star-no: "\e954"; +$s-icon-star: "\e955"; +$s-icon-sticker: "\e956"; +$s-icon-table: "\e957"; +$s-icon-text-align-center: "\e958"; +$s-icon-text-align-justify: "\e959"; +$s-icon-text-align-left: "\e95a"; +$s-icon-text-align-right: "\e95b"; +$s-icon-text-bgcolor: "\e95c"; +$s-icon-text-bold: "\e95d"; +$s-icon-text-color: "\e95e"; +$s-icon-text-italic: "\e95f"; +$s-icon-text-underline: "\e960"; +$s-icon-thumbs-down: "\e961"; +$s-icon-thumbs-up: "\e962"; +$s-icon-toggle-left: "\e963"; +$s-icon-toggle-right: "\e964"; +$s-icon-trash-empty: "\e965"; +$s-icon-trash: "\e966"; +$s-icon-user: "\e967"; +$s-icon-video-no: "\e968"; +$s-icon-video: "\e969"; +$s-icon-zoom-in: "\e96a"; +$s-icon-zoom-out: "\e96b"; +$s-icon-arrow-bottom-left: "\e96d"; +$s-icon-arrow-bottom-right: "\e96e"; +$s-icon-arrow-bottom: "\e96f"; +$s-icon-arrow-left: "\e970"; +$s-icon-arrow-right: "\e971"; +$s-icon-arrow-top-left: "\e972"; +$s-icon-arrow-top-right: "\e973"; +$s-icon-arrow-top: "\e974"; +$s-icon-calendar: "\e977"; +$s-icon-call-phone: "\e978"; +$s-icon-chevron-bottom: "\e97a"; +$s-icon-chevron-left: "\e97b"; +$s-icon-chevron-right: "\e97c"; +$s-icon-chevron-top: "\e97d"; +$s-icon-chevrons-bottom: "\e97e"; +$s-icon-chevrons-left: "\e97f"; +$s-icon-chevrons-right: "\e980"; +$s-icon-circle-arrow-bottom: "\e981"; +$s-icon-circle-arrow-left: "\e982"; +$s-icon-circle-arrow-right: "\e983"; +$s-icon-circle-arrow-top: "\e984"; +$s-icon-circle-chevron-bottom: "\e985"; +$s-icon-circle-chevron-left: "\e986"; +$s-icon-circle-chevron-right: "\e987"; +$s-icon-circle-chevron-top: "\e988"; +$s-icon-circle-chevrons-top: "\e989"; +$s-icon-file: "\e990"; +$s-icon-file-upload: "\e98a"; +$s-icon-folder: "\e991"; +$s-icon-info: "\e994"; +$s-icon-lock: "\e995"; +$s-icon-paperclip-vertical: "\e99a"; +$s-icon-pencil: "\e99c"; +$s-icon-pin: "\e99d"; +$s-icon-question-circle: "\e9a0"; +$s-icon-target: "\e9a3"; +$s-icon-time: "\e9a4"; +$s-icon-wi-fi: "\e9a5"; +$s-icon-x: "\e9a6"; +/*_____________________________________________Icons classes_____________________________________________*/ +.s-icon-warning, .s-icon-error { + &:before { + content: $s-icon-warning; } - - &refresh-red { - position: absolute; - background-image: url('~@/assets/icons/refresh-red.svg'); - width: 16px; - height: 16px; +} +.s-icon-logout { + &:before { + content: $s-icon-logout; } - - &create { - position: absolute; - background-image: url('~@/assets/icons/create.svg'); - width: 16px; - height: 16px; +} +.s-icon-create { + &:before { + content: $s-icon-create; } - - &play { - position: absolute; - background-image: url('~@/assets/icons/play.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-refresh { + &:before { + content: $s-icon-refresh; } - - &stop { - position: absolute; - background-image: url('~@/assets/icons/stop.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-activity { + &:before { + content: $s-icon-activity; } - - &link-on { - position: absolute; - background-image: url('~@/assets/icons/link-on.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-play { + &:before { + content: $s-icon-play; } - - &link-off { - position: absolute; - background-image: url('~@/assets/icons/link-off.svg'); - width: 16px; - height: 16px; - left: -8px; - top: -8px; +} +.s-icon-stop { + &:before { + content: $s-icon-stop; } - - &plus-small { - position: absolute; - background-image: url('~@/assets/icons/plus.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bar-chart { + &:before { + content: $s-icon-bar-chart; } - - &back { - position: absolute; - background-image: url('~@/assets/icons/arrow-left.svg'); - width: 20px; - height: 20px; +} +.s-icon-book { + &:before { + content: $s-icon-book; } - - &more { - position: absolute; - background-image: url('~@/assets/icons/more-horizontal.svg'); - width: 21px; - height: 20px; +} +.s-icon-bookmark-add { + &:before { + content: $s-icon-bookmark-add; } - - &more-small { - position: absolute; - background-image: url('~@/assets/icons/more-horizontal.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bookmark-no { + &:before { + content: $s-icon-bookmark-no; } - - &back-small { - position: absolute; - background-image: url('~@/assets/icons/arrow-left.svg'); - background-size: contain; - width: 12px; - height: 12px; - top: -6px; - left: -6px; +} +.s-icon-bookmark { + &:before { + content: $s-icon-bookmark; } - - &globe { - background-image: url('~@/assets/icons/globe.svg'); - width: 20px; - height: 20px; +} +.s-icon-bookmarks { + &:before { + content: $s-icon-bookmarks; } - - &activity { - background-image: url('~@/assets/icons/activity.svg'); - width: 20px; - height: 20px; +} +.s-icon-box { + &:before { + content: $s-icon-box; } - - &logout { - background-image: url('~@/assets/icons/log-out.svg'); - width: 20px; - height: 20px; +} +.s-icon-browser-no { + &:before { + content: $s-icon-browser-no; } - - &error { - background-image: url('~@/assets/icons/warning.svg'); - background-repeat: no-repeat; - background-position: 2px center; +} +.s-icon-browser { + &:before { + content: $s-icon-browser; } - - &arrow-top { - background-image: url('~@/assets/icons/arrow-top.svg'); - background-repeat: no-repeat; - background-position: center; +} +.s-icon-brush { + &:before { + content: $s-icon-brush; + } +} +.s-icon-calculator { + &:before { + content: $s-icon-calculator; + } +} +.s-icon-camera-create { + &:before { + content: $s-icon-camera-create; + } +} +.s-icon-camera-no { + &:before { + content: $s-icon-camera-no; + } +} +.s-icon-camera { + &:before { + content: $s-icon-camera; + } +} +.s-icon-case { + &:before { + content: $s-icon-case; + } +} +.s-icon-check-mark { + &:before { + content: $s-icon-check-mark; + } +} +.s-icon-check-marks { + &:before { + content: $s-icon-check-marks; + } +} +.s-icon-circle-block { + &:before { + content: $s-icon-circle-block; + } +} +.s-icon-circle-checked { + &:before { + content: $s-icon-circle-checked; + } +} +.s-icon-circle-menu { + &:before { + content: $s-icon-circle-menu; + } +} +.s-icon-circle-minus { + &:before { + content: $s-icon-circle-minus; + } +} +.s-icon-circle-more-horizontal { + &:before { + content: $s-icon-circle-more-horizontal; + } +} +.s-icon-circle-more-vertical { + &:before { + content: $s-icon-circle-more-vertical; + } +} +.s-icon-circle-plus { + &:before { + content: $s-icon-circle-plus; + } +} +.s-icon-circle-star { + &:before { + content: $s-icon-circle-star; + } +} +.s-icon-circle-x { + &:before { + content: $s-icon-circle-x; + } +} +.s-icon-circle { + &:before { + content: $s-icon-circle; + } +} +.s-icon-clear-style { + &:before { + content: $s-icon-clear-style; + } +} +.s-icon-copy { + &:before { + content: $s-icon-copy; + } +} +.s-icon-cut { + &:before { + content: $s-icon-cut; + } +} +.s-icon-dashboard { + &:before { + content: $s-icon-dashboard; + } +} +.s-icon-delete { + &:before { + content: $s-icon-delete; + } +} +.s-icon-download-bold { + &:before { + content: $s-icon-download-bold; + } +} +.s-icon-download { + &:before { + content: $s-icon-download; + } +} +.s-icon-drop { + &:before { + content: $s-icon-drop; + } +} +.s-icon-external-link { + &:before { + content: $s-icon-external-link; + } +} +.s-icon-eye-no { + &:before { + content: $s-icon-eye-no; + } +} +.s-icon-eye { + &:before { + content: $s-icon-eye; + } +} +.s-icon-flag { + &:before { + content: $s-icon-flag; + } +} +.s-icon-flame { + &:before { + content: $s-icon-flame; + } +} +.s-icon-glasses { + &:before { + content: $s-icon-glasses; + } +} +.s-icon-globe-no { + &:before { + content: $s-icon-globe-no; + } +} +.s-icon-globe { + &:before { + content: $s-icon-globe; + } +} +.s-icon-heart-no { + &:before { + content: $s-icon-heart-no; + } +} +.s-icon-heart { + &:before { + content: $s-icon-heart; + } +} +.s-icon-home { + &:before { + content: $s-icon-home; + } +} +.s-icon-image { + &:before { + content: $s-icon-image; + } +} +.s-icon-inbox { + &:before { + content: $s-icon-inbox; + } +} +.s-icon-layers { + &:before { + content: $s-icon-layers; + } +} +.s-icon-lightning-no { + &:before { + content: $s-icon-lightning-no; + } +} +.s-icon-lightning { + &:before { + content: $s-icon-lightning; + } +} +.s-icon-link-no { + &:before { + content: $s-icon-link-no; + } +} +.s-icon-link { + &:before { + content: $s-icon-link; + } +} +.s-icon-list { + &:before { + content: $s-icon-list; + } +} +.s-icon-mail { + &:before { + content: $s-icon-mail; + } +} +.s-icon-maximize { + &:before { + content: $s-icon-maximize; + } +} +.s-icon-menu-dots { + &:before { + content: $s-icon-menu-dots; + } +} +.s-icon-menu { + &:before { + content: $s-icon-menu; + } +} +.s-icon-mic-no { + &:before { + content: $s-icon-mic-no; + } +} +.s-icon-mic { + &:before { + content: $s-icon-mic; + } +} +.s-icon-minimize { + &:before { + content: $s-icon-minimize; + } +} +.s-icon-minus { + &:before { + content: $s-icon-minus; + } +} +.s-icon-more-horizontal { + &:before { + content: $s-icon-more-horizontal; + } +} +.s-icon-more-vertical { + &:before { + content: $s-icon-more-vertical; + } +} +.s-icon-newspaper { + &:before { + content: $s-icon-newspaper; + } +} +.s-icon-options { + &:before { + content: $s-icon-options; + } +} +.s-icon-paperclip-no { + &:before { + content: $s-icon-paperclip-no; + } +} +.s-icon-paperclip { + &:before { + content: $s-icon-paperclip; + } +} +.s-icon-pencil-create { + &:before { + content: $s-icon-pencil-create; + } +} +.s-icon-pencil-edit { + &:before { + content: $s-icon-pencil-edit; + } +} +.s-icon-plus { + &:before { + content: $s-icon-plus; + } +} +.s-icon-presentation { + &:before { + content: $s-icon-presentation; + } +} +.s-icon-printer { + &:before { + content: $s-icon-printer; + } +} +.s-icon-pulse { + &:before { + content: $s-icon-pulse; + } +} +.s-icon-scan { + &:before { + content: $s-icon-scan; + } +} +.s-icon-screenshot { + &:before { + content: $s-icon-screenshot; + } +} +.s-icon-search { + &:before { + content: $s-icon-search; + } +} +.s-icon-send { + &:before { + content: $s-icon-send; + } +} +.s-icon-settings { + &:before { + content: $s-icon-settings; + } +} +.s-icon-share-arrow { + &:before { + content: $s-icon-share-arrow; + } +} +.s-icon-share { + &:before { + content: $s-icon-share; + } +} +.s-icon-star-no { + &:before { + content: $s-icon-star-no; + } +} +.s-icon-star { + &:before { + content: $s-icon-star; + } +} +.s-icon-sticker { + &:before { + content: $s-icon-sticker; + } +} +.s-icon-table { + &:before { + content: $s-icon-table; + } +} +.s-icon-text-align-center { + &:before { + content: $s-icon-text-align-center; + } +} +.s-icon-text-align-justify { + &:before { + content: $s-icon-text-align-justify; + } +} +.s-icon-text-align-left { + &:before { + content: $s-icon-text-align-left; + } +} +.s-icon-text-align-right { + &:before { + content: $s-icon-text-align-right; + } +} +.s-icon-text-bgcolor { + &:before { + content: $s-icon-text-bgcolor; + } +} +.s-icon-text-bold { + &:before { + content: $s-icon-text-bold; + } +} +.s-icon-text-color { + &:before { + content: $s-icon-text-color; + } +} +.s-icon-text-italic { + &:before { + content: $s-icon-text-italic; + } +} +.s-icon-text-underline { + &:before { + content: $s-icon-text-underline; + } +} +.s-icon-thumbs-down { + &:before { + content: $s-icon-thumbs-down; + } +} +.s-icon-thumbs-up { + &:before { + content: $s-icon-thumbs-up; + } +} +.s-icon-toggle-left { + &:before { + content: $s-icon-toggle-left; + } +} +.s-icon-toggle-right { + &:before { + content: $s-icon-toggle-right; + } +} +.s-icon-trash-empty { + &:before { + content: $s-icon-trash-empty; + } +} +.s-icon-trash { + &:before { + content: $s-icon-trash; + } +} +.s-icon-user { + &:before { + content: $s-icon-user; + } +} +.s-icon-video-no { + &:before { + content: $s-icon-video-no; + } +} +.s-icon-video { + &:before { + content: $s-icon-video; + } +} +.s-icon-zoom-in { + &:before { + content: $s-icon-zoom-in; + } +} +.s-icon-zoom-out { + &:before { + content: $s-icon-zoom-out; + } +} +.s-icon-arrow-bottom-left { + &:before { + content: $s-icon-arrow-bottom-left; + } +} +.s-icon-arrow-bottom-right { + &:before { + content: $s-icon-arrow-bottom-right; + } +} +.s-icon-arrow-bottom { + &:before { + content: $s-icon-arrow-bottom; + } +} +.s-icon-arrow-left, .s-icon-back { + &:before { + content: $s-icon-arrow-left; + } +} +.s-icon-arrow-right { + &:before { + content: $s-icon-arrow-right; + } +} +.s-icon-arrow-top-left { + &:before { + content: $s-icon-arrow-top-left; + } +} +.s-icon-arrow-top-right { + &:before { + content: $s-icon-arrow-top-right; + } +} +.s-icon-arrow-top { + &:before { + content: $s-icon-arrow-top; + } +} +.s-icon-calendar { + &:before { + content: $s-icon-calendar; + } +} +.s-icon-call-phone { + &:before { + content: $s-icon-call-phone; + } +} +.s-icon-chevron-bottom { + &:before { + content: $s-icon-chevron-bottom; + } +} +.s-icon-chevron-left { + &:before { + content: $s-icon-chevron-left; + } +} +.s-icon-chevron-right { + &:before { + content: $s-icon-chevron-right; + } +} +.s-icon-chevron-top { + &:before { + content: $s-icon-chevron-top; + } +} +.s-icon-chevrons-bottom { + &:before { + content: $s-icon-chevrons-bottom; + } +} +.s-icon-chevrons-left { + &:before { + content: $s-icon-chevrons-left; + } +} +.s-icon-chevrons-right { + &:before { + content: $s-icon-chevrons-right; + } +} +.s-icon-circle-arrow-bottom { + &:before { + content: $s-icon-circle-arrow-bottom; + } +} +.s-icon-circle-arrow-left { + &:before { + content: $s-icon-circle-arrow-left; + } +} +.s-icon-circle-arrow-right { + &:before { + content: $s-icon-circle-arrow-right; + } +} +.s-icon-circle-arrow-top { + &:before { + content: $s-icon-circle-arrow-top; + } +} +.s-icon-circle-chevron-bottom { + &:before { + content: $s-icon-circle-chevron-bottom; + } +} +.s-icon-circle-chevron-left { + &:before { + content: $s-icon-circle-chevron-left; + } +} +.s-icon-circle-chevron-right { + &:before { + content: $s-icon-circle-chevron-right; + } +} +.s-icon-circle-chevron-top { + &:before { + content: $s-icon-circle-chevron-top; + } +} +.s-icon-circle-chevrons-top { + &:before { + content: $s-icon-circle-chevrons-top; + } +} +.s-icon-file { + &:before { + content: $s-icon-file; + } +} +.s-icon-file-upload { + &:before { + content: $s-icon-file-upload; + } +} +.s-icon-folder { + &:before { + content: $s-icon-folder; + } +} +.s-icon-info { + &:before { + content: $s-icon-info; + } +} +.s-icon-lock { + &:before { + content: $s-icon-lock; + } +} +.s-icon-paperclip-vertical { + &:before { + content: $s-icon-paperclip-vertical; + } +} +.s-icon-pencil { + &:before { + content: $s-icon-pencil; + } +} +.s-icon-pin { + &:before { + content: $s-icon-pin; + } +} +.s-icon-question-circle { + &:before { + content: $s-icon-question-circle; + } +} +.s-icon-target { + &:before { + content: $s-icon-target; + } +} +.s-icon-time { + &:before { + content: $s-icon-time; + } +} +.s-icon-wi-fi { + &:before { + content: $s-icon-wi-fi; + } +} +.s-icon-x { + &:before { + content: $s-icon-x; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d1cc7572..5b688981 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -24,6 +24,13 @@ $size-small: 32px; $border-radius-default: 4px; // Fonts +@font-face { + font-family: "soramitsu-icons"; + src: url("~@/assets/fonts/soramitsu-icons.woff"); + font-weight: normal; + font-style: normal; + font-display: block; +} @font-face { font-family: "SoraB"; src: url("~@/assets/fonts/Sora-Bold.otf"); diff --git a/src/types/components.ts b/src/types/components.ts index 91d0df47..1480241e 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -19,6 +19,7 @@ export enum Components { SForm = 'SForm', SFormItem = 'SFormItem', SHeader = 'SHeader', + SIcon = 'SIcon', SInput = 'SInput', SJsonInput = 'SJsonInput', SMain = 'SMain',