/*! * * React FontIconPicker * * React Component to show a picker element to pick font-icons & svg * * @author Swashata Ghosh * @version 1.2.0 * @link https://github.com/fontIconPicker/react-fonticonpicker * @license MIT * * Copyright (c) 2018 Swashata Ghosh * * This software is released under the MIT License. * https://opensource.org/licenses/MIT * */ @font-face { font-family: fontIconPicker; src: url(../fonts/fontIconPicker.ttf) format("truetype"), url(../fonts/fontIconPicker.woff) format("woff"), url(../fonts/fontIconPicker.svg#fontIconPicker) format("svg"); font-weight: 400; font-style: normal; } [class*=" fipicon-"], [class^="fipicon-"] { font-family: fontIconPicker !important; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fipicon-angle-left:before { content: "\F104"; } .fipicon-angle-right:before { content: "\F105"; } .fipicon-angle-up:before { content: "\F106"; } .fipicon-angle-down:before { content: "\002B"; } .rfipbtn, .rfipdropdown { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 14px; line-height: 1.71429; vertical-align: baseline; } .rfipbtn, .rfipbtn *, .rfipdropdown, .rfipdropdown * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .rfipbtn input, .rfipbtn select, .rfipdropdown input, .rfipdropdown select { font-size: 14px; } .rfip { position: relative; display: inline-block; margin: 8px; vertical-align: middle; } .rfipbtn { width: 136px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; min-height: 50px; border-radius: 2px; cursor: pointer; -webkit-transition: border-color 0.25s, -webkit-box-shadow 0.25s; transition: border-color 0.25s, -webkit-box-shadow 0.25s; transition: box-shadow 0.25s, border-color 0.25s; transition: box-shadow 0.25s, border-color 0.25s, -webkit-box-shadow 0.25s; outline: 0 none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rfipbtn--open { border-radius: 2px 2px 0 0; } .rfipbtn__button { width: 48px; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: auto; -webkit-transition: background 0.25s, -webkit-box-shadow 0.25s; transition: background 0.25s, -webkit-box-shadow 0.25s; transition: background 0.25s, box-shadow 0.25s; transition: background 0.25s, box-shadow 0.25s, -webkit-box-shadow 0.25s; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .rfipbtn__button i { height: 100%; font-size: 26px; -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; } /* .rfipbtn__button--open i { */ /* -webkit-transform: rotate(-180deg); */ /* transform: rotate(-180deg); */ /* } */ .rfipbtn__current { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex: 0 0 86px; flex: 0 0 86px; padding: 2px; } .rfipbtn--multi { width: 258px; } .rfipbtn--multi .rfipbtn__current { -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-preferred-size: 212px; flex-basis: 212px; -ms-flex-line-pack: center; align-content: center; } .rfipbtn--multi .rfipbtn__current, .rfipbtn__icon { -webkit-box-orient: horizontal; -webkit-box-direction: normal; } .rfipbtn__icon { margin: 2px; padding: 0; height: 28px; width: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 2px; } .rfipbtn__icon--empty { font-size: 14px; line-height: 16px; margin-left: 8px; text-align: center; text-transform: lowercase; font-style: italic; } .rfipbtn__elm { display: -webkit-box; display: -ms-flexbox; display: flex; height: 28px; width: 28px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; } .rfipbtn__elm img, .rfipbtn__elm svg { height: 18px; width: auto; } .rfipbtn__del { width: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 28px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; cursor: pointer; } .rfipcategory { width: 100%; margin: 0 0 8px; position: relative; } .rfipcategory select { width: 100%; display: block; height: 32px; line-height: 32px; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: border 0.25s, -webkit-box-shadow 0.25s; transition: border 0.25s, -webkit-box-shadow 0.25s; transition: border 0.25s, box-shadow 0.25s; transition: border 0.25s, box-shadow 0.25s, -webkit-box-shadow 0.25s; background-color: transparent !important; } .rfipcategory i { position: absolute; right: 2px; top: 0; font-size: 16px; line-height: 32px; z-index: -1; } .rfipdropdown { width: 352px; position: absolute; left: 0; margin-top: -1px; z-index: 100000001; border-radius: 0 1px 4px 4px; } .rfipdropdown__selector { overflow: hidden; padding: 16px; } .rfipdropdown.fipappear-enter-active .rfipdropdown__selector, .rfipdropdown.fipappear-exit-active .rfipdropdown__selector { -webkit-transition: max-height 0.3s ease-out, padding 0.3s ease-out; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 16px; } .rfipicons__pager { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; height: 24px; line-height: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 8px; } .rfipicons__num { width: 100px; margin-right: auto; } .rfipicons__cp { width: 32px; height: 24px; line-height: 24px; text-align: right; } .rfipicons__cp, .rfipicons__sp, .rfipicons__tp { margin-right: 8px; } .rfipicons__arrow { margin-left: auto; width: 56px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 24px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .rfipicons__right { margin-left: auto; } .rfipicons__left, .rfipicons__right { cursor: pointer; width: 24px; height: 24px; position: relative; -webkit-transition: background-color 0.25s, border 0.25s; transition: background-color 0.25s, border 0.25s; outline: 0 none; border-radius: 2px; font-size: 18px; } .rfipicons__label { height: 22px; width: 22px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rfipicons__label img { height: 18px; width: 18px; } .rfipicons__selector { -webkit-box-flex: 1; -ms-flex: 1 1 20%; flex: 1 1 20%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .rfipicons__ibox, .rfipicons__selector { display: -webkit-box; display: -ms-flexbox; display: flex; } .rfipicons__ibox { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; -webkit-transition: background-color 0.25s, border 0.25s; transition: background-color 0.25s, border 0.25s; border-radius: 2px; outline: 0 none; font-size: 20px; } .rfipicons__ibox img, .rfipicons__ibox svg { max-height: 24px; width: auto; } .rfipicons__ibox > * { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.25s; transition: -webkit-transform 0.25s; transition: transform 0.25s; transition: transform 0.25s, -webkit-transform 0.25s; -webkit-transform-origin: center; transform-origin: center; } .rfipicons__ibox:hover > * { -webkit-transform: scale(1.8); transform: scale(1.8); } .rfipicons__ibox--error { text-transform: lowercase; font-style: italic; } .rfipicons__icon { width: 20%; height: 64px; padding: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; } .rfipicons__icon--error { display: block; padding: 16px; text-align: center; font-size: 24px; width: 100%; line-height: 1; } .rfipsearch { width: 100%; margin: 0 0 8px; } .rfipsearch input { width: 100%; display: block; height: 32px; line-height: 32px; }