diff options
Diffstat (limited to 'front/odiparpack/app/styles/components')
24 files changed, 4505 insertions, 0 deletions
diff --git a/front/odiparpack/app/styles/components/Code.scss b/front/odiparpack/app/styles/components/Code.scss new file mode 100644 index 0000000..11a105f --- /dev/null +++ b/front/odiparpack/app/styles/components/Code.scss @@ -0,0 +1,9 @@ +.codePre{ + code{ + color: #4f00ff; + padding: 3px; + border: #c1c1c1 1px solid; + border-radius: 3px; + font-size: 13px; + } +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/Form.scss b/front/odiparpack/app/styles/components/Form.scss new file mode 100644 index 0000000..eb13fe3 --- /dev/null +++ b/front/odiparpack/app/styles/components/Form.scss @@ -0,0 +1,24 @@ +@import "./../mixins"; +$sm: "(max-width: 600px)"; +.bodyForm{ + position: relative; + background: $white; + padding: 24px; + @media #{$sm} { + padding: 15px 10px; + } + max-height: 450px; + overflow: auto; +} +.buttonArea{ + background: material-color('grey', '100'); + position: relative; + bottom: 0; + left: 0; + width: 100%; + text-align: right; + padding: 8px 24px; + button{ + margin-right: 5px; + } +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/Messages.scss b/front/odiparpack/app/styles/components/Messages.scss new file mode 100644 index 0000000..16b61ca --- /dev/null +++ b/front/odiparpack/app/styles/components/Messages.scss @@ -0,0 +1,89 @@ +@import "../../styles/mixins"; + +@mixin theme() { + width: 100%; + display: flex; + padding: 10px; + background: none; + border: none; +} + +// Fill Background +.bgInfo, div.bgInfo{ + background: material-color('blue', '300'); + button{ + color: material-color('blue', '900'); + } +} +.bgSuccess, div.bgSuccess{ + background: material-color('green', '300'); + button{ + color: material-color('green', '900'); + } +} +.bgWarning, div.bgWarning{ + background: material-color('orange', '300'); + button{ + color: material-color('orange', '900'); + } +} +.bgError, div.bgError{ + background: material-color('red', '300'); + button{ + color: material-color('red', '900'); + } +} +.bgDefault, div.bgDefault{ + background: material-color('grey', '700') +} + +// Fill Background Table Row +table tr{ + &.bgInfo{ + background: material-color('blue', '50') + } + &.bgSuccess{ + background: material-color('green', '50') + } + &.bgWarning{ + background: material-color('orange', '50') + } + &.bgError{ + background: material-color('red', '50') + } + &.bgDefault{ + background: #FFF + } +} + +// Icon Background +.messageInfo{ + @include theme(); + .icon{ + background: material-color('blue', '300') + } +} +.messageSuccess{ + @include theme(); + .icon{ + background: material-color('green', '300') + } +} +.messageWarning{ + @include theme(); + .icon{ + background: material-color('orange', '300') + } +} +.messageError{ + @include theme(); + .icon{ + background: material-color('red', '300') + } +} +.messageDefault{ + @include theme(); + .icon{ + background: material-color('grey', '300') + } +} diff --git a/front/odiparpack/app/styles/components/Progress.scss b/front/odiparpack/app/styles/components/Progress.scss new file mode 100644 index 0000000..fdc1757 --- /dev/null +++ b/front/odiparpack/app/styles/components/Progress.scss @@ -0,0 +1,18 @@ +@import "../../styles/mixins"; + +// Fill Background +.bgInfo div{ + background: material-color('blue', '300') +} +.bgSuccess div{ + background: material-color('green', '300') +} +.bgWarning div{ + background: material-color('orange', '300') +} +.bgError div{ + background: material-color('red', '300') +} +.bgDefault div{ + background: material-color('grey', '700') +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/Table.scss b/front/odiparpack/app/styles/components/Table.scss new file mode 100644 index 0000000..04209f0 --- /dev/null +++ b/front/odiparpack/app/styles/components/Table.scss @@ -0,0 +1,152 @@ +@import "../../styles/mixins"; + +.stripped{ + tbody tr:nth-child(even){ + background: material-color('grey', '100'); + } +} + +.hover{ + tbody tr:hover{ + background: material-color('grey', '200'); + } +} + +.bordered{ + thead tr{ + background: material-color('grey', '200'); + } + td, th{ + border: 1px solid material-color('grey', '300'); + } + tr td, tr th{ + &:first-child{ + border-left: none + } + &:last-child{ + border-right: none + } + } +} + +table.small{ + tr{ + height: 24px; + td, th{ + padding: 4px 10px; + font-size: 12px; + } + } +} + +table.medium{ + tr{ + height: 48px; + td, th{ + padding: 4px 56px 4px 24px; + font-size: 14px; + } + } +} + +table.big{ + tr{ + height: 64px; + td, th{ + padding: 8px 56px 8px 24px; + font-size: 18px; + } + } +} + +.nodata{ + text-align: center; + padding: 10px 10px 40px; + font-size: 14px; + line-height: 16px; + color: material-color('grey', '500'); + svg{ + position: relative; + top: 5px; + width: 22px; + margin: 0 6px; + fill: material-color('grey', '500'); + } +} + +.hideAction{ + display: none !important; +} + +.tableCrud{ + table-layout: fixed; + .hiddenField{ + opacity: 0; + position: absolute; + } + .editing{ + background: material-color('lime', '50'); + td .crudInput{ + &:before{ + opacity: 1; + } + > * { + &:before, &:after{ + opacity: 1; + } + } + svg, button { + visibility: visible; + } + input[type="text"], + input[type="number"], + input[type="email"]{ + width: 100%; + } + } + } + th{ + padding: 0 15px; + } + td{ + padding: 0 15px; + &.toggleCell{ + position: relative; + } + vertical-align: middle; + .coverReadonly{ + width: 100%; + height: 100%; + position: absolute; + z-index: 2; + display: none; + &.show{ + display: block; + } + } + .crudInput{ + &:before{ + opacity: 0; + } + color: material-color('grey', '900'); + > * > input { + color: material-color('grey', '900'); + &:before, &:after{ + opacity: 0; + } + } + svg, button { + visibility: hidden; + } + } + } + td [disabled], td[disabled]:hover{ + border: none !important; + box-shadow: none; + cursor: text; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: none; + } +} diff --git a/front/odiparpack/app/styles/components/TextEditor.scss b/front/odiparpack/app/styles/components/TextEditor.scss new file mode 100644 index 0000000..1110532 --- /dev/null +++ b/front/odiparpack/app/styles/components/TextEditor.scss @@ -0,0 +1,24 @@ +@import "../../styles/mixins"; + +.TextEditor{ + background: #fff; + min-height: 200px; + border: 1px solid material-color('grey', '300'); + padding: 0 10px; +} + +.ToolbarEditor{ + background: material-color('grey', '50'); + border: none; +} + +.textPreview{ + width: 100%; + resize: none; + height: 305px; + border-width: 1px; + border-style: solid; + border-color: material-color('grey', '300'); + border-image: initial; + padding: 5px; +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/Typography.scss b/front/odiparpack/app/styles/components/Typography.scss new file mode 100644 index 0000000..bf179e3 --- /dev/null +++ b/front/odiparpack/app/styles/components/Typography.scss @@ -0,0 +1,101 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:100,700,900'); +@import "../../styles/mixins"; + +// Font Weight +.lighter{ + font-weight: 100 +} +.light{ + font-weight: 300 +} +.regular{ + font-weight: 400 +} +.medium{ + font-weight: 500 +} +.bold{ + font-weight: 700 +} +.bolder{ + font-weight: 900 +} + +// Font stlye +.italic { + font-style: italic +} +.underline { + text-decoration: underline +} +.lineThrought { + text-decoration: line-through +} + +// Color +.textInfo{ + color: material-color('blue', '500') !important; +} +.textSuccess{ + color: material-color('green', '500') !important; +} +.textWarning{ + color: material-color('orange', '500') !important; +} +.textError{ + color: material-color('red', '500') !important; +} +.textGreyDark{ + color: material-color('blue-grey', '900') !important; +} +.textGrey{ + color: material-color('blue-grey', '400') !important; +} +.textGreyLight{ + color: material-color('blue-grey', '100') !important; +} + +// Transform +.capitalyze{ + text-transform: capitalize +} +.uppercase{ + text-transform: uppercase +} +.lowercase{ + text-transform: lowercase +} + +// Align +.textLeft{ + text-align: left +} +.textRight{ + text-align: right +} +.textCenter{ + text-align: center; +} +.textJustify{ + text-align: justify; +} + +// List +.list{ + list-style: disc; + margin-left: 20px; + ul { + list-style: circle; + margin-left: 20px; + } +} + +.orderedlist{ + list-style: decimal; + margin-left: 20px; + ul { + list-style: lower-alpha; + margin-left: 20px; + } +} + diff --git a/front/odiparpack/app/styles/components/vendors/emoji-picker-react/emoji-picker-react.css b/front/odiparpack/app/styles/components/vendors/emoji-picker-react/emoji-picker-react.css new file mode 100644 index 0000000..796ec48 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/emoji-picker-react/emoji-picker-react.css @@ -0,0 +1,625 @@ +.emoji-picker .icn-magnifier:before { + background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' xmlns='http://www.w3.org/2000/svg' width='310.4' height='310.4'%3E%3Cstyle%3E.st0%7Bfill:%239e9e9e%7D%3C/style%3E%3Cpath class='st0' d='M273.6 215c49.1-49.1 49.1-129 0-178.1-49.1-49.1-129-49.1-178.1 0-41.7 41.7-48 103.6-18.9 152 0 0 2.1 3.5-.7 6.3l-64.3 64.3c-12.8 12.8-15.8 30.7-4.5 42l2 2c11.3 11.3 29.2 8.3 42-4.5l64.1-64.1c3-3 6.4-.9 6.4-.9 48.4 28.9 110.3 22.6 152-19zm-154.9-23.3c-36.3-36.3-36.3-95.3 0-131.6s95.3-36.3 131.6 0 36.3 95.3 0 131.6-95.3 36.3-131.6 0z'/%3E%3Cpath class='st0' d='M126.8 118.4c-1.7 0-3.4-.3-5.1-1-6.6-2.8-9.7-10.4-6.9-17 17.6-41.6 65.7-61.1 107.3-43.5 6.6 2.8 9.7 10.4 6.9 17-2.8 6.6-10.4 9.7-17 6.9-28.4-12-61.2 1.3-73.2 29.7-2.2 4.9-7 7.9-12 7.9z'/%3E%3C/svg%3E"); +} + +.emoji-picker ul.skin-tones { + position: absolute; + right: 0; +} + +.emoji-picker ul.skin-tones.spread li { + opacity: 1; +} + +.emoji-picker ul.skin-tones li { + position: absolute; + top: 16px; + right: 20px; + z-index: 3; + padding: 1px; + border-radius: 3px; + opacity: 0; + transition: transform .4s, opacity .3s; +} + +.emoji-picker ul.skin-tones li.selected { + opacity: 1; + transform: scale(1.5); +} + +.emoji-picker ul.skin-tones li.neutral a { + background-color: #ffe082; +} + +.emoji-picker ul.skin-tones li.m1f3fb a { + background-color: #ffe0b2; +} + +.emoji-picker ul.skin-tones li.m1f3fc a { + background-color: #ffccbc; +} + +.emoji-picker ul.skin-tones li.m1f3fe a { + background-color: #795548; +} + +.emoji-picker ul.skin-tones li.m1f3ff a { + background-color: #5d4037; +} + +.emoji-picker ul.skin-tones li.m1f3fd a { + background-color: #ca7e55; +} + +.emoji-picker ul.skin-tones li a { + display: block; + height: 10px; + width: 10px; + border-radius: 2px; +} + +.emoji-picker ul.skin-tones li a img { + z-index: 2; + height: 10px; + width: 10px; +} + +.emoji-picker nav ~ .bar-wrapper { + margin-top: 45px; + border-top: 1px solid #eeeeee; +} + +.emoji-picker nav { + flex-direction: row; + min-height: 45px; + background-color: #ffffff; + display: flex; + justify-content: space-between; + position: absolute; + z-index: 1; + box-sizing: border-box; + left: 10px; + right: 10px; +} + +.emoji-picker nav a { + position: relative; + transition: filter .2s; +} + +.emoji-picker nav a:hover:after { + opacity: 1; + background-color: #a5d6a7; +} + +.emoji-picker nav a:hover i { + opacity: 1; +} + +.emoji-picker nav a i { + content: ''; + display: block; + height: 45px; + width: 20px; + background-size: 18px auto; + background-position: 50% 50%; + background-repeat: no-repeat; + opacity: .4; + transition: opacity .3s; + transition-delay: .2s; +} + +.emoji-picker nav a.people i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 33'%3E%3Cpath d='M16.5 33C7.402 33 0 25.598 0 16.5S7.402 0 16.5 0 33 7.402 33 16.5 25.598 33 16.5 33zm0-32C7.953 1 1 7.953 1 16.5S7.953 32 16.5 32 32 25.047 32 16.5 25.047 1 16.5 1z'/%3E%3Cpath d='M16.5 33a16.38 16.38 0 0 1-9.549-3.06.5.5 0 1 1 .116-.876c4.146-1.535 4.815-2.781 4.815-5.169 0-.631-.142-.838-.398-1.214-.339-.494-.803-1.171-1.129-2.939-.048-.254-.089-.274-.316-.384-.606-.292-1.163-.712-1.309-2.628 0-.928.32-1.441.585-1.708-.058-.33-.153-.899-.242-1.519-.453-2.777-.473-6.178 3.433-7.759 3.404-1.38 6.121-.626 6.974.273.604.019 2.162.177 3.246 1.438 1.668 1.94 1.137 6.363.955 7.562.266.261.589.767.589 1.675-.146 1.954-.703 2.375-1.31 2.666-.228.11-.269.129-.316.384-.326 1.768-.789 2.445-1.128 2.939-.257.375-.398.583-.398 1.214 0 2.388.669 3.634 4.815 5.169a.498.498 0 0 1 .116.876A16.38 16.38 0 0 1 16.5 33zm-8.183-3.349C10.779 31.191 13.589 32 16.5 32s5.721-.809 8.183-2.349c-3.474-1.426-4.565-2.864-4.565-5.755 0-.941.278-1.348.573-1.779.304-.444.682-.996.971-2.556.139-.754.576-.964.865-1.103.311-.149.631-.303.744-1.803-.001-.764-.344-.972-.358-.98a.533.533 0 0 1-.264-.537c.248-1.329.656-5.474-.681-7.031-.913-1.062-2.352-1.091-2.626-1.08-.046-.004-.091-.005-.134-.016-.13-.033-.35-.146-.417-.262-.272-.466-2.641-1.403-5.91-.08-3.231 1.308-3.238 4.112-2.819 6.682.138.957.289 1.784.29 1.788a.5.5 0 0 1-.283.544c.003 0-.339.209-.339 1.008.112 1.461.433 1.616.743 1.765.289.139.727.349.866 1.103.288 1.56.666 2.112.97 2.556.296.431.574.838.574 1.779 0 2.894-1.091 4.332-4.566 5.757z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.foods i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M337.502 61.244c-46.267-19.341-98.094-21.573-145.933-6.282-5.497 1.758-8.528 7.638-6.772 13.134 1.758 5.497 7.64 8.528 13.134 6.772 43.115-13.782 89.819-11.772 131.51 5.657 1.317.55 2.682.811 4.026.811 4.087 0 7.969-2.415 9.644-6.422 2.228-5.324-.284-11.445-5.609-13.67zM368.323 77.252a11.31 11.31 0 0 0-.375-.239c-4.925-3.009-11.356-1.458-14.364 3.467-2.984 4.884-1.483 11.249 3.346 14.29a10.398 10.398 0 0 0 5.587 1.626c3.377 0 6.69-1.633 8.704-4.654 3.201-4.801 1.904-11.289-2.898-14.49zM447.293 161.884c-4.081-4.08-10.698-4.08-14.778 0l-14.629 14.629c-4.08 4.081-4.08 10.698 0 14.778 2.04 2.041 4.715 3.06 7.388 3.06s5.349-1.02 7.389-3.06l14.629-14.629c4.081-4.081 4.081-10.698.001-14.778zM83.999 214.617c-4.081-4.08-10.698-4.08-14.778 0l-14.629 14.629c-4.08 4.081-4.08 10.698 0 14.778 2.04 2.041 4.715 3.06 7.388 3.06s5.349-1.02 7.39-3.06l14.629-14.629c4.081-4.082 4.081-10.698 0-14.778zM115.508 100.235c-4.081-4.08-10.698-4.08-14.778 0l-14.629 14.629c-4.08 4.081-4.08 10.698 0 14.778 2.04 2.041 4.715 3.06 7.388 3.06s5.348-1.02 7.39-3.06l14.629-14.629c4.081-4.081 4.081-10.698 0-14.778zM386.754 116.24h-20.688c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h20.688c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449zM151.326 161.908l-14.618-14.618c-4.081-4.08-10.698-4.081-14.778 0s-4.08 10.698 0 14.778l14.618 14.618a10.413 10.413 0 0 0 7.388 3.06c2.674 0 5.349-1.02 7.39-3.06 4.081-4.081 4.081-10.698 0-14.778zM411.753 229.241l-14.618-14.617c-4.08-4.081-10.696-4.08-14.777 0s-4.08 10.697 0 14.777l14.618 14.617c2.041 2.041 4.715 3.06 7.388 3.06s5.348-1.021 7.388-3.06c4.083-4.08 4.082-10.696.001-14.777zM318.326 126.607l-14.617-14.617c-4.081-4.08-10.698-4.081-14.778 0s-4.08 10.698 0 14.778l14.617 14.617a10.414 10.414 0 0 0 7.388 3.061 10.42 10.42 0 0 0 7.39-3.061c4.08-4.081 4.08-10.698 0-14.778zM195.194 97.387c-3.904-4.25-10.515-4.528-14.763-.622l-15.22 13.989c-4.249 3.905-4.527 10.515-.622 14.763a10.42 10.42 0 0 0 7.696 3.378c2.528 0 5.063-.911 7.068-2.756l15.22-13.989c4.248-3.905 4.526-10.515.621-14.763zM256.153 145.241H255.865c-5.762 0-10.437 4.665-10.449 10.429-.011 5.771 4.658 10.457 10.429 10.469H256.134c5.762 0 10.438-4.664 10.449-10.429.01-5.771-4.659-10.458-10.43-10.469z'/%3E%3Cpath d='M437.019 74.981C388.668 26.628 324.38 0 256 0S123.332 26.628 74.981 74.981C26.629 123.333 0 187.62 0 256c0 68.38 26.628 132.668 74.981 181.019C123.333 485.371 187.62 512 256 512c68.38 0 132.668-26.628 181.019-74.981C485.371 388.667 512 324.38 512 256s-26.628-132.668-74.981-181.019zM256 491.102c-94.256 0-175.718-55.763-213.173-136.024 6.781-.56 13.126-3.458 18.112-8.35 5.756-5.647 9.057-13.495 9.057-21.531v-9.364c0-7.449 6.027-13.624 13.435-13.767 3.561-.079 6.976 1.322 9.617 3.913 2.77 2.718 4.359 6.484 4.359 10.332v23.709c0 18.754 15.222 34.302 33.932 34.66.221.004.442.006.664.006 8.973 0 17.47-3.499 23.989-9.895 6.751-6.623 10.623-15.826 10.623-25.25v-18.215c20.172 27.524 52.723 45.432 89.384 45.432 52.209 0 96.09-36.312 107.73-85.007a10.027 10.027 0 0 1 2.18 6.23v25.773c0 19.673 15.968 35.984 35.596 36.361.233.004.464.006.696.006 9.409 0 18.321-3.671 25.161-10.38 7.086-6.951 11.149-16.61 11.149-26.5v-24.856c0-2.83 1.17-5.6 3.21-7.602 1.927-1.889 4.429-2.882 6.986-2.854 5.403.104 9.8 4.612 9.8 10.05v2.721c0 14.409 10.071 26.69 23.526 30.04C453.848 418.996 363.189 491.102 256 491.102zm223.405-200.399v-2.721c0-16.741-13.591-30.624-30.297-30.944-8.235-.159-16.057 2.978-22.022 8.829-6.021 5.906-9.473 14.113-9.473 22.52v24.856c0 4.314-1.782 8.536-4.886 11.582-2.97 2.912-6.846 4.462-10.82 4.397-8.326-.16-15.099-7.098-15.099-15.468v-25.773c0-13.154-8.392-24.538-20.091-28.971.027-1.001.043-2.004.043-3.011 0-46.06-29.007-87.788-72.182-103.836-5.411-2.01-11.425.745-13.434 6.154-2.01 5.409.745 11.424 6.154 13.434 35.027 13.021 58.562 46.877 58.562 84.248 0 49.549-40.312 89.861-89.861 89.861-49.549 0-89.861-40.312-89.861-89.861 0-37.372 23.535-71.228 58.565-84.246 5.409-2.01 8.164-8.026 6.154-13.434s-8.022-8.165-13.434-6.154C174.248 168.21 145.239 209.938 145.239 256a110.22 110.22 0 0 0 7.085 38.971 30.145 30.145 0 0 0-6.607 18.808v25.763c0 3.848-1.589 7.614-4.359 10.332-2.642 2.591-6.036 3.973-9.617 3.913-7.407-.142-13.434-6.317-13.434-13.766v-23.709c0-9.424-3.872-18.627-10.623-25.251-6.681-6.554-15.435-10.081-24.652-9.889-18.71.358-33.932 15.907-33.932 34.66v9.364c0 2.461-1.019 4.871-2.794 6.613-1.668 1.635-3.808 2.506-6.034 2.47-3.374-.065-6.387-2.139-7.733-5.21-7.543-23.011-11.64-47.569-11.64-73.07C20.898 126.365 126.365 20.898 256 20.898S491.102 126.365 491.102 256c0 15.182-1.464 30.026-4.227 44.414-4.281-1.138-7.47-5.083-7.47-9.711z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.nature i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 470'%3E%3Cpath d='M401.17 68.83C356.784 24.444 297.771 0 235 0S113.216 24.444 68.83 68.83 0 172.229 0 235s24.444 121.784 68.83 166.17S172.229 470 235 470s121.784-24.444 166.17-68.83S470 297.771 470 235s-24.444-121.784-68.83-166.17zM235 455c-121.309 0-220-98.691-220-220S113.691 15 235 15s220 98.691 220 220-98.691 220-220 220z'/%3E%3Cpath d='M382.5 173.979c3.532 0 6.735 1.824 8.568 4.879a7.499 7.499 0 0 0 12.864 0c1.833-3.055 5.036-4.879 8.568-4.879 4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5c-5.461 0-10.724 1.829-15 5.039-4.276-3.21-9.539-5.039-15-5.039-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5zM322.5 135.459c3.532 0 6.735 1.824 8.568 4.879a7.499 7.499 0 0 0 12.864 0c1.833-3.055 5.036-4.879 8.568-4.879 4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5c-5.461 0-10.724 1.829-15 5.039-4.276-3.21-9.539-5.039-15-5.039-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5zM117.5 173.979c3.532 0 6.735 1.824 8.568 4.879a7.499 7.499 0 0 0 12.864 0c1.833-3.055 5.036-4.879 8.568-4.879 4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5c-5.461 0-10.724 1.829-15 5.039-4.276-3.21-9.539-5.039-15-5.039-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5zM436.826 253.173a7.5 7.5 0 0 0-5.443-2.6c-12.664-.4-24.343-7.548-32.041-19.608a7.5 7.5 0 0 0-12.643-.001c-7.974 12.489-20.074 19.652-33.2 19.652-13.089 0-25.177-7.164-33.162-19.656a7.502 7.502 0 0 0-12.635-.004c-8 12.494-20.098 19.66-33.192 19.66-13.098 0-25.189-7.164-33.175-19.656a7.5 7.5 0 0 0-12.64.004c-7.974 12.489-20.069 19.652-33.187 19.652-13.098 0-25.19-7.164-33.176-19.656a7.502 7.502 0 0 0-12.635-.004c-8 12.494-20.098 19.66-33.191 19.66-13.099 0-25.19-7.164-33.175-19.655a7.5 7.5 0 0 0-12.64.004c-7.699 12.061-19.389 19.207-32.07 19.608a7.494 7.494 0 0 0-5.443 2.6 7.497 7.497 0 0 0-1.769 5.767c5.786 49.506 29.545 95.215 66.901 128.706C135.964 421.407 184.509 440 235 440c45.241 0 88.17-14.518 124.145-41.982a7.498 7.498 0 0 0 1.41-10.512 7.496 7.496 0 0 0-10.512-1.41C316.705 411.547 276.924 425 235 425c-93.882 0-173.276-68.424-187.68-160.366 11.265-2.217 21.561-8.215 29.707-17.284 10.49 11.584 24.673 18.267 39.476 18.267 14.808 0 29.002-6.691 39.505-18.291 10.493 11.6 24.685 18.291 39.498 18.291 14.828 0 29.022-6.689 39.511-18.284 10.493 11.595 24.682 18.284 39.491 18.284 14.808 0 29.002-6.691 39.505-18.291 10.493 11.6 24.679 18.291 39.485 18.291 14.826 0 29.018-6.681 39.505-18.264 8.14 9.065 18.422 15.061 29.671 17.278-6.044 38.177-24.008 74.246-51.068 102.269a7.5 7.5 0 1 0 10.791 10.419c31.08-32.185 51.038-74.226 56.198-118.38a7.495 7.495 0 0 0-1.769-5.766z'/%3E%3Cpath d='M289.513 310.616c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h10c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-10zM358.49 280.616h-10c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h10c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5zM111.503 280.616c-4.143 0-7.5 3.357-7.5 7.5s3.357 7.5 7.5 7.5h10c4.143 0 7.5-3.357 7.5-7.5s-3.357-7.5-7.5-7.5h-10zM235 191.25c30.327 0 55-24.673 55-55s-24.673-55-55-55-55 24.673-55 55 24.673 55 55 55zm0-95c22.056 0 40 17.944 40 40s-17.944 40-40 40-40-17.944-40-40 17.944-40 40-40z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.activity i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 0C14.355 0 0 14.355 0 32s14.355 32 32 32 32-14.355 32-32S49.645 0 32 0zm29.624 36.731l-3.885-6.439 2.681-7.88a29.867 29.867 0 0 1 1.204 14.319zm-7.558 15.567a.994.994 0 0 0-.408-.02L43.98 53.83a.993.993 0 0 0-.123-.345l-5.502-9.17 8.896-13.7h8.428a.992.992 0 0 0 .105.312l5.236 8.678a29.956 29.956 0 0 1-6.954 12.693zm-10.085 3.557l7.688-1.232a29.958 29.958 0 0 1-11.706 6.296l4.018-5.064zM12.65 9.1a29.858 29.858 0 0 1 18.628-7.082.982.982 0 0 0 .24.376l5.525 5.214-2.185 8.156-14.237 5.465c-.052-.042-.093-.094-.154-.126l-8.87-4.701L12.65 9.1zm25.736-2.976l-4.283-4.042a29.763 29.763 0 0 1 10.989 2.931l-6.706 1.111zM21.93 38.737l-.816-15.554L35.655 17.6l9.803 12.106-8.483 13.063-15.045-4.032zm37.375-19.141c-.031.054-.072.098-.093.159l-3.015 8.86h-9.048L36.882 15.937l2.113-7.887 8.27-1.371a.979.979 0 0 0 .453-.218 30.2 30.2 0 0 1 11.587 13.135zm-48.994-8.289l-.802 5.561-5.349 3.975a30.035 30.035 0 0 1 6.151-9.536zm-7.255 12.82c.044-.023.09-.037.131-.068l7.737-5.751 8.158 4.323.888 16.936c.002.025.013.048.016.073l-7.71 7.629c-.066.065-.105.145-.149.222L4.734 44.32c-.028-.012-.057-.009-.085-.018A29.822 29.822 0 0 1 2 32c0-2.725.372-5.362 1.056-7.873zm3.022 22.945l5.415 2.322 4.141 7.729a30.222 30.222 0 0 1-9.556-10.051zm12.759 11.879c-.019-.064-.025-.131-.058-.192l-5.317-9.924c.076-.043.155-.08.22-.145l8.027-7.942 14.507 3.888 5.927 9.879c.05.083.11.154.178.217l-5.449 6.867c-1.587.26-3.213.401-4.872.401-4.72 0-9.186-1.099-13.163-3.049z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.objects i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 58.153 58.153'%3E%3Cpath d='M40.076 29.153h-7.142a3.995 3.995 0 0 0-2.858-2.858V16.153a1 1 0 1 0-2 0v10.142c-1.72.447-3 1.999-3 3.858 0 2.206 1.794 4 4 4 1.858 0 3.411-1.28 3.858-3h7.142a1 1 0 1 0 0-2zm-11 3c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z'/%3E%3Cpath d='M50.188 9.764l4.096 4.096a1 1 0 0 0 1.414 0c3.167-3.166 3.167-8.319 0-11.485s-8.319-3.166-11.485 0a.997.997 0 0 0 0 1.414l4.561 4.561-1.699 1.699c-4.78-4.284-11.089-6.896-17.998-6.896s-13.218 2.612-17.998 6.896l-1.7-1.699 4.561-4.561a.997.997 0 0 0 0-1.414c-3.166-3.166-8.318-3.166-11.485 0s-3.167 8.319 0 11.485a1 1 0 0 0 1.414 0l4.096-4.096 1.676 1.676c-4.679 4.857-7.565 11.453-7.565 18.713 0 9.898 5.357 18.564 13.321 23.265l-3.028 3.028a.999.999 0 1 0 1.414 1.414l3.45-3.45c3.578 1.754 7.597 2.743 11.843 2.743s8.265-.989 11.843-2.743l3.45 3.45a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-3.028-3.028c7.964-4.701 13.321-13.367 13.321-23.265 0-7.26-2.886-13.856-7.565-18.713l1.677-1.676zm4.095-5.975c2.146 2.146 2.362 5.502.649 7.893L46.391 3.14a6.13 6.13 0 0 1 7.892.649zM3.22 11.681c-1.713-2.39-1.497-5.746.649-7.892s5.502-2.361 7.892-.649L3.22 11.681zm25.856 43.472c-13.785 0-25-11.215-25-25s11.215-25 25-25 25 11.215 25 25-11.214 25-25 25z'/%3E%3Cpath d='M29.076 10.032a1 1 0 0 0 1-1v-1a1 1 0 1 0-2 0v1a1 1 0 0 0 1 1zM29.076 50.032a1 1 0 0 0-1 1v1a1 1 0 1 0 2 0v-1a1 1 0 0 0-1-1zM50.076 31.032h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zM8.076 29.032h-1a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM43.926 13.768l-.707.707a.999.999 0 1 0 1.414 1.414l.707-.707a.999.999 0 1 0-1.414-1.414zM13.52 44.174l-.707.707a.999.999 0 1 0 1.414 1.414l.707-.707a.999.999 0 1 0-1.414-1.414zM44.633 44.174a.999.999 0 1 0-1.414 1.414l.707.707a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-.707-.707zM14.227 13.768a.999.999 0 1 0-1.414 1.414l.707.707a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-.707-.707z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.places i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 470 470'%3E%3Cpath d='M401.17 68.83C356.784 24.444 297.771 0 235 0S113.216 24.444 68.83 68.83C24.444 113.215 0 172.229 0 235s24.444 121.785 68.83 166.17C113.216 445.556 172.229 470 235 470s121.784-24.444 166.17-68.83C445.556 356.785 470 297.771 470 235s-24.444-121.785-68.83-166.17zM235 455c-121.309 0-220-98.691-220-220S113.691 15 235 15s220 98.691 220 220-98.691 220-220 220z'/%3E%3Ccircle cx='235' cy='97.5' r='7.5'/%3E%3Cpath d='M437.56 242.365a7.501 7.501 0 0 0-5.467-2.365h-26.046v-22.5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5V240H372.5v-52.5a7.5 7.5 0 0 0-3.525-6.36L292.5 133.343V97.5A7.5 7.5 0 0 0 285 90h-13.253C268.262 72.905 253.109 60 235 60s-33.262 12.905-36.747 30H185a7.5 7.5 0 0 0-7.5 7.5V130h-25v-22.5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5V130H105a7.5 7.5 0 0 0-7.5 7.5v102.499l-59.593-.01a7.504 7.504 0 0 0-7.487 7.969c3.523 56.171 29.666 105.984 69.187 140.798.281.291.587.556.911.799 23.389 20.362 51.39 35.496 82.128 43.638.307.102.622.184.946.246A204.258 204.258 0 0 0 235 440c17.409 0 34.679-2.229 51.386-6.558a7.297 7.297 0 0 0 1.002-.262 203.842 203.842 0 0 0 50.574-20.966c30.222-17.629 55.631-42.86 73.479-72.965a7.5 7.5 0 0 0-12.902-7.65 189.49 189.49 0 0 1-26.039 34.299V255h51.438a188.457 188.457 0 0 1-12.616 50.728 7.499 7.499 0 0 0 4.156 9.758 7.498 7.498 0 0 0 9.758-4.157 203.511 203.511 0 0 0 14.342-63.359 7.499 7.499 0 0 0-2.018-5.605zM192.5 175h85v215h-85V175zm0-70H205a7.5 7.5 0 0 0 7.5-7.5c0-12.407 10.094-22.5 22.5-22.5s22.5 10.093 22.5 22.5a7.5 7.5 0 0 0 7.5 7.5h12.5v55h-85v-55zM46.059 254.99l51.441.009V307.5c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5V145h65v245H175c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5h2.5v11.078c-24.056-7.668-46.091-20.018-65-35.997V337.5c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v28.458c-28.127-29.492-46.937-68.033-51.441-110.968zM192.5 420.179V405h85v15.106A187.644 187.644 0 0 1 235 425a189.427 189.427 0 0 1-42.5-4.821zm100-4.235V405h2.5c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-2.5V151.032l65 40.625v188.307a191.989 191.989 0 0 1-65 35.98z'/%3E%3Cpath d='M325 320a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM325 280a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM325 240a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM325 200a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM145 345a7.5 7.5 0 0 0 7.5-7.5v-10c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v10a7.5 7.5 0 0 0 7.5 7.5zM145 305a7.5 7.5 0 0 0 7.5-7.5v-10c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v10a7.5 7.5 0 0 0 7.5 7.5zM145 265a7.5 7.5 0 0 0 7.5-7.5v-10c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v10a7.5 7.5 0 0 0 7.5 7.5zM145 185a7.5 7.5 0 0 0 7.5-7.5v-10c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v10a7.5 7.5 0 0 0 7.5 7.5zM145 225a7.5 7.5 0 0 0 7.5-7.5v-10c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v10a7.5 7.5 0 0 0 7.5 7.5zM235 350a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM235 310a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM235 270a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM235 230a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM235 190a7.5 7.5 0 0 0-7.5 7.5v10c0 4.142 3.357 7.5 7.5 7.5s7.5-3.358 7.5-7.5v-10a7.5 7.5 0 0 0-7.5-7.5zM215 145h40c4.143 0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-40c-4.143 0-7.5 3.358-7.5 7.5s3.357 7.5 7.5 7.5z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.flags i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 502 502'%3E%3Cpath d='M428.484 73.516C381.076 26.108 318.044 0 251 0S120.924 26.108 73.516 73.516 0 183.956 0 251s26.108 130.076 73.516 177.484S183.956 502 251 502s130.076-26.108 177.484-73.516C475.892 381.076 502 318.044 502 251s-26.108-130.076-73.516-177.484zM283.829 39h58.868c58.354 25.338 104.274 74.079 125.849 134.317h-41.725a21.139 21.139 0 0 0-19.587 13.087 21.139 21.139 0 0 0 4.595 23.104l3.3 3.3c4.638 4.637 4.638 12.184 0 16.821a11.42 11.42 0 0 1-8.13 3.368 11.422 11.422 0 0 1-8.13-3.368l-7.969-7.969c-13.135-13.135-30.599-20.369-49.175-20.369h-6.397v-8.036c0-19.265-7.502-37.376-21.124-50.999l-9.952-9.952c-10.216-10.216-23.799-15.843-38.247-15.843h-19.931c-7.721 0-14.98 3.007-20.439 8.466l-5.17 5.169c-5.459 5.459-8.466 12.718-8.466 20.439a4.736 4.736 0 0 1-4.73 4.73h-8.66v-12.154c0-8.648 3.368-16.78 9.483-22.895l5.849-5.849c5.244-5.243 8.131-12.214 8.131-19.629V92.71c0-.394.32-.713.713-.713H320.5c12.407 0 22.5-10.093 22.5-22.5S332.907 47 320.5 47h-36.671c-2.206 0-4-1.794-4-4s1.794-4 4-4zm74.893 252.437l-5.452 5.484a155.066 155.066 0 0 0-22.913 29.41l-9.918 16.5-12.403 20.492a48.673 48.673 0 0 0-7.036 25.21v.615a.857.857 0 0 1-.856.856h-.004a8.78 8.78 0 0 1-6.247-2.586 8.776 8.776 0 0 1-2.589-6.25c0-12.58-4.899-24.407-13.794-33.303l-4.591-4.591c-6.947-6.947-10.773-16.183-10.773-26.007v-29.475c0-14.806-12.045-26.851-26.852-26.851H231.8c-8.349 0-15.142-6.792-15.142-15.142v-15.343c0-9.034 7.35-16.384 16.384-16.384h79.886l24.099 24.1c6.003 6.003 9.309 13.984 9.309 22.473v11.464c0 8.56 5.082 15.955 12.386 19.328zM20 251c0-9.444.583-18.752 1.69-27.902h30.619c10.153 0 19.698 3.954 26.876 11.133l8.781 8.78c7.527 7.527 17.534 11.672 28.179 11.672 5.65 0 10.962 2.2 14.957 6.195l.193.193c7.233 7.233 11.217 16.851 11.217 27.081v17.886c0 13.63-5.308 26.444-14.945 36.082l-19.15 19.15c-13.442 13.443-21.939 30.512-24.58 49.002C44.303 368.799 20 312.684 20 251zm231 231c-56.288 0-107.93-20.247-148.049-53.827v-5.423c0-17.881 6.963-34.693 19.607-47.337l19.15-19.15c13.415-13.416 20.803-31.252 20.803-50.224v-17.886c0-15.573-6.064-30.213-17.075-41.224l-.193-.192c-7.772-7.772-18.106-12.053-29.099-12.053a19.72 19.72 0 0 1-14.036-5.814l-8.781-8.781c-10.957-10.956-25.524-16.99-41.019-16.99h-27.3C47.126 98.635 140.047 20 251 20c7.743 0 15.396.39 22.946 1.138-8.316 3.774-14.117 12.151-14.117 21.862 0 13.234 10.766 24 24 24H320.5c1.378 0 2.5 1.122 2.5 2.5s-1.122 2.5-2.5 2.5h-97.713c-11.421 0-20.713 9.292-20.713 20.713v2.028a7.706 7.706 0 0 1-2.273 5.486l-5.85 5.85c-9.893 9.893-15.341 23.047-15.341 37.037v13.574c0 10.245 8.334 18.58 18.579 18.58h10.081c13.636 0 24.73-11.094 24.73-24.73 0-2.379.926-4.615 2.608-6.297l5.169-5.169c.203-.203.414-.393.632-.574.167.195.334.389.518.574l19.932 19.932c-3.833 3.911-3.813 10.186.068 14.068 1.953 1.953 4.512 2.929 7.071 2.929s5.119-.976 7.071-2.929l7-7c3.905-3.905 3.905-10.237 0-14.143l-15.45-15.45c8.875.156 17.197 3.677 23.489 9.97l9.953 9.952c9.844 9.844 15.266 22.934 15.266 36.856v.817H233.04c-20.062 0-36.384 16.322-36.384 36.384V245.8c0 19.377 15.765 35.142 35.142 35.142h3.493a6.86 6.86 0 0 1 6.852 6.851v29.475c0 15.167 5.906 29.425 16.63 40.15l4.591 4.591c5.118 5.118 7.937 11.923 7.937 19.161 0 7.705 3.001 14.948 8.451 20.396 5.446 5.443 12.685 8.44 20.384 8.44h.015C311.648 410 321 400.644 321 389.149v-.614a28.68 28.68 0 0 1 4.146-14.854l12.409-20.502a.226.226 0 0 1 .016-.026l9.928-16.517a135.064 135.064 0 0 1 19.955-25.613l11.147-11.213c4.428-4.455 5.731-11.08 3.319-16.879s-8.029-9.546-14.31-9.546a1.274 1.274 0 0 1-1.273-1.273v-11.464c0-13.832-5.386-26.835-15.167-36.616l-2.215-2.215c10.49 1.524 20.173 6.357 27.804 13.988l7.969 7.969c6.141 6.141 14.207 9.211 22.272 9.211s16.132-3.07 22.272-9.211c6.024-6.024 9.341-14.033 9.341-22.553 0-8.519-3.317-16.528-9.341-22.553l-3.3-3.3c-.198-.198-.567-.567-.26-1.308.307-.741.829-.741 1.109-.741h47.888C479.468 211.761 482 231.09 482 251c0 127.374-103.626 231-231 231z'/%3E%3Cpath d='M184 85c5.523 0 10-4.477 10-10V54.494c0-5.523-4.477-10-10-10s-10 4.477-10 10V75c0 5.523 4.477 10 10 10zM450.39 314.63c-5.176-1.93-10.935.702-12.863 5.877C408.652 397.961 333.692 450 251 450c-5.523 0-10 4.477-10 10s4.477 10 10 10c45.543 0 89.207-13.849 126.272-40.048 36.24-25.617 63.556-61.046 78.995-102.458 1.929-5.175-.702-10.934-5.877-12.864zM202.433 444.034a198.232 198.232 0 0 1-28.554-9.526c-5.092-2.144-10.954.249-13.096 5.339-2.142 5.09.249 10.954 5.339 13.096a218.202 218.202 0 0 0 31.445 10.491c.817.205 1.635.303 2.44.303 4.478 0 8.554-3.03 9.692-7.57 1.344-5.358-1.909-10.79-7.266-12.133z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a.symbols i { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 490.4 490.4'%3E%3Cpath d='M229 381.2c4.4 4.4 10.1 6.8 16.3 6.8 6.2 0 12-2.4 16.3-6.8l96.3-96.3c15.7-15.7 24.4-36.6 24.4-58.7 0-22.2-8.6-43.1-24.3-58.8-15.7-15.7-36.6-24.3-58.7-24.3-20 0-38.9 7-54 19.9-15.1-13-34.1-20-54.1-20-22.2 0-43 8.6-58.7 24.3s-24.3 36.6-24.3 58.8 8.7 43 24.4 58.7l96.4 96.4zm-79.3-196.7c11.1-11.1 25.7-17.1 41.4-17.1s30.4 6.1 41.5 17.2l4 4c4.8 4.8 12.5 4.8 17.3 0l3.9-3.9c11.1-11.1 25.8-17.2 41.5-17.2 15.6 0 30.3 6.1 41.4 17.2 11.1 11.1 17.2 25.8 17.1 41.4 0 15.7-6.1 30.4-17.2 41.5l-95.3 95.3-95.5-95.5c-11.1-11.1-17.2-25.8-17.2-41.4 0-15.7 6.1-30.4 17.1-41.5z'/%3E%3Cpath d='M245.2 490.4c135.2 0 245.2-110 245.2-245.2S380.4 0 245.2 0 0 110 0 245.2s110 245.2 245.2 245.2zm0-465.9c121.7 0 220.7 99 220.7 220.7s-99 220.7-220.7 220.7-220.7-99-220.7-220.7 99-220.7 220.7-220.7z'/%3E%3C/svg%3E"); +} + +.emoji-picker nav a:after { + content: ''; + position: absolute; + bottom: 0; + width: 100%; + left: 0; + height: 2px; + border-radius: 5px; + background-color: #90caf9; + opacity: 0; + transition-delay: 1s; + transition: opacity .4s, background .2s; +} + +.emoji-picker.people nav .people i { + opacity: 1; +} + +.emoji-picker.people nav .people:after { + opacity: 1; +} + +.emoji-picker.foods nav .foods i { + opacity: 1; +} + +.emoji-picker.foods nav .foods:after { + opacity: 1; +} + +.emoji-picker.nature nav .nature i { + opacity: 1; +} + +.emoji-picker.nature nav .nature:after { + opacity: 1; +} + +.emoji-picker.activity nav .activity i { + opacity: 1; +} + +.emoji-picker.activity nav .activity:after { + opacity: 1; +} + +.emoji-picker.objects nav .objects i { + opacity: 1; +} + +.emoji-picker.objects nav .objects:after { + opacity: 1; +} + +.emoji-picker.places nav .places i { + opacity: 1; +} + +.emoji-picker.places nav .places:after { + opacity: 1; +} + +.emoji-picker.flags nav .flags i { + opacity: 1; +} + +.emoji-picker.flags nav .flags:after { + opacity: 1; +} + +.emoji-picker.symbols nav .symbols i { + opacity: 1; +} + +.emoji-picker.symbols nav .symbols:after { + opacity: 1; +} + +.emoji-picker .diversity-picker { + background-color: #fafafa; + display: flex; + justify-content: space-around; + flex-direction: row-reverse; + position: absolute; + z-index: 3; + left: 0; + top: 0; + right: 0; + height: 30px; + transform: translateY(-30px); + opacity: .6; + transition: .2s opacity, .2s transform; +} + +.emoji-picker .diversity-picker.shown { + transform: translateY(0); + opacity: 1; + border-bottom: 1px solid #eeeeee; +} + +.emoji-picker .diversity-picker .emoji { + display: inline-block; +} + +.emoji-picker .emoji { + border-radius: 5px; + height: 32px; + width: 32px; + padding: 5px; + background-size: 20px; + background-repeat: no-repeat; + background-position: 50% 50%; + overflow: hidden; + transition: background-color .2s; + display: none; +} + +.emoji-picker .emoji.shown { + display: inline-block; +} + +.emoji-picker .emoji:hover { + background-color: #bbdefb; +} + +.emoji-picker .emoji:hover.has-diversities:before { + opacity: 1; +} + +.emoji-picker .emoji.has-diversities:before { + content: ''; + background-color: #f5f5f5; + display: block; + height: 8px; + width: 8px; + float: right; + opacity: 0; + transform: translateY(-6px) translateX(6px); + transition: opacity .2s; +} + +.emoji-picker .emoji-category { + position: relative; + padding: 30px 5px 0 5px; + margin: 0; + text-align: left; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; +} + +.emoji-picker .emoji-category .category-name { + background-color: rgba(255, 255, 255, 0.9); + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 0; + display: block; + padding: 0 10px; + font-size: 12px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: #bdbdbd; + height: 30px; + line-height: 30px; + box-sizing: border-box; + transition: color .2s; +} + +.emoji-picker.people .people.emoji-category { + position: initial; +} + +.emoji-picker.people .people.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.foods .foods.emoji-category { + position: initial; +} + +.emoji-picker.foods .foods.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.nature .nature.emoji-category { + position: initial; +} + +.emoji-picker.nature .nature.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.activity .activity.emoji-category { + position: initial; +} + +.emoji-picker.activity .activity.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.objects .objects.emoji-category { + position: initial; +} + +.emoji-picker.objects .objects.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.places .places.emoji-category { + position: initial; +} + +.emoji-picker.places .places.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.flags .flags.emoji-category { + position: initial; +} + +.emoji-picker.flags .flags.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.regional .regional.emoji-category { + position: initial; +} + +.emoji-picker.regional .regional.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker.symbols .symbols.emoji-category { + position: initial; +} + +.emoji-picker.symbols .symbols.emoji-category .category-name { + color: #9e9e9e; +} + +.emoji-picker .emoji-list { + width: 100%; + height: 240px; + padding: 0; + overflow-x: hidden; + box-sizing: border-box; + -ms-overflow-style: none; +} + +.emoji-picker .emoji-list::-webkit-scrollbar { + height: 0; + width: 0; +} + +.emoji-picker .emoji-list::scrollbar { + height: 0; + width: 0; +} + +.emoji-picker .emoji-list.filter:before { + content: ''; + background: #ffffff; + position: absolute; + left: 0; + right: 0; + top: 0; + height: 30px; + z-index: 1; + opacity: 0.9; +} + +.emoji-picker .emoji-list.filter .category-name { + background: none; + z-index: 1; +} + +.emoji-picker .emoji-list:not(.filter) .emoji-category { + min-height: 100%; +} + +.emoji-picker .wrapper { + position: relative; + overflow: hidden; +} + +.emoji-picker .wrapper.no-results:before { + content: ''; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' xmlns='http://www.w3.org/2000/svg' width='310.4' height='310.4'%3E%3Cstyle%3E.st0%7Bfill:%239e9e9e%7D%3C/style%3E%3Cpath class='st0' d='M273.6 215c49.1-49.1 49.1-129 0-178.1-49.1-49.1-129-49.1-178.1 0-41.7 41.7-48 103.6-18.9 152 0 0 2.1 3.5-.7 6.3l-64.3 64.3c-12.8 12.8-15.8 30.7-4.5 42l2 2c11.3 11.3 29.2 8.3 42-4.5l64.1-64.1c3-3 6.4-.9 6.4-.9 48.4 28.9 110.3 22.6 152-19zm-154.9-23.3c-36.3-36.3-36.3-95.3 0-131.6s95.3-36.3 131.6 0 36.3 95.3 0 131.6-95.3 36.3-131.6 0z'/%3E%3Cpath class='st0' d='M126.8 118.4c-1.7 0-3.4-.3-5.1-1-6.6-2.8-9.7-10.4-6.9-17 17.6-41.6 65.7-61.1 107.3-43.5 6.6 2.8 9.7 10.4 6.9 17-2.8 6.6-10.4 9.7-17 6.9-28.4-12-61.2 1.3-73.2 29.7-2.2 4.9-7 7.9-12 7.9z'/%3E%3C/svg%3E"); + background-position: 50% 50%; + background-size: 100px 100px; + display: block; + width: 100px; + height: 100px; + position: absolute; + top: 50%; + left: 50%; + opacity: .07; + transform: translateX(-50%) translateY(-50%); +} + +.emoji-picker .wrapper.no-results .emoji-name { + display: none; +} + +.emoji-picker .wrapper:after { + content: ''; + background-color: #ffffff; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 5px; +} + +.emoji-picker .wrapper .scroller { + display: block; + position: absolute; + width: 5px; + padding-top: 5px; + z-index: 2; + right: 3px; + box-sizing: border-box; + opacity: 0; + transition: opacity .2s; +} + +.emoji-picker .wrapper .scroller.shown { + opacity: 1; +} + +.emoji-picker .wrapper .scroller div { + background-color: #bdbdbd; + width: 100%; + min-height: 12px; +} + +.emoji-picker .wrapper .emoji-name { + position: absolute; + right: 10px; + top: 8px; + font-size: 10px; + font-weight: 100; + z-index: 2; + color: #9e9e9e; + max-width: 130px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.emoji-picker .search-bar { + height: 45px; + margin-top: 0; + padding: 10px; + position: relative; + z-index: 2; + left: 0; + box-sizing: border-box; +} + +.emoji-picker .search-bar input { + padding: 5px 5px 5px 35px; + margin: 0; + box-sizing: border-box; + color: #9e9e9e; + width: 100%; + outline: none; + border: 1px solid #eeeeee; + border-radius: 5px; + transition: border .2s; +} + +.emoji-picker .search-bar input::placeholder { + color: #e0e0e0; +} + +.emoji-picker .search-bar input:focus { + border: 1px solid #e0e0e0; +} + +.emoji-picker .search-bar input:focus + i:before { + opacity: 1; +} + +.emoji-picker .search-bar i:before { + content: ''; + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3Csvg id='Capa_1' xmlns='http://www.w3.org/2000/svg' width='310.4' height='310.4'%3E%3Cstyle%3E.st0%7Bfill:%239e9e9e%7D%3C/style%3E%3Cpath class='st0' d='M273.6 215c49.1-49.1 49.1-129 0-178.1-49.1-49.1-129-49.1-178.1 0-41.7 41.7-48 103.6-18.9 152 0 0 2.1 3.5-.7 6.3l-64.3 64.3c-12.8 12.8-15.8 30.7-4.5 42l2 2c11.3 11.3 29.2 8.3 42-4.5l64.1-64.1c3-3 6.4-.9 6.4-.9 48.4 28.9 110.3 22.6 152-19zm-154.9-23.3c-36.3-36.3-36.3-95.3 0-131.6s95.3-36.3 131.6 0 36.3 95.3 0 131.6-95.3 36.3-131.6 0z'/%3E%3Cpath class='st0' d='M126.8 118.4c-1.7 0-3.4-.3-5.1-1-6.6-2.8-9.7-10.4-6.9-17 17.6-41.6 65.7-61.1 107.3-43.5 6.6 2.8 9.7 10.4 6.9 17-2.8 6.6-10.4 9.7-17 6.9-28.4-12-61.2 1.3-73.2 29.7-2.2 4.9-7 7.9-12 7.9z'/%3E%3C/svg%3E"); + background-position: 50% 50%; + background-size: 15px 15px; + height: 15px; + width: 15px; + position: absolute; + left: 20px; + top: 15px; + display: block; + opacity: .3; + transition: opacity .2s; +} + +.emoji-picker { + background-color: #ffffff; + width: 285px; + display: block; + position: relative; + padding: 0; + border: 1px solid #eeeeee; + border-radius: 3px; + overflow: hidden; + font-family: sans-serif; +} + +.emoji-picker .hidden { + display: none !important; + visibility: hidden !important; + padding: 0 !important; + margin: 0 !important; +} + +.emoji-picker a { + outline: none; +} + +.emoji-picker ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +.emoji-picker ul li { + display: inline-block; +} + +.emoji-picker .bar-wrapper { + position: relative; +} + +.emoji-text-field { + height: 100%; + position: relative; + flex: 1; +} + +.emoji-text-field input, +.emoji-text-field textarea { + width: 100%; + height: 100%; + margin: 0; + padding: 2px 20px 2px 2px; + box-sizing: border-box; + border: none; + box-shadow: none !important; + outline: none !important; +} + +.emoji-text-field.picker-hidden .emoji-picker { + display: none; + opacity: 0; + visibility: none; +} + +.emoji-text-field .emoji-picker { + position: absolute; + z-index: 1; + right: 0; + bottom: 30px; +} + +.emoji-text-field .emoji-trigger { + background-size: 16px 16px; + position: absolute; + z-index: 1; + bottom: 3px; + right: 5px; + opacity: .2; + transition: opacity .3s; +} diff --git a/front/odiparpack/app/styles/components/vendors/image-lightbox/image-lightbox.css b/front/odiparpack/app/styles/components/vendors/image-lightbox/image-lightbox.css new file mode 100644 index 0000000..9c4dfa3 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/image-lightbox/image-lightbox.css @@ -0,0 +1,344 @@ +@keyframes closeWindow { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} + +.ril__outer { + background-color: rgba(0, 0, 0, 0.85); + outline: none; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + width: 100%; + height: 100%; + -ms-content-zooming: none; + -ms-user-select: none; + -ms-touch-select: none; + touch-action: none; +} + +.ril__outerClosing { + opacity: 0; +} + +.ril__inner { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.ril__image, +.ril__imagePrev, +.ril__imageNext { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + margin: auto; + max-width: none; + -ms-content-zooming: none; + -ms-user-select: none; + -ms-touch-select: none; + touch-action: none; +} + +.ril__imageDiscourager { + background-repeat: no-repeat; + background-position: center; + background-size: contain; +} + +.ril__navButtons { + border: none; + position: absolute; + top: 0; + bottom: 0; + width: 20px; + height: 34px; + padding: 40px 30px; + margin: auto; + cursor: pointer; + opacity: 0.7; +} +.ril__navButtons:hover { + opacity: 1; +} +.ril__navButtons:active { + opacity: 0.7; +} + +.ril__navButtonPrev { + left: 0; + background: rgba(0, 0, 0, 0.2) + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') + no-repeat center; +} + +.ril__navButtonNext { + right: 0; + background: rgba(0, 0, 0, 0.2) + url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+') + no-repeat center; +} + +.ril__downloadBlocker { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); + background-size: cover; +} + +.ril__caption, +.ril__toolbar { + background-color: rgba(0, 0, 0, 0.5); + position: absolute; + left: 0; + right: 0; + display: flex; + justify-content: space-between; +} + +.ril__caption { + bottom: 0; + max-height: 150px; + overflow: auto; +} + +.ril__captionContent { + padding: 10px 20px; + color: #fff; +} + +.ril__toolbar { + top: 0; + height: 50px; +} + +.ril__toolbarSide { + height: 50px; + margin: 0; +} + +.ril__toolbarLeftSide { + padding-left: 20px; + padding-right: 0; + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; +} + +.ril__toolbarRightSide { + padding-left: 0; + padding-right: 20px; + flex: 0 0 auto; +} + +.ril__toolbarItem { + display: inline-block; + line-height: 50px; + padding: 0; + color: #fff; + font-size: 120%; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ril__toolbarItemChild { + vertical-align: middle; +} + +.ril__builtinButton { + width: 40px; + height: 35px; + cursor: pointer; + border: none; + opacity: 0.7; +} +.ril__builtinButton:hover { + opacity: 1; +} +.ril__builtinButton:active { + outline: none; +} + +.ril__builtinButtonDisabled { + cursor: default; + opacity: 0.5; +} +.ril__builtinButtonDisabled:hover { + opacity: 0.5; +} + +.ril__closeButton { + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=') + no-repeat center; +} + +.ril__zoomInButton { + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') + no-repeat center; +} + +.ril__zoomOutButton { + background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') + no-repeat center; +} + +.ril__outerAnimating { + animation-name: closeWindow; +} + +@keyframes pointFade { + 0%, + 19.999%, + 100% { + opacity: 0; + } + 20% { + opacity: 1; + } +} + +.ril__loadingCircle { + width: 60px; + height: 60px; + position: relative; +} + +.ril__loadingCirclePoint { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} +.ril__loadingCirclePoint::before { + content: ''; + display: block; + margin: 0 auto; + width: 11%; + height: 30%; + background-color: #fff; + border-radius: 30%; + animation: pointFade 800ms infinite ease-in-out both; +} +.ril__loadingCirclePoint:nth-of-type(1) { + transform: rotate(0deg); +} +.ril__loadingCirclePoint:nth-of-type(7) { + transform: rotate(180deg); +} +.ril__loadingCirclePoint:nth-of-type(1)::before, +.ril__loadingCirclePoint:nth-of-type(7)::before { + animation-delay: -800ms; +} +.ril__loadingCirclePoint:nth-of-type(2) { + transform: rotate(30deg); +} +.ril__loadingCirclePoint:nth-of-type(8) { + transform: rotate(210deg); +} +.ril__loadingCirclePoint:nth-of-type(2)::before, +.ril__loadingCirclePoint:nth-of-type(8)::before { + animation-delay: -666ms; +} +.ril__loadingCirclePoint:nth-of-type(3) { + transform: rotate(60deg); +} +.ril__loadingCirclePoint:nth-of-type(9) { + transform: rotate(240deg); +} +.ril__loadingCirclePoint:nth-of-type(3)::before, +.ril__loadingCirclePoint:nth-of-type(9)::before { + animation-delay: -533ms; +} +.ril__loadingCirclePoint:nth-of-type(4) { + transform: rotate(90deg); +} +.ril__loadingCirclePoint:nth-of-type(10) { + transform: rotate(270deg); +} +.ril__loadingCirclePoint:nth-of-type(4)::before, +.ril__loadingCirclePoint:nth-of-type(10)::before { + animation-delay: -400ms; +} +.ril__loadingCirclePoint:nth-of-type(5) { + transform: rotate(120deg); +} +.ril__loadingCirclePoint:nth-of-type(11) { + transform: rotate(300deg); +} +.ril__loadingCirclePoint:nth-of-type(5)::before, +.ril__loadingCirclePoint:nth-of-type(11)::before { + animation-delay: -266ms; +} +.ril__loadingCirclePoint:nth-of-type(6) { + transform: rotate(150deg); +} +.ril__loadingCirclePoint:nth-of-type(12) { + transform: rotate(330deg); +} +.ril__loadingCirclePoint:nth-of-type(6)::before, +.ril__loadingCirclePoint:nth-of-type(12)::before { + animation-delay: -133ms; +} +.ril__loadingCirclePoint:nth-of-type(7) { + transform: rotate(180deg); +} +.ril__loadingCirclePoint:nth-of-type(13) { + transform: rotate(360deg); +} +.ril__loadingCirclePoint:nth-of-type(7)::before, +.ril__loadingCirclePoint:nth-of-type(13)::before { + animation-delay: 0ms; +} + +.ril__loadingContainer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} +.ril__imagePrev .ril__loadingContainer, +.ril__imageNext .ril__loadingContainer { + display: none; +} + +.ril__errorContainer { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; + color: #fff; +} +.ril__imagePrev .ril__errorContainer, +.ril__imageNext .ril__errorContainer { + display: none; +} + +.ril__loadingContainer__icon { + color: #fff; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} diff --git a/front/odiparpack/app/styles/components/vendors/react-animated-slider/react-animated-slider.css b/front/odiparpack/app/styles/components/vendors/react-animated-slider/react-animated-slider.css new file mode 100644 index 0000000..135da22 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-animated-slider/react-animated-slider.css @@ -0,0 +1,373 @@ +.slider { + position: relative; + width: 100%; + height: 400px; + overflow: hidden +} + +.slider a.previousButton, .slider a.nextButton { + font-size: 22px; + line-height: 0; + display: block; + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: all .3s linear; + transition: all .3s linear; + z-index: 1; + color: #333; + padding: 10px; + text-decoration: none; + -webkit-backface-visibility: hidden; + backface-visibility: hidden + /* prevent jump effect when scaling */ +} + +.slider a.previousButton:not(.disabled):hover, .slider a.nextButton:not(.disabled):hover { + -webkit-transform: translateY(-50%) scale(1.25); + transform: translateY(-50%) scale(1.25); + cursor: pointer; +} + +.slider a.previousButton { + left: 20px; +} + +.slider a.nextButton { + right: 20px; +} + +.slide { + width: 100%; + height: 100%; + position: absolute; + overflow: hidden +} + +.slide.hidden { + visibility: hidden; +} + +.slide.previous { + left: -100%; +} + +.slide.current { + left: 0; +} + +.slide.next { + left: 100%; +} + +.slide.animateIn, + .slide.animateOut { + -webkit-transition: all 2s ease; + transition: all 2s ease; +} + +.slide.animateIn.previous, + .slide.animateIn.next { + left: 0; + visibility: visible; +} + +.slide.animateOut.previous { + left: 100%; +} + +.slide.animateOut.next { + left: -100%; +} + +.slide h1, .slide h3 { + transition: all 0.3s ease; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + opacity: 0; +} + +.slide button { + transition: all 0.3s ease; + -webkit-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; +} + +.slide p { + transition: all 0.3s ease; + -webkit-transform: translateY(20px); + transform: translateY(20px); + opacity: 0; +} + +.slide section * { + transition: all 0.3s ease; +} + +.slide section img { + -webkit-transform: translateX(-10px); + transform: translateX(-10px); + opacity: 0; +} + +.slide section span { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + opacity: 0; +} + +.slide section span strong { + -webkit-transform: translateY(10px); + transform: translateY(10px); + opacity: 0; + font-weight: 500 +} + +.slide.animateIn.previous h1, +.slide.animateIn.previous h3, +.slide.current h1, +.slide.current h3, +.slide.animateIn.next h1, +.slide.animateIn.next h3, +.slide.animateIn.previous button, +.slide.current button, +.slide.animateIn.next button, +.slide.animateIn.previous p, +.slide.current p, +.slide.animateIn.next p, +.slide.animateIn.previous section *, +.slide.current section *, +.slide.animateIn.next section * { + -webkit-transform: translateX(0); + transform: translateX(0); + -webkit-transition-delay: .9s; + transition-delay: .9s; + opacity: 1; +} + +.slide.animateIn.previous p, +.slide.animateIn.next p { + -webkit-transition-delay: 1.1s; + transition-delay: 1.1s; +} + +.slide.animateIn.previous button, +.slide.animateIn.next button { + -webkit-transition-delay: 1.3s; + transition-delay: 1.3s; +} + +.slide.animateIn.previous section img, +.slide.animateIn.next section img { + -webkit-transition-delay: 1.3s; + transition-delay: 1.3s; +} + +.slide.animateIn.previous section span, +.slide.animateIn.next section span { + -webkit-transition-delay: 1.4s; + transition-delay: 1.4s; +} + +.slide.animateIn.previous section span strong, +.slide.animateIn.next section span strong { + -webkit-transition-delay: 1.5s; + transition-delay: 1.5s; +} + +.slide.animateOut h1 { + -webkit-transition-delay: .3s; + transition-delay: .3s; +} + +.slide.animateOut p { + -webkit-transition-delay: .2s; + transition-delay: .2s; +} + +.slide.animateOut section span { + -webkit-transition-delay: .1s; + transition-delay: .1s; +} + +.slide.animateOut section span strong { + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.slide { + height: 70vh; + background-size: cover !important; +} + +.slide::before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.9))); + background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); + bottom: 0; + left: 0; +} + +.previousButton, +.nextButton { + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 10; + width: 32px; + height: 32px; + transition: all .3s ease; + cursor: pointer; + text-align: center; +} + +.previousButton svg polygon, +.nextButton svg polygon { + fill: #fff; + opacity: .5; +} + +.previousButton { + left: 10px; +} + +.previousButton:hover { + left: 5px; +} + +.nextButton { + right: 10px; +} + +.nextButton:hover { + right: 5px; +} + +.slider-content { + text-align: center; +} + +.slider-content .inner { + padding: 0 70px; + box-sizing: border-box; + position: absolute; + width: 100%; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.slider-content .inner button { + -webkit-transition-delay: 0s; + transition-delay: 0s; +} + +.slider-content .inner h1, +.slider-content .inner h3 { + margin-left: auto; + margin-right: auto; + max-width: 840px; + color: #FFFFFF; + font-size: 64px; + line-height: 1; +} + +.slider-content .inner p { + color: #FFFFFF; + font-size: 14px; + line-height: 1.5; + margin: 20px auto 30px; + max-width: 640px; +} + +.slider-content section { + position: absolute; + bottom: 20px; + left: 20px; +} + +.slider-content section span { + color: #FFFFFF; +} + +.slider-content section span { + color: rgba(255, 255, 255, 0.5); + font-size: 12px; + display: inline-block; + text-align: left; + line-height: 1.4; + vertical-align: middle; + margin-left: 10px; +} + +.slider-content section img { + width: 40px; + height: 40px; + border: solid 2px rgba(255, 255, 255, 0.5); + border-radius: 100%; + vertical-align: middle; +} + +.slider-content section span strong { + color: #FFFFFF; + font-size: 14px; + display: block; +} + +.slider-wrapper{ + position: relative; + overflow: hidden; + border-radius: 4px; +} + +.slider-wrapper, +.slide { + height: calc(100vh - 75px); +} + +.slider-wrapper.medium, +.slider-wrapper.medium .slide { + height: 500px; +} + +.slider-wrapper.short, +.slider-wrapper.short .slide { + height: 261px; +} + +.slider-content .inner h1 { + font-size: 32px; +} + +.slider-content .inner h3 { + font-size: 24px; +} + +@media (max-width: 640px) { + .slider-wrapper, + .slide { + height: calc(80vh - 75px); + } + .custom-nav .slick-dots{ + visibility: hidden; + } +} + +@media (max-width: 480px) { + .slider-content .inner h3, + .slider-content .inner h1 { + font-size: 18px; + line-height: 24px + } + .slider-content .inner { + padding: 0 40px + } +} + diff --git a/front/odiparpack/app/styles/components/vendors/react-big-calendar/react-big-calendar.css b/front/odiparpack/app/styles/components/vendors/react-big-calendar/react-big-calendar.css new file mode 100644 index 0000000..6562da2 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-big-calendar/react-big-calendar.css @@ -0,0 +1,665 @@ +.rbc-btn { + color: inherit; + font: inherit; + margin: 0; +} +button.rbc-btn { + overflow: visible; + text-transform: none; + -webkit-appearance: button; + cursor: pointer; +} +button[disabled].rbc-btn { + cursor: not-allowed; +} +button.rbc-input::-moz-focus-inner { + border: 0; + padding: 0; +} +.rbc-calendar { + -webkit-box-sizing: border-box; + box-sizing: border-box; + height: 100%; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -ms-flex-align: stretch; + -webkit-box-align: stretch; + align-items: stretch; +} +.rbc-calendar *, +.rbc-calendar *:before, +.rbc-calendar *:after { + -webkit-box-sizing: inherit; + box-sizing: inherit; +} +.rbc-abs-full, +.rbc-row-bg { + overflow: hidden; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.rbc-ellipsis, +.rbc-event-label, +.rbc-row-segment .rbc-event-content, +.rbc-show-more { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.rbc-rtl { + direction: rtl; +} +.rbc-off-range { + color: #cccccc; +} +.rbc-off-range-bg { + background: #f7f7f7; +} +.rbc-header { + overflow: hidden; + -ms-flex: 1 0 0%; + -webkit-box-flex: 1; + flex: 1 0 0%; + text-overflow: ellipsis; + white-space: nowrap; + padding: 5px 3px; + text-align: right; + vertical-align: middle; + font-weight: 400; + font-size: 18px; + min-height: 0; + background: #eaeaea; + color: #757575; +} +.rbc-rtl .rbc-header + .rbc-header { + border-left-width: 0; +} +.rbc-header > a, +.rbc-header > a:active, +.rbc-header > a:visited { + color: inherit; + text-decoration: none; +} +.rbc-row-content { + position: relative; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + z-index: 4; +} +.rbc-today { + background-color: #eaf6ff; +} +.rbc-toolbar { + margin-bottom: 10px; + font-size: 16px; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-align: center; + -webkit-box-align: center; + align-items: center; +} +.rbc-toolbar .rbc-toolbar-label { + -ms-flex-positive: 1; + -webkit-box-flex: 1; + flex-grow: 1; + padding: 10px; + text-align: center; +} +.rbc-toolbar button { + color: #373a3c; + display: inline-block; + margin: 0; + text-align: center; + vertical-align: middle; + background: #EEEEEE; + border: 1px solid #f9f9f9; + background-image: none; + padding: .375rem 1rem; + border-radius: 2px; + line-height: normal; + white-space: nowrap; + font-weight: 400; + font-size: 14px; + text-transform: capitalize; +} +.rbc-toolbar button:active, +.rbc-toolbar button.rbc-active { + background-color: #2196F3 !important; + color: #FFF; +} +.rbc-toolbar button:hover { + color: #373a3c; + background-color: #e6e6e6; +} +.rbc-btn-group { + display: inline-block; + white-space: nowrap; +} +.rbc-btn-group > button:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-btn-group > button:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.rbc-rtl .rbc-btn-group > button:first-child:not(:last-child) { + border-radius: 4px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.rbc-rtl .rbc-btn-group > button:last-child:not(:first-child) { + border-radius: 4px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-btn-group > button:not(:first-child):not(:last-child) { + border-radius: 0; +} +.rbc-btn-group button + button { + margin-left: -1px; +} +.rbc-rtl .rbc-btn-group button + button { + margin-left: 0; + margin-right: -1px; +} +.rbc-btn-group + .rbc-btn-group, +.rbc-btn-group + button { + margin-left: 10px; +} +.rbc-event { + padding: 5px 8px; + background-color: #3174ad; + border-radius: 2px; + color: #3a3a3a; + cursor: pointer; + font-size: 13px; +} +.rbc-slot-selecting .rbc-event { + cursor: inherit; + pointer-events: none; +} +.rbc-event.rbc-selected { + background-color: #265985; +} +.rbc-event-label { + font-size: 80%; +} +.rbc-event-overlaps { + -webkit-box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); + box-shadow: -1px 1px 5px 0px rgba(51, 51, 51, 0.5); +} +.rbc-event-continues-prior { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.rbc-event-continues-after { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-event-continues-earlier { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.rbc-event-continues-later { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-event-continues-day-after { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.rbc-event-continues-day-prior { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.rbc-row { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; +} +.rbc-row-segment { + padding: 0 1px 1px 1px; +} +.rbc-selected-cell { + background-color: rgba(0, 0, 0, 0.1); +} +.rbc-show-more { + z-index: 4; + font-weight: bold; + font-size: 85%; + height: auto; + color: #424242; + line-height: normal; + white-space: nowrap; +} +.rbc-month-view { + position: relative; + border: none; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -ms-flex: 1 0 0px; + -webkit-box-flex: 1; + flex: 1 0 0; + width: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; + height: 100%; +} +.rbc-month-header { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; +} +.rbc-month-row { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + position: relative; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -ms-flex: 1 0 0px; + -webkit-box-flex: 1; + flex: 1 0 0; + -ms-flex-preferred-size: 0px; + flex-basis: 0px; + overflow: hidden; + height: 100%; +} +.rbc-month-row + .rbc-month-row { + border-top: 1px solid #DDD; +} +.rbc-date-cell { + -ms-flex: 1 1 0px; + -webkit-box-flex: 1; + flex: 1 1 0; + min-width: 0; + padding-right: 5px; + text-align: right; +} +.rbc-date-cell.rbc-now { + font-weight: bold; +} +.rbc-date-cell > a, +.rbc-date-cell > a:active, +.rbc-date-cell > a:visited { + color: inherit; + text-decoration: none; +} +.rbc-row-bg { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; + -ms-flex: 1 0 0px; + -webkit-box-flex: 1; + flex: 1 0 0; + overflow: hidden; +} +.rbc-day-bg { + -ms-flex: 1 0 0%; + -webkit-box-flex: 1; + flex: 1 0 0%; +} + +.rbc-overlay { + position: absolute; + z-index: 5; + border: 1px solid #e5e5e5; + background-color: #fff; + -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); + padding: 10px; +} +.rbc-overlay > * + * { + margin-top: 1px; +} +.rbc-overlay-header { + border-bottom: 1px solid #e5e5e5; + margin: -10px -10px 5px -10px; + padding: 2px 10px; +} +.rbc-agenda-view { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -ms-flex: 1 0 0px; + -webkit-box-flex: 1; + flex: 1 0 0; + overflow: auto; +} +.rbc-agenda-view table.rbc-agenda-table { + width: 100%; + border: 1px solid #DDD; + border-spacing: 0; + border-collapse: collapse; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr > td { + padding: 5px 10px; + vertical-align: top; +} +.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell { + padding-left: 15px; + padding-right: 15px; + text-transform: lowercase; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left: 1px solid #DDD; +} +.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody > tr > td + td { + border-left-width: 0; + border-right: 1px solid #DDD; +} +.rbc-agenda-view table.rbc-agenda-table tbody > tr + tr { + border-top: 1px solid #DDD; +} +.rbc-agenda-view table.rbc-agenda-table thead > tr > th { + padding: 3px 5px; + text-align: left; + border-bottom: 1px solid #DDD; +} +.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead > tr > th { + text-align: right; +} +.rbc-agenda-time-cell { + text-transform: lowercase; +} +.rbc-agenda-time-cell .rbc-continues-after:after { + content: ' »'; +} +.rbc-agenda-time-cell .rbc-continues-prior:before { + content: '« '; +} +.rbc-agenda-date-cell, +.rbc-agenda-time-cell { + white-space: nowrap; +} +.rbc-agenda-event-cell { + width: 100%; +} +.rbc-time-column { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + min-height: 100%; +} +.rbc-time-column .rbc-timeslot-group { + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; +} +.rbc-timeslot-group { + border-bottom: 1px solid #DDD; + min-height: 40px; + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-flow: column nowrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-flow: column nowrap; +} +.rbc-time-gutter, +.rbc-header-gutter { + -ms-flex: none; + -webkit-box-flex: 0; + flex: none; +} +.rbc-label { + padding: 0 5px; +} +.rbc-day-slot { + position: relative; +} +.rbc-day-slot .rbc-events-container { + bottom: 0; + left: 0; + position: absolute; + right: 10px; + top: 0; +} +.rbc-day-slot .rbc-events-container.rbc-is-rtl { + left: 10px; + right: 0; +} +.rbc-day-slot .rbc-event { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + max-height: 100%; + min-height: 20px; + -ms-flex-flow: column wrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-flow: column wrap; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + overflow: hidden; + position: absolute; +} +.rbc-day-slot .rbc-event-label { + -ms-flex: none; + -webkit-box-flex: 0; + flex: none; + padding-right: 5px; + width: auto; +} +.rbc-day-slot .rbc-event-content { + width: 100%; + -ms-flex: 1 1 0px; + -webkit-box-flex: 1; + flex: 1 1 0; + word-wrap: break-word; + line-height: 1; + height: 100%; + min-height: 1em; +} +.rbc-day-slot .rbc-time-slot { + border-top: 1px solid #f7f7f7; +} +.rbc-time-slot { + -ms-flex: 1 0 0px; + -webkit-box-flex: 1; + flex: 1 0 0; + font-size: 11px; + padding: 3px 7px; + +} +.rbc-time-slot.rbc-now { + font-weight: bold; +} +.rbc-day-header { + text-align: center; +} +.rbc-slot-selection { + z-index: 10; + position: absolute; + background-color: rgba(0, 0, 0, 0.5); + color: white; + font-size: 75%; + width: 100%; + padding: 3px; +} +.rbc-slot-selecting { + cursor: move; +} +.rbc-time-view { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; + width: 100%; + min-height: 0; +} +.rbc-time-view .rbc-time-gutter { + white-space: nowrap; +} +.rbc-time-view .rbc-allday-cell { + -webkit-box-sizing: content-box; + box-sizing: content-box; + width: 100%; + position: relative; +} +.rbc-time-view .rbc-allday-events { + position: relative; + z-index: 4; +} +.rbc-time-view .rbc-row { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-height: 20px; +} +.rbc-time-header { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + -ms-flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + flex-direction: row; +} +.rbc-time-header.rbc-overflowing { + border-right: 1px solid #DDD; +} +.rbc-rtl .rbc-time-header.rbc-overflowing { + border-right-width: 0; + border-left: 1px solid #DDD; +} +.rbc-time-header > .rbc-row:first-child { + border-bottom: 1px solid #DDD; +} +.rbc-time-header > .rbc-row.rbc-row-resource { + border-bottom: 1px solid #DDD; +} +.rbc-time-header-content { + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; + min-width: 0; + -ms-flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + border-left: 1px solid #DDD; +} +.rbc-rtl .rbc-time-header-content { + border-left-width: 0; + border-right: 1px solid #DDD; +} +.rbc-time-content { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex: 1 0 0%; + -webkit-box-flex: 1; + flex: 1 0 0%; + -ms-flex-align: start; + -webkit-box-align: start; + align-items: flex-start; + width: 100%; + border-top: 2px solid #DDD; + overflow-y: auto; + position: relative; +} +.rbc-time-content > .rbc-time-gutter { + -ms-flex: none; + -webkit-box-flex: 0; + flex: none; +} +.rbc-time-content > * + * > * { + border-left: 1px solid #DDD; +} +.rbc-rtl .rbc-time-content > * + * > * { + border-left-width: 0; + border-right: 1px solid #DDD; +} +.rbc-time-content > .rbc-day-slot { + width: 100%; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-user-select: none; +} +.rbc-current-time-indicator { + position: absolute; + z-index: 3; + height: 1px; + background-color: #74ad31; + pointer-events: none; +} + +@media only screen and (max-width: 600px) { + .rbc-toolbar { + flex-direction: column + } + .rbc-btn-group { + width: 100%; + text-align: center; + overflow: auto; + } + .rbc-header { + border-right: 1px solid #fff; + } + .rbc-header span { + display: block; + visibility: hidden; + text-align: center + } + .rbc-header span:first-letter { + visibility: visible + } +} + +.eventBlock { + line-height: 18px +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css b/front/odiparpack/app/styles/components/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css new file mode 100644 index 0000000..048a8f1 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-draft-wysiwyg/react-draft-wysiwyg.css @@ -0,0 +1,852 @@ +.rdw-option-wrapper { + border: 1px solid #F1F1F1; + padding: 5px; + min-width: 25px; + height: 20px; + border-radius: 2px; + margin: 0 4px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-option-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-option-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-option-disabled { + opacity: 0.3; + cursor: default; +} +.rdw-dropdown-wrapper { + height: 30px; + background: white; + cursor: pointer; + border: 1px solid #F1F1F1; + border-radius: 2px; + margin: 0 3px; + text-transform: capitalize; + background: white; +} +.rdw-dropdown-wrapper:focus { + outline: none; +} +.rdw-dropdown-wrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} +.rdw-dropdown-wrapper:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-dropdown-carettoopen { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-top: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-carettoclose { + height: 0px; + width: 0px; + position: absolute; + top: 35%; + right: 10%; + border-bottom: 6px solid black; + border-left: 5px solid transparent; + border-right: 5px solid transparent; +} +.rdw-dropdown-selectedtext { + display: flex; + position: relative; + height: 100%; + align-items: center; + padding: 0 5px; +} +.rdw-dropdown-optionwrapper { + z-index: 100; + position: relative; + border: 1px solid #F1F1F1; + width: 98%; + background: white; + border-radius: 2px; + margin: 0; + padding: 0; + max-height: 250px; + overflow-y: scroll; +} +.rdw-dropdown-optionwrapper:hover { + box-shadow: 1px 1px 0px #BFBDBD; + background-color: #FFFFFF; +} +.rdw-dropdownoption-default { + min-height: 25px; + display: flex; + align-items: center; + padding: 0 5px; +} +.rdw-dropdownoption-highlighted { + background: #F1F1F1; +} +.rdw-dropdownoption-active { + background: #f5f5f5; +} +.rdw-dropdownoption-disabled { + opacity: 0.3; + cursor: default; +} +.rdw-inline-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-inline-dropdown { + width: 50px; +} +.rdw-inline-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-block-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-block-dropdown { + width: 110px; +} +.rdw-fontsize-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-fontsize-dropdown { + min-width: 40px; +} +.rdw-fontsize-option { + display: flex; + justify-content: center; +} +.rdw-fontfamily-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-fontfamily-dropdown { + width: 115px; +} +.rdw-fontfamily-placeholder { + white-space: nowrap; + max-width: 90px; + overflow: hidden; + text-overflow: ellipsis; +} +.rdw-fontfamily-optionwrapper { + width: 140px; +} +.rdw-list-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-list-dropdown { + width: 50px; + z-index: 90; +} +.rdw-list-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-text-align-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-text-align-dropdown { + width: 50px; + z-index: 90; +} +.rdw-text-align-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-right-aligned-block { + text-align: right; +} +.rdw-left-aligned-block { + text-align: left !important; +} +.rdw-center-aligned-block { + text-align: center !important; +} +.rdw-justify-aligned-block { + text-align: justify !important; +} +.rdw-right-aligned-block > div { + display: inline-block; +} +.rdw-left-aligned-block > div { + display: inline-block; +} +.rdw-center-aligned-block > div { + display: inline-block; +} +.rdw-justify-aligned-block > div { + display: inline-block; +} +.rdw-colorpicker-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-colorpicker-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 175px; + height: 175px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-colorpicker-modal-header { + display: flex; + padding-bottom: 5px; +} +.rdw-colorpicker-modal-style-label { + font-size: 15px; + width: 50%; + text-align: center; + cursor: pointer; + padding: 0 10px 5px; +} +.rdw-colorpicker-modal-style-label-active { + border-bottom: 2px solid #0a66b7; +} +.rdw-colorpicker-modal-options { + margin: 5px auto; + display: flex; + width: 100%; + height: 100%; + flex-wrap: wrap; + overflow: scroll; +} +.rdw-colorpicker-cube { + width: 22px; + height: 22px; + border: 1px solid #F1F1F1; +} +.rdw-colorpicker-option { + margin: 3px; + padding: 0; + min-height: 20px; + border: none; + width: 22px; + height: 22px; + min-width: 22px; + box-shadow: 1px 2px 1px #BFBDBD inset; +} +.rdw-colorpicker-option:hover { + box-shadow: 1px 2px 1px #BFBDBD; +} +.rdw-colorpicker-option:active { + box-shadow: -1px -2px 1px #BFBDBD; +} +.rdw-colorpicker-option-active { + box-shadow: 0px 0px 2px 2px #BFBDBD; +} +.rdw-link-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-link-dropdown { + width: 50px; +} +.rdw-link-dropdownOption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-link-dropdownPlaceholder { + margin-left: 8px; +} +.rdw-link-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 205px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-link-modal-label { + font-size: 15px; +} +.rdw-link-modal-input { + margin-top: 5px; + border-radius: 2px; + border: 1px solid #F1F1F1; + height: 25px; + margin-bottom: 15px; + padding: 0 5px; +} +.rdw-link-modal-input:focus { + outline: none; +} +.rdw-link-modal-buttonsection { + margin: 0 auto; +} +.rdw-link-modal-target-option { + margin-bottom: 20px; +} +.rdw-link-modal-target-option > span { + margin-left: 5px; +} +.rdw-link-modal-btn { + margin-left: 10px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-link-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-link-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-link-modal-btn:focus { + outline: none !important; +} +.rdw-link-modal-btn:disabled { + background: #ece9e9; +} +.rdw-link-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} +.rdw-embedded-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-embedded-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + justify-content: space-between; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-embedded-modal-header { + font-size: 15px; + display: flex; +} +.rdw-embedded-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-embedded-modal-header-label { + width: 95px; + border: 1px solid #f1f1f1; + margin-top: 5px; + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-embedded-modal-link-section { + display: flex; + flex-direction: column; +} +.rdw-embedded-modal-link-input { + width: 88%; + height: 35px; + margin: 10px 0; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-embedded-modal-link-input-wrapper { + display: flex; + align-items: center; +} +.rdw-embedded-modal-link-input:focus { + outline: none; +} +.rdw-embedded-modal-btn-section { + display: flex; + justify-content: center; +} +.rdw-embedded-modal-btn { + margin: 0 3px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-embedded-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-embedded-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-embedded-modal-btn:focus { + outline: none !important; +} +.rdw-embedded-modal-btn:disabled { + background: #ece9e9; +} +.rdw-embedded-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-embedded-modal-size-input { + width: 80%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-embedded-modal-size-input:focus { + outline: none; +} +.rdw-emoji-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-emoji-modal { + overflow: auto; + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-wrap: wrap; + width: 235px; + height: 180px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-emoji-icon { + margin: 2.5px; + height: 24px; + width: 24px; + cursor: pointer; + font-size: 22px; + display: flex; + justify-content: center; + align-items: center; +} +.rdw-spinner { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + width: 100%; +} +.rdw-spinner > div { + width: 12px; + height: 12px; + background-color: #333; + + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; +} +.rdw-spinner .rdw-bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; +} +.rdw-spinner .rdw-bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; +} +@-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } +} +@keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } +} +.rdw-image-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-image-modal { + position: absolute; + top: 35px; + left: 5px; + display: flex; + flex-direction: column; + width: 235px; + border: 1px solid #F1F1F1; + padding: 15px; + border-radius: 2px; + z-index: 100; + background: white; + box-shadow: 3px 3px 5px #BFBDBD; +} +.rdw-image-modal-header { + font-size: 15px; + margin: 10px 0; + display: flex; +} +.rdw-image-modal-header-option { + width: 50%; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.rdw-image-modal-header-label { + width: 80px; + background: #f1f1f1; + border: 1px solid #f1f1f1; + margin-top: 5px; +} +.rdw-image-modal-header-label-highlighted { + background: #6EB8D4; + border-bottom: 2px solid #0a66b7; +} +.rdw-image-modal-upload-option { + width: 100%; + color: gray; + cursor: pointer; + display: flex; + border: none; + font-size: 15px; + align-items: center; + justify-content: center; + background-color: #f1f1f1; + outline: 2px dashed gray; + outline-offset: -10px; + margin: 10px 0; + padding: 9px 0; +} +.rdw-image-modal-upload-option-highlighted { + outline: 2px dashed #0a66b7; +} +.rdw-image-modal-upload-option-label { + cursor: pointer; + height: 100%; + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 15px; +} +.rdw-image-modal-upload-option-label span{ + padding: 0 20px; +} +.rdw-image-modal-upload-option-image-preview { + max-width: 100%; + max-height: 200px; +} +.rdw-image-modal-upload-option-input { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; +} +.rdw-image-modal-url-section { + display: flex; + align-items: center; +} +.rdw-image-modal-url-input { + width: 90%; + height: 35px; + margin: 15px 0 12px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 15px; + padding: 0 5px; +} +.rdw-image-modal-btn-section { + margin: 10px auto 0; +} +.rdw-image-modal-url-input:focus { + outline: none; +} +.rdw-image-modal-btn { + margin: 0 5px; + width: 75px; + height: 30px; + border: 1px solid #F1F1F1; + border-radius: 2px; + cursor: pointer; + background: white; + text-transform: capitalize; +} +.rdw-image-modal-btn:hover { + box-shadow: 1px 1px 0px #BFBDBD; +} +.rdw-image-modal-btn:active { + box-shadow: 1px 1px 0px #BFBDBD inset; +} +.rdw-image-modal-btn:focus { + outline: none !important; +} +.rdw-image-modal-btn:disabled { + background: #ece9e9; +} +.rdw-image-modal-spinner { + position: absolute; + top: -3px; + left: 0; + width: 100%; + height: 100%; + opacity: 0.5; +} +.rdw-image-modal-alt-input { + width: 70%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; + margin-left: 5px; +} +.rdw-image-modal-alt-input:focus { + outline: none; +} +.rdw-image-modal-alt-lbl { + font-size: 12px; +} +.rdw-image-modal-size { + align-items: center; + display: flex; + margin: 8px 0; + justify-content: space-between; +} +.rdw-image-modal-size-input { + width: 40%; + height: 20px; + border: 1px solid #F1F1F1; + border-radius: 2px; + font-size: 12px; +} +.rdw-image-modal-size-input:focus { + outline: none; +} +.rdw-image-mandatory-sign { + color: red; + margin-left: 3px; + margin-right: 3px; +} +.rdw-remove-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; + position: relative; +} +.rdw-history-wrapper { + display: flex; + align-items: center; + margin-bottom: 6px; +} +.rdw-history-dropdownoption { + height: 40px; + display: flex; + justify-content: center; +} +.rdw-history-dropdown { + width: 50px; +} +.rdw-link-decorator-wrapper { + position: relative; +} +.rdw-link-decorator-icon { + position: absolute; + left: 40%; + top: 0; + cursor: pointer; + background-color: white; +} +.rdw-mention-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} +.rdw-suggestion-wrapper { + position: relative; +} +.rdw-suggestion-dropdown { + position: absolute; + display: flex; + flex-direction: column; + border: 1px solid #F1F1F1; + min-width: 100px; + max-height: 150px; + overflow: auto; + background: white; + z-index: 100; +} +.rdw-suggestion-option { + padding: 7px 5px; + border-bottom: 1px solid #f1f1f1; +} +.rdw-suggestion-option-active { + background-color: #F1F1F1; +} +.rdw-hashtag-link { + text-decoration: none; + color: #1236ff; + background-color: #f0fbff; + padding: 1px 2px; + border-radius: 2px; +} +.rdw-image-alignment-options-popup { + position: absolute;; + background: white; + display: flex; + padding: 5px 2px; + border-radius: 2px; + border: 1px solid #F1F1F1; + width: 105px; + cursor: pointer; + z-index: 100; +} +.rdw-alignment-option-left { + justify-content: flex-start; +} +.rdw-image-alignment-option { + height: 15px; + width: 15px; + min-width: 15px; +} +.rdw-image-alignment { + position: relative; +} +.rdw-image-imagewrapper { + position: relative; +} +.rdw-image-center { + display: flex; + justify-content: center; +} +.rdw-image-left { + display: flex; +} +.rdw-image-right { + display: flex; + justify-content: flex-end; +} +.rdw-image-alignment-options-popup-right { + right: 0; +} +.rdw-editor-main { + height: 100%; + overflow: auto; + box-sizing: border-box; +} +.rdw-editor-toolbar { + padding: 6px 5px 0; + border-radius: 2px; + border: 1px solid #F1F1F1; + display: flex; + justify-content: flex-start; + background: white; + flex-wrap: wrap; + font-size: 15px; + margin-bottom: 5px; + user-select: none; +} +.public-DraftStyleDefault-block { + margin: 1em 0; +} +.rdw-editor-wrapper:focus { + outline: none; +} +.rdw-editor-wrapper { + box-sizing: content-box; +} +.rdw-editor-main blockquote { + border-left: 5px solid #f1f1f1; + padding-left: 5px; +} +.rdw-editor-main pre { + background: #f1f1f1; + border-radius: 3px; + padding: 1px 10px; +}/** + * Draft v0.9.1 + * + * Copyright (c) 2013-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + */ +.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4} + +/*# sourceMappingURL=react-draft-wysiwyg.css.map*/
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/vendors/react-dropzone/react-dropzone.css b/front/odiparpack/app/styles/components/vendors/react-dropzone/react-dropzone.css new file mode 100644 index 0000000..ff4ae01 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-dropzone/react-dropzone.css @@ -0,0 +1,182 @@ +.dropzoneTextStyle { + text-align: center; + top: 25%; + position: relative; +} + +.dropzoneParagraph { + font-size: 24px +} + +.dropZone { + position: relative; + width: 100%; + height: 250px; + border: 2px dashed; + cursor: pointer; + padding: 20px; +} + +.stripes { + width: 100%; + height: 250px; + cursor: pointer; + border: solid; + border-color: #C8C8C8; + background-image: repeating-linear-gradient(-45deg, #F0F0F0, #F0F0F0 25px, #C8C8C8 25px, #C8C8C8 50px); + -webkit-animation: progress 2s linear infinite !important; + -moz-animation: progress 2s linear infinite !important; + animation: progress 2s linear infinite !important; + background-size: 150% 100%; +} + +.rejectStripes { + width: 100%; + height: 250px; + cursor: pointer; + border: solid; + border-color: #C8C8C8; + background-image: repeating-linear-gradient(-45deg, #fc8785, #fc8785 25px, #f4231f 25px, #f4231f 50px); + -webkit-animation: progress 2s linear infinite !important; + -moz-animation: progress 2s linear infinite !important; + animation: progress 2s linear infinite !important; + background-size: 150% 100%; +} + +.fileIconImg { + color: #909090 !important; +} + +.smallPreviewImg { + height: 100px !important; + width: initial !important; + max-width: 100%; +} + +@-webkit-keyframes progress { + 0% { + background-position: 0 0; + } + 100% { + background-position: -75px 0; + } +} + +@-moz-keyframes progress { + 0% { + background-position: 0 0; + } + 100% { + background-position: -75px 0; + } +} + +@-ms-keyframes progress { + 0% { + background-position: 0 0; + } + 100% { + background-position: -75px 0; + } +} + +@keyframes progress { + 0% { + background-position: 0 0; + } + 100% { + background-position: -70px 0; + } +} + +.imageContainer { + position: relative; + z-index: 10; + margin-bottom: 5px +} + +.imageContainer:hover .smallPreviewImg { + opacity: 0.7; +} + +.imageContainer:hover .middle { + opacity: 1; +} + +.imageContainer:hover .middleBigPic { + opacity: 1; +} + +.removeBtn { + color: white; + z-index: 3; +} + +.middle { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 0; + right: 5px; + z-index: 20 +} + +.row { + margin-right: -0.5rem; + margin-left: -0.5rem; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + justify-content: center; +} + +.preview { + margin: 10px +} + +.imgWrap, .fileWrap { + color: #c7c7c7; + transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms !important; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + box-shadow: rgba(0, 0, 0, 0.12) 0 1px 6px, rgba(0, 0, 0, 0.12) 0 1px 4px !important; + border-radius: 2px; + z-index: 5; + overflow: hidden; + text-align: center; + height: 100px; + position: relative; +} + +.imgWrap { + background: #c7c7c7; +} + +.fileWrap { + background: #e2e2e2; + color: #969696; +} + +.downloadBtn { + position: absolute; + right: 0; + top: 0; + text-align: center; + background: rgba(0, 0, 0, 0.4); + z-index: 10; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/front/odiparpack/app/styles/components/vendors/react-input-range/react-input-range.css b/front/odiparpack/app/styles/components/vendors/react-input-range/react-input-range.css new file mode 100644 index 0000000..323d18f --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-input-range/react-input-range.css @@ -0,0 +1,92 @@ +.input-range__slider { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #3f51b5; + border: 1px solid #3f51b5; + border-radius: 100%; + cursor: pointer; + display: block; + height: 1rem; + margin-left: -0.5rem; + margin-top: -0.65rem; + outline: none; + position: absolute; + top: 50%; + -webkit-transition: box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + transition: box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; + transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, -webkit-transform 0.3s ease-out; + width: 1rem; } + .input-range__slider:active { + -webkit-transform: scale(1.3); + transform: scale(1.3); } + .input-range__slider:focus { + box-shadow: 0 0 0 5px rgba(63, 81, 181, 0.2); } + .input-range--disabled .input-range__slider { + background: #cccccc; + border: 1px solid #cccccc; + box-shadow: none; + -webkit-transform: none; + transform: none; } + +.input-range__slider-container { + -webkit-transition: left 0.3s ease-out; + transition: left 0.3s ease-out; } + +.input-range__label { + color: #aaaaaa; + font-family: "Helvetica Neue", san-serif; + font-size: 0.8rem; + -webkit-transform: translateZ(0); + transform: translateZ(0); + white-space: nowrap; } + +.input-range__label--min, +.input-range__label--max { + bottom: -1.4rem; + position: absolute; } + +.input-range__label--min { + left: 0; } + +.input-range__label--max { + right: 0; } + +.input-range__label--value { + position: absolute; + top: -1.8rem; } + +.input-range__label-container { + left: -50%; + position: relative; } + .input-range__label--max .input-range__label-container { + left: 50%; } + +.input-range__track { + background: #eeeeee; + border-radius: 0.3rem; + cursor: pointer; + display: block; + height: 0.3rem; + position: relative; + -webkit-transition: left 0.3s ease-out, width 0.3s ease-out; + transition: left 0.3s ease-out, width 0.3s ease-out; } + .input-range--disabled .input-range__track { + background: #eeeeee; } + +.input-range__track--background { + left: 0; + margin-top: -0.15rem; + position: absolute; + right: 0; + top: 50%; } + +.input-range__track--active { + background: #3f51b5; } + +.input-range { + height: 1rem; + position: relative; + width: 100%; } + diff --git a/front/odiparpack/app/styles/components/vendors/react-loading-bar/index.css b/front/odiparpack/app/styles/components/vendors/react-loading-bar/index.css new file mode 100644 index 0000000..8301b01 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/react-loading-bar/index.css @@ -0,0 +1,71 @@ +.Loading__loading___1m_fZ { + pointer-events: none; + transition: 400ms linear all; +} + +.Loading__bar___21yOt { + position: fixed; + top: 0; + left: 0; + z-index: 10002; + display: none; + width: 100%; + height: 2px; + background: #29d; + border-radius: 0 1px 1px 0; + transition: width 350ms; +} + +.Loading__peg___3Y_28 { + position: absolute; + top: 0; + right: 0; + width: 70px; + height: 2px; + border-radius: 50%; + opacity: .45; + box-shadow: #29d 1px 0 6px 1px; +} + +.Loading__spinner___11Pm4 { + position: fixed; + top: 5px; + left: 5px; + z-index: 10002; + pointer-events: none; + transition: 350ms linear all; +} + +.Loading__icon___3OOyu { + width: 14px; + height: 14px; + border: solid #29d; + border-width: 0 2px 2px 0; + border-radius: 50%; + -webkit-animation: Loading__loading-bar-spinner___1hKY9 400ms linear infinite; + animation: Loading__loading-bar-spinner___1hKY9 400ms linear infinite; +} + +@-webkit-keyframes Loading__loading-bar-spinner___1hKY9 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes Loading__loading-bar-spinner___1hKY9 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} diff --git a/front/odiparpack/app/styles/components/vendors/select/select.css b/front/odiparpack/app/styles/components/vendors/select/select.css new file mode 100644 index 0000000..89a11f4 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/select/select.css @@ -0,0 +1,420 @@ +.Select { + position: relative; +} +.Select input::-webkit-contacts-auto-fill-button, +.Select input::-webkit-credentials-auto-fill-button { + display: none !important; +} +.Select input::-ms-clear { + display: none !important; +} +.Select input::-ms-reveal { + display: none !important; +} +.Select, +.Select div, +.Select input, +.Select span { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.Select.is-disabled .Select-arrow-zone { + cursor: default; + pointer-events: none; + opacity: 0.35; +} +.Select.is-disabled > .Select-control { + background-color: #f9f9f9; +} +.Select.is-disabled > .Select-control:hover { + box-shadow: none; +} +.Select.is-open > .Select-control { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + background: #fff; + border-color: #b3b3b3 #ccc #d9d9d9; +} +.Select.is-open > .Select-control .Select-arrow { + top: -2px; + border-color: transparent transparent #999; + border-width: 0 5px 5px; +} +.Select.is-searchable.is-open > .Select-control { + cursor: text; +} +.Select.is-searchable.is-focused:not(.is-open) > .Select-control { + cursor: text; +} +.Select.is-focused > .Select-control { + background: #fff; +} +.Select.is-focused:not(.is-open) > .Select-control { + border-color: #007eff; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(0, 126, 255, 0.1); + background: #fff; +} +.Select.has-value.is-clearable.Select--single > .Select-control .Select-value { + padding-right: 42px; +} +.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label { + color: #333; +} +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label { + cursor: pointer; + text-decoration: none; +} +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover, +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + color: #007eff; + outline: none; + text-decoration: underline; +} +.Select.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus, +.Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus { + background: #fff; +} +.Select.has-value.is-pseudo-focused .Select-input { + opacity: 0; +} +.Select.is-open .Select-arrow, +.Select .Select-arrow-zone:hover > .Select-arrow { + border-top-color: #666; +} +.Select.Select--rtl { + direction: rtl; + text-align: right; +} +.Select-control { + background-color: #fff; + border-color: #d9d9d9 #ccc #b3b3b3; + border-radius: 4px; + border: 1px solid #ccc; + color: #333; + cursor: default; + display: table; + border-spacing: 0; + border-collapse: separate; + height: 36px; + outline: none; + overflow: hidden; + position: relative; + width: 100%; +} +.Select-control:hover { + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); +} +.Select-control .Select-input:focus { + outline: none; + background: #fff; +} +.Select-placeholder, +.Select--single > .Select-control .Select-value { + bottom: 0; + color: #000; + left: 0; + line-height: 34px; + padding-left: 10px; + padding-right: 10px; + position: absolute; + right: 0; + top: 0; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.Select-input { + height: 34px; + padding-left: 10px; + padding-right: 10px; + vertical-align: middle; +} +.Select-input > input { + width: 100%; + background: none transparent; + border: 0 none; + box-shadow: none; + cursor: default; + display: inline-block; + font-family: inherit; + font-size: inherit; + margin: 0; + outline: none; + line-height: 17px; + /* For IE 8 compatibility */ + padding: 8px 0 12px; + /* For IE 8 compatibility */ + -webkit-appearance: none; +} +.is-focused .Select-input > input { + cursor: text; +} +.has-value.is-pseudo-focused .Select-input { + opacity: 0; +} +.Select-control:not(.is-searchable) > .Select-input { + outline: none; +} +.Select-loading-zone { + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 16px; +} +.Select-loading { + -webkit-animation: Select-animation-spin 400ms infinite linear; + -o-animation: Select-animation-spin 400ms infinite linear; + animation: Select-animation-spin 400ms infinite linear; + width: 16px; + height: 16px; + box-sizing: border-box; + border-radius: 50%; + border: 2px solid #ccc; + border-right-color: #333; + display: inline-block; + position: relative; + vertical-align: middle; +} +.Select-clear-zone { + -webkit-animation: Select-animation-fadeIn 200ms; + -o-animation: Select-animation-fadeIn 200ms; + animation: Select-animation-fadeIn 200ms; + color: #999; + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 17px; +} +.Select-clear-zone:hover { + color: #D0021B; +} +.Select-clear { + display: inline-block; + font-size: 18px; + line-height: 1; +} +.Select--multi .Select-clear-zone { + width: 17px; +} +.Select-arrow-zone { + cursor: pointer; + display: table-cell; + position: relative; + text-align: center; + vertical-align: middle; + width: 25px; + padding-right: 5px; +} +.Select--rtl .Select-arrow-zone { + padding-right: 0; + padding-left: 5px; +} +.Select-arrow { + border-color: #999 transparent transparent; + border-style: solid; + border-width: 5px 5px 2.5px; + display: inline-block; + height: 0; + width: 0; + position: relative; +} +.Select-control > *:last-child { + padding-right: 5px; +} +.Select--multi .Select-multi-value-wrapper { + display: inline-block; +} +.Select .Select-aria-only { + position: absolute; + display: inline-block; + height: 1px; + width: 1px; + margin: -1px; + clip: rect(0, 0, 0, 0); + overflow: hidden; + float: left; +} +@-webkit-keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes Select-animation-fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.Select-menu-outer { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + background-color: #fff; + border: 1px solid #ccc; + border-top-color: #e6e6e6; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); + box-sizing: border-box; + margin-top: -1px; + max-height: 200px; + position: absolute; + left: 0; + top: 100%; + width: 100%; + z-index: 1; + -webkit-overflow-scrolling: touch; +} +.Select-menu { + max-height: 198px; + overflow-y: auto; +} +.Select-option { + box-sizing: border-box; + background-color: #fff; + color: #666666; + cursor: pointer; + display: block; + padding: 8px 10px; +} +.Select-option:last-child { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; +} +.Select-option.is-selected { + background-color: #f5faff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.04); + color: #333; +} +.Select-option.is-focused { + background-color: #ebf5ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.08); + color: #333; +} +.Select-option.is-disabled { + color: #cccccc; + cursor: default; +} +.Select-noresults { + box-sizing: border-box; + color: #999999; + cursor: default; + display: block; + padding: 8px 10px; +} +.Select--multi .Select-input { + vertical-align: middle; + margin-left: 10px; + padding: 0; +} +.Select--multi.Select--rtl .Select-input { + margin-left: 0; + margin-right: 10px; +} +.Select--multi.has-value .Select-input { + margin-left: 5px; +} +.Select--multi .Select-value { + background-color: #ebf5ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.08); + border-radius: 2px; + border: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border: 1px solid rgba(0, 126, 255, 0.24); + color: #007eff; + display: inline-block; + font-size: 0.9em; + line-height: 1.4; + margin-left: 5px; + margin-top: 5px; + vertical-align: top; +} +.Select--multi .Select-value-icon, +.Select--multi .Select-value-label { + display: inline-block; + vertical-align: middle; +} +.Select--multi .Select-value-label { + border-bottom-right-radius: 2px; + border-top-right-radius: 2px; + cursor: default; + padding: 2px 5px; +} +.Select--multi a.Select-value-label { + color: #007eff; + cursor: pointer; + text-decoration: none; +} +.Select--multi a.Select-value-label:hover { + text-decoration: underline; +} +.Select--multi .Select-value-icon { + cursor: pointer; + border-bottom-left-radius: 2px; + border-top-left-radius: 2px; + border-right: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border-right: 1px solid rgba(0, 126, 255, 0.24); + padding: 1px 5px 3px; +} +.Select--multi .Select-value-icon:hover, +.Select--multi .Select-value-icon:focus { + background-color: #d8eafd; + /* Fallback color for IE 8 */ + background-color: rgba(0, 113, 230, 0.08); + color: #0071e6; +} +.Select--multi .Select-value-icon:active { + background-color: #c2e0ff; + /* Fallback color for IE 8 */ + background-color: rgba(0, 126, 255, 0.24); +} +.Select--multi.Select--rtl .Select-value { + margin-left: 0; + margin-right: 5px; +} +.Select--multi.Select--rtl .Select-value-icon { + border-right: none; + border-left: 1px solid #c2e0ff; + /* Fallback color for IE 8 */ + border-left: 1px solid rgba(0, 126, 255, 0.24); +} +.Select--multi.is-disabled .Select-value { + background-color: #fcfcfc; + border: 1px solid #e3e3e3; + color: #333; +} +.Select--multi.is-disabled .Select-value-icon { + cursor: not-allowed; + border-right: 1px solid #e3e3e3; +} +.Select--multi.is-disabled .Select-value-icon:hover, +.Select--multi.is-disabled .Select-value-icon:focus, +.Select--multi.is-disabled .Select-value-icon:active { + background-color: #fcfcfc; +} +@keyframes Select-animation-spin { + to { + transform: rotate(1turn); + } +} +@-webkit-keyframes Select-animation-spin { + to { + -webkit-transform: rotate(1turn); + } +} diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/ajax-loader.gif b/front/odiparpack/app/styles/components/vendors/slick-carousel/ajax-loader.gif Binary files differnew file mode 100644 index 0000000..e0e6e97 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/ajax-loader.gif diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.eot b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.eot Binary files differnew file mode 100644 index 0000000..2cbab9c --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.eot diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.svg b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.svg new file mode 100644 index 0000000..b36a66a --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg xmlns="http://www.w3.org/2000/svg"> +<metadata>Generated by Fontastic.me</metadata> +<defs> +<font id="slick" horiz-adv-x="512"> +<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/> +<missing-glyph horiz-adv-x="512" /> + +<glyph unicode="→" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> +<glyph unicode="←" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> +<glyph unicode="•" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/> +<glyph unicode="a" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/> +</font></defs></svg> diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.ttf b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.ttf Binary files differnew file mode 100644 index 0000000..9d03461 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.ttf diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.woff b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.woff Binary files differnew file mode 100644 index 0000000..8ee9972 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/fonts/slick.woff diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-carousel.css b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-carousel.css new file mode 100644 index 0000000..8d91736 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-carousel.css @@ -0,0 +1,118 @@ +.variable-width .slick-slide p { + background: blue; + height: 100px; + color: #fff; + margin: 5px; + line-height: 100px; + text-align: center; +} +.center .slick-center h3 { + color: #e67e22; + opacity: 1; + transform: scale(1.08); +} +.center h3 { + opacity: 0.8; + transition: all 300ms ease; +} +.content { + padding: 20px; + margin: auto; + width: 90%; +} +.slick-slide { + transition: transform .3s +} +.slick-slide .image { + padding: 10px; +} +.slick-slide img { + border: 5px solid #fff; + display: block; + margin: auto; +} +.slick-slide img.slick-loading { + border: 0; +} +.slick-slider { + margin: 0 auto 32px; +} +.slick-dots { + margin-left: 0; +} +.slick-thumb { + bottom: -45px; +} +.slick-thumb li { + width: 60px; + height: 45px; +} +.slick-thumb li img { + filter: grayscale(100%); +} +.slick-thumb li.slick-active img { + filter: grayscale(0%); +} +@media (max-width: 768px) { + h3 { + font-size: 24px; + } + .center { + margin-left: -40px; + margin-right: -40px; + } + .center .slick-center h3 { + color: #e67e22; + opacity: 1; + transform: scale(1); + } + .center h3 { + opacity: 0.8; + transform: scale(0.95); + transition: all 300ms ease; + } +} +.slick-vertical .slick-slide { + height: 180px; +} +button.slick-arrow { + background-color: grey !important; + width: 40px; + height: 40px; + padding-top: 5px; + z-index: 10; +} +button.slick-arrow:before{ + font-size: 36px; +} +button.slick-arrow:hover, +button.slick-arrow:focus: { + background-color: grey; +} +.slick-center{ + transform: scale(1.2); +} +.thumb-nav .slick-dots { + margin: 20px 0; + bottom: -60px; +} +.thumb-nav .slick-dots li{ + width: 60px; + height: auto; + max-width: none; +} +.thumb-nav .slick-dots li.slick-active{ + border-bottom: 2px solid grey; +} +.custom-arrow .nav-prev, +.custom-arrow .nav-next{ + position: absolute; + bottom: -40px; + z-index: 10; +} +.custom-arrow .nav-prev{ + left: 0 +} +.custom-arrow .nav-next{ + right: 0 +} diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-theme.css b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-theme.css new file mode 100644 index 0000000..5566c15 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick-theme.css @@ -0,0 +1,213 @@ +@charset 'UTF-8'; +/* Slider */ +.slick-loading .slick-list +{ + background: #fff url('./ajax-loader.gif') center center no-repeat; +} + +/* Icons */ +@font-face +{ + font-family: 'slick'; + font-weight: normal; + font-style: normal; + + src: url('./fonts/slick.eot'); + src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); +} +/* Arrows */ +.slick-prev, +.slick-next +{ + font-size: 0; + line-height: 0; + + position: absolute; + top: 50%; + + display: block; + + width: 20px; + height: 20px; + padding: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + + cursor: pointer; + + color: transparent; + border: none; + outline: none; + background: transparent; +} +.slick-prev:hover, +.slick-prev:focus, +.slick-next:hover, +.slick-next:focus +{ + color: transparent; + outline: none; + background: transparent; +} +.slick-prev:hover:before, +.slick-prev:focus:before, +.slick-next:hover:before, +.slick-next:focus:before +{ + opacity: 1; +} +.slick-prev.slick-disabled:before, +.slick-next.slick-disabled:before +{ + opacity: .25; +} + +.slick-prev:before, +.slick-next:before +{ + font-family: 'slick'; + font-size: 20px; + line-height: 1; + + opacity: .75; + color: white; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-prev +{ + left: -25px; +} +[dir='rtl'] .slick-prev +{ + right: -25px; + left: auto; +} +.slick-prev:before +{ + content: '←'; +} +[dir='rtl'] .slick-prev:before +{ + content: '→'; +} + +.slick-next +{ + right: -25px; +} +[dir='rtl'] .slick-next +{ + right: auto; + left: -25px; +} +.slick-next:before +{ + content: '→'; +} +[dir='rtl'] .slick-next:before +{ + content: '←'; +} + +/* Dots */ +.slick-dotted.slick-slider +{ + margin-bottom: 30px; +} + +.slick-dots +{ + position: absolute; + bottom: -25px; + + display: block; + + width: 100%; + padding: 0; + margin: 0; + + list-style: none; + + text-align: center; +} +.slick-dots li +{ + position: relative; + + display: inline-block; + + width: 20px; + height: 20px; + margin: 0 5px; + padding: 0; + + cursor: pointer; +} +.slick-dots li button +{ + font-size: 0; + line-height: 0; + + display: block; + + width: 20px; + height: 20px; + padding: 5px; + + cursor: pointer; + + color: transparent; + border: 0; + outline: none; + background: transparent; +} +.slick-dots li button:hover, +.slick-dots li button:focus +{ + outline: none; +} +.slick-dots li button:hover:before, +.slick-dots li button:focus:before +{ + opacity: 1; +} +.slick-dots li button:before +{ + font-family: 'slick'; + font-size: 6px; + line-height: 20px; + + position: absolute; + top: 0; + left: 0; + + width: 20px; + height: 20px; + + content: '•'; + text-align: center; + + opacity: .25; + color: black; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.slick-dots li.slick-active button:before +{ + opacity: .75; + color: black; +} + +@media only screen and (max-width: 960px) { + .slick-next { + right: 5px + } + .slick-prev { + left: 5px + } +}
\ No newline at end of file diff --git a/front/odiparpack/app/styles/components/vendors/slick-carousel/slick.css b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick.css new file mode 100644 index 0000000..cd76a53 --- /dev/null +++ b/front/odiparpack/app/styles/components/vendors/slick-carousel/slick.css @@ -0,0 +1,119 @@ +/* Slider */ +.slick-slider +{ + position: relative; + + display: block; + box-sizing: border-box; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list +{ + position: relative; + + display: block; + overflow: hidden; + + margin: 0 -4px; + padding: 0; +} +.slick-list:focus +{ + outline: none; +} +.slick-list.dragging +{ + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, +.slick-slider .slick-list +{ + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track +{ + position: relative; + top: 0; + left: 0; + + display: block; + margin-left: auto; + margin-right: auto; +} +.slick-track:before, +.slick-track:after +{ + display: table; + + content: ''; +} +.slick-track:after +{ + clear: both; +} +.slick-loading .slick-track +{ + visibility: hidden; +} + +.slick-slide +{ + display: none; + float: left; + + height: 100%; + min-height: 1px; +} +[dir='rtl'] .slick-slide +{ + float: right; +} +.slick-slide img +{ + display: block; +} +.slick-slide.slick-loading img +{ + display: none; +} +.slick-slide.dragging img +{ + pointer-events: none; +} +.slick-initialized .slick-slide +{ + display: block; +} +.slick-loading .slick-slide +{ + visibility: hidden; +} +.slick-vertical .slick-slide +{ + display: block; + + height: auto; + + border: 1px solid transparent; +} +.slick-arrow.slick-hidden { + display: none; +} |
