├── .npmignore ├── src ├── settings │ ├── module.scss │ ├── typography.scss │ ├── settings.scss │ └── colors.scss ├── components │ ├── statistics.scss │ ├── help.scss │ ├── avatar.scss │ ├── chart.scss │ ├── status.scss │ ├── pagination.scss │ ├── breadcrumbs.scss │ ├── tabs.scss │ ├── alert.scss │ ├── button.scss │ └── table.scss ├── patterns │ ├── main.scss │ ├── module │ │ ├── module-form.scss │ │ ├── module.scss │ │ ├── module-alert.scss │ │ ├── module-upload.scss │ │ ├── module-editor.scss │ │ ├── module-progress.scss │ │ ├── module-button.scss │ │ ├── module-thumb.scss │ │ └── module-table.scss │ ├── media │ │ ├── media.scss │ │ ├── media-editor.scss │ │ ├── media-alert.scss │ │ ├── media-button.scss │ │ ├── media-progress.scss │ │ ├── media-thumb.scss │ │ ├── media-upload.scss │ │ └── media-table.scss │ ├── footer.scss │ ├── grid.scss │ └── menu.scss ├── helpers │ ├── text.scss │ ├── align.scss │ ├── responsive.scss │ ├── states.scss │ ├── margin.scss │ └── padding.scss ├── vendor │ ├── dropzone.scss │ ├── redactor.scss │ ├── blender-js.locationpicker.scss │ ├── confirm.scss │ ├── dragula.scss │ ├── modal.scss │ ├── blender-js.progress.scss │ ├── fileupload.scss │ ├── redactor │ │ ├── mixins.scss │ │ ├── variables.scss │ │ ├── dropdown.scss │ │ ├── modal.scss │ │ ├── content.scss │ │ ├── ui.scss │ │ └── icons.scss │ ├── datatables.scss │ ├── select2.scss │ ├── blender-js.parts.scss │ └── datetimepicker.scss ├── blender.scss ├── utility │ ├── functions.scss │ └── mixins.scss ├── base │ ├── form-check-radio.scss │ ├── html-tag.scss │ └── form.scss └── views │ └── auth.scss ├── .gitignore ├── demo ├── fonts │ └── font-awesome │ │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ │ └── css │ │ └── font-awesome.min.css ├── images │ └── svg │ │ └── blender.svg └── index.html ├── .editorconfig ├── webpack.config.babel.js ├── package.json ├── LICENSE.md ├── README.md ├── CHANGELOG.md └── .csscomb.json /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | npm-debug.log 4 | -------------------------------------------------------------------------------- /src/settings/module.scss: -------------------------------------------------------------------------------- 1 | $module: ( 2 | thumb-width: 3em 3 | ); 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | yarn /dist 2 | /node_modules 3 | npm-debug.log 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /src/components/statistics.scss: -------------------------------------------------------------------------------- 1 | .statistic { 2 | margin-bottom: 4em; 3 | } 4 | -------------------------------------------------------------------------------- /src/patterns/main.scss: -------------------------------------------------------------------------------- 1 | .main { 2 | flex-grow: 1; 3 | max-width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/patterns/module/module-form.scss: -------------------------------------------------------------------------------- 1 | .module { 2 | textarea { 3 | height: 5em; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/components/help.scss: -------------------------------------------------------------------------------- 1 | .help { 2 | color: color($gray); 3 | 4 | &.-small { 5 | font-size: font-size(s); 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/helpers/text.scss: -------------------------------------------------------------------------------- 1 | .h-text-ellipsis { 2 | overflow: hidden; 3 | 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | } 7 | -------------------------------------------------------------------------------- /src/patterns/media/media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | @extend .module; 3 | } 4 | 5 | .media__actions { 6 | @extend .module__actions; 7 | } 8 | -------------------------------------------------------------------------------- /demo/fonts/font-awesome/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/blender-css/master/demo/fonts/font-awesome/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /demo/fonts/font-awesome/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/blender-css/master/demo/fonts/font-awesome/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /demo/fonts/font-awesome/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/blender-css/master/demo/fonts/font-awesome/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /demo/fonts/font-awesome/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/blender-css/master/demo/fonts/font-awesome/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /demo/fonts/font-awesome/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/spatie/blender-css/master/demo/fonts/font-awesome/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /src/patterns/media/media-editor.scss: -------------------------------------------------------------------------------- 1 | .media__editor { 2 | @extend .module__editor; 3 | } 4 | 5 | .media__editor__column { 6 | @extend .module__editor__column; 7 | } 8 | -------------------------------------------------------------------------------- /src/helpers/align.scss: -------------------------------------------------------------------------------- 1 | .h-align-left { 2 | text-align: left; 3 | } 4 | 5 | .h-align-right { 6 | text-align: right; 7 | } 8 | 9 | .h-align-center { 10 | text-align: center; 11 | } 12 | -------------------------------------------------------------------------------- /src/patterns/media/media-alert.scss: -------------------------------------------------------------------------------- 1 | .media__alert { 2 | @extend .module__alert; 3 | } 4 | 5 | .media__alert__message { 6 | @extend .module__alert__message; 7 | } 8 | 9 | .media__alert__delete { 10 | @extend .module__alert__delete; 11 | } 12 | -------------------------------------------------------------------------------- /src/patterns/media/media-button.scss: -------------------------------------------------------------------------------- 1 | .media__button { 2 | @extend .module__button; 3 | } 4 | 5 | .media__button--delete { 6 | @extend .module__button--delete; 7 | } 8 | 9 | .media__button--debug { 10 | @extend .module__button--debug; 11 | } 12 | -------------------------------------------------------------------------------- /src/patterns/media/media-progress.scss: -------------------------------------------------------------------------------- 1 | .media__progress { 2 | @extend .module__progress; 3 | } 4 | 5 | .media__progress__bar { 6 | @extend .module__progress__bar; 7 | } 8 | 9 | .media__progress__name { 10 | @extend .module__progress__name; 11 | } 12 | -------------------------------------------------------------------------------- /src/vendor/dropzone.scss: -------------------------------------------------------------------------------- 1 | 2 | .dz-drag-hover { 3 | overflow: hidden; 4 | 5 | background: color($green, default, .25); 6 | border-color: color($green, default); 7 | 8 | cursor: copy; 9 | 10 | 11 | & > * { 12 | opacity: .2; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/patterns/media/media-thumb.scss: -------------------------------------------------------------------------------- 1 | .media__thumb { 2 | @extend .module__thumb; 3 | } 4 | 5 | .media__thumb__image { 6 | @extend .module__thumb__image; 7 | } 8 | 9 | .media__thumb__file { 10 | @extend .module__thumb__file; 11 | } 12 | 13 | .media__thumb__file__icon { 14 | @extend .module__thumb__file__icon; 15 | } 16 | -------------------------------------------------------------------------------- /src/patterns/media/media-upload.scss: -------------------------------------------------------------------------------- 1 | .media__upload__table { 2 | @extend .module__upload__table; 3 | } 4 | 5 | .media__upload__row { 6 | @extend .module__upload__row; 7 | } 8 | 9 | .media__upload__column--thumb { 10 | @extend .module__upload__column--thumb; 11 | } 12 | 13 | .media__upload__column--progress { 14 | @extend .module__upload__column--progress; 15 | } 16 | -------------------------------------------------------------------------------- /src/helpers/responsive.scss: -------------------------------------------------------------------------------- 1 | &.h-responsive-mobile-only { 2 | display: none !important; 3 | 4 | @include mq(s) { 5 | display: block !important; 6 | } 7 | } 8 | 9 | &.h-responsive-desktop-only { 10 | @include mq(s) { 11 | display: none !important; 12 | } 13 | &.grid__col { 14 | @include mq(s) { 15 | display: none !important; 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | ; This file is for unifying the coding style for different editors and IDEs. 2 | ; More information at http://editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_size = 4 9 | indent_style = space 10 | end_of_line = lf 11 | insert_final_newline = true 12 | trim_trailing_whitespace = true 13 | 14 | [{package.json}] 15 | indent_size = 2 16 | 17 | [*.md] 18 | trim_trailing_whitespace = false 19 | -------------------------------------------------------------------------------- /src/vendor/redactor.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Redactor II 3 | 4 | http://imperavi.com/redactor/ 5 | 6 | Copyright (c) 2009-2017, Imperavi Oy. 7 | License: http://imperavi.com/redactor/license/ 8 | */ 9 | 10 | @import "./redactor/variables"; 11 | @import "./redactor/mixins"; 12 | @import "./redactor/icons"; 13 | @import "./redactor/ui"; 14 | @import "./redactor/dropdown"; 15 | @import "./redactor/modal"; 16 | @import "./redactor/content"; 17 | 18 | -------------------------------------------------------------------------------- /src/blender.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | 3 | @import '~susy/sass/susy'; 4 | @import '~normalize-css/normalize'; 5 | @import '~datatables/media/css/jquery.dataTables'; 6 | @import '~jquery-confirm/css/jquery-confirm'; 7 | @import '~select2/dist/css/select2'; 8 | 9 | @import 'utility/**'; 10 | @import 'settings/**'; 11 | @import 'helpers/**'; 12 | @import 'base/**'; 13 | @import 'components/**'; 14 | @import 'patterns/**'; 15 | @import 'vendor/*'; 16 | @import 'views/**'; 17 | -------------------------------------------------------------------------------- /src/patterns/module/module.scss: -------------------------------------------------------------------------------- 1 | .module { 2 | padding: 1em 0; 3 | 4 | background: $white-off; 5 | 6 | & * { 7 | box-sizing: border-box; 8 | position: relative; 9 | } 10 | 11 | & :before, 12 | & :after { 13 | box-sizing: border-box; 14 | } 15 | 16 | & + & { 17 | margin-top: 2em; 18 | } 19 | } 20 | 21 | .module__actions { 22 | margin: 1em; 23 | 24 | .dz-drag-hover & { 25 | opacity: 1; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/vendor/blender-js.locationpicker.scss: -------------------------------------------------------------------------------- 1 | 2 | .locationpicker_map { 3 | width: 100%; 4 | height: 250px; 5 | margin: 1em 0; 6 | 7 | border: 2px solid color($gray, light); 8 | border-radius: border-radius(s); 9 | box-shadow: 0 3px rgba($black, .075); 10 | } 11 | 12 | .locationpicker_tools { 13 | margin-top: -2em; 14 | 15 | font-size: font-size(s); 16 | } 17 | 18 | .locationpicker_search { 19 | width: 15em !important; 20 | margin-right: .5em; 21 | } 22 | -------------------------------------------------------------------------------- /src/vendor/confirm.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Overrides on default confirm styles via Node 3 | */ 4 | 5 | 6 | 7 | .jconfirm-box { 8 | max-width: 15em; 9 | margin-right: auto; 10 | margin-left: auto; 11 | 12 | background-color: color($blue, lightest); 13 | 14 | .title { 15 | padding-top: 2em !important; 16 | 17 | text-align: center; 18 | } 19 | 20 | .buttons { 21 | float: none; 22 | padding-bottom: 3em !important; 23 | 24 | text-align: center; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/patterns/module/module-alert.scss: -------------------------------------------------------------------------------- 1 | .module__alert { 2 | display: flex; 3 | align-items: center; 4 | margin: 1em; 5 | padding: 1em; 6 | 7 | color: color($gray, dark); 8 | background: rgba(black, .05); 9 | border-radius: 3px; 10 | 11 | &.-error { 12 | color: color($red); 13 | background: color($red, lightest); 14 | } 15 | } 16 | 17 | .module__alert__message { 18 | flex-grow: 1; 19 | padding: .5em 0; 20 | } 21 | 22 | .module__alert__delete { 23 | color: inherit; 24 | border: 0; 25 | } 26 | -------------------------------------------------------------------------------- /src/patterns/module/module-upload.scss: -------------------------------------------------------------------------------- 1 | .module__upload__table { 2 | width: 100%; 3 | margin: 0; 4 | 5 | background-color: transparent; 6 | border-collapse: collapse; 7 | } 8 | 9 | .module__upload__row { 10 | background-color: transparent !important; 11 | border-bottom: 2px solid color($gray, lighter, .5) !important; 12 | } 13 | 14 | .module__upload__column--thumb { 15 | padding: .5em 1em .5em 2.5em; 16 | } 17 | 18 | .module__upload__column--progress { 19 | width: 100%; 20 | padding-right: 1em; 21 | padding-left: 0; 22 | } 23 | -------------------------------------------------------------------------------- /src/components/avatar.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | @include circle(2.5rem, inline-block); 3 | 4 | margin-right: .5em; 5 | overflow: hidden; 6 | vertical-align: middle; 7 | 8 | background-position: center center; 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | border: solid 2px color($gray, lighter); 12 | 13 | //variations 14 | &.-small { 15 | @include circle(1.5rem, inline-block); 16 | 17 | border-width: 1px; 18 | } 19 | 20 | &.-large { 21 | @include circle(5rem, inline-block); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/chart.scss: -------------------------------------------------------------------------------- 1 | .chart { 2 | display: block; 3 | width: 100%; 4 | height: auto; 5 | margin-bottom: 2em; 6 | } 7 | 8 | .chart__legend { 9 | width: auto; 10 | margin-bottom: 1em 0; 11 | padding: 1em; 12 | 13 | font-size: font-size(s); 14 | text-align: center; 15 | } 16 | 17 | .chart__legend__item { 18 | display: inline-block; 19 | margin: 0 1em; 20 | } 21 | 22 | .chart__legend__bullet { 23 | display: inline-block; 24 | width: 1em; 25 | height: 1em; 26 | margin-right: .5em; 27 | vertical-align: middle; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/status.scss: -------------------------------------------------------------------------------- 1 | .status { 2 | display: inline-block; 3 | margin-right: .5rem; 4 | margin-left: .5rem; 5 | vertical-align: middle; 6 | 7 | font-size: font-size(xxs); 8 | 9 | &.-on { 10 | color: color($green); 11 | } 12 | 13 | &.-off { 14 | color: color($gray); 15 | } 16 | 17 | &:first-child { 18 | margin-left: 0; 19 | } 20 | 21 | &:last-child { 22 | margin-right: 0; 23 | } 24 | 25 | h1 & { 26 | @include position-center-vertical; 27 | 28 | left: -1.5em; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/patterns/module/module-editor.scss: -------------------------------------------------------------------------------- 1 | .module__editor { 2 | display: flex; 3 | align-content: center; 4 | align-items: center; 5 | width: 100%; 6 | 7 | flex-wrap: wrap; 8 | 9 | &.-justified { 10 | & .module__editor__column { 11 | flex-grow: 1; 12 | } 13 | } 14 | 15 | &.-padded { 16 | padding: .75rem .5rem; 17 | } 18 | } 19 | 20 | .module__editor__column { 21 | display: flex; 22 | align-items: center; 23 | padding: .5em; 24 | 25 | &.-stretch { 26 | flex-grow: 1; 27 | } 28 | 29 | &.-stacked { 30 | display: block; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/vendor/dragula.scss: -------------------------------------------------------------------------------- 1 | .gu-mirror { 2 | position: fixed !important; 3 | margin: 0 !important; 4 | z-index: 9999 !important; 5 | 6 | color: color($gray); 7 | box-shadow: module(shadow); 8 | 9 | & * { 10 | box-sizing: border-box; 11 | position: relative; 12 | } 13 | 14 | & :before, 15 | & :after { 16 | box-sizing: border-box; 17 | } 18 | } 19 | 20 | .gu-hide { 21 | display: none !important; 22 | } 23 | 24 | .gu-unselectable { 25 | user-select: none !important; 26 | } 27 | 28 | .gu-transit { 29 | background-color: color($gray, lighter); 30 | opacity: .35; 31 | } 32 | -------------------------------------------------------------------------------- /src/patterns/media/media-table.scss: -------------------------------------------------------------------------------- 1 | .media__table { 2 | @extend .module__table; 3 | } 4 | 5 | .media__row { 6 | @extend .module__row; 7 | } 8 | 9 | .media__column--drag { 10 | @extend .module__column--drag; 11 | } 12 | 13 | .media__column--drag__icon { 14 | @extend .module__column--drag__icon; 15 | } 16 | 17 | .media__column--thumb { 18 | @extend .module__column--thumb; 19 | } 20 | 21 | .media__column--editor { 22 | @extend .module__column--editor; 23 | } 24 | 25 | .media__column--actions { 26 | @extend .module__column--actions; 27 | } 28 | 29 | .media__column--actions__icon { 30 | @extend .module__column__icon; 31 | } 32 | -------------------------------------------------------------------------------- /src/patterns/module/module-progress.scss: -------------------------------------------------------------------------------- 1 | .module__progress { 2 | @extend .progress; 3 | 4 | border-radius: 3px !important; 5 | } 6 | 7 | .module__progress__bar { 8 | position: absolute !important; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 2em; 13 | 14 | background-color: color($green); 15 | box-shadow: inset 0 2px rgba(color($gray), .15); 16 | 17 | transition: transform .5s linear; 18 | } 19 | 20 | .module__progress__name { 21 | position: absolute !important; 22 | top: 0; 23 | left: 0; 24 | width: 100%; 25 | padding: 0 .65em; 26 | z-index: 2; 27 | 28 | line-height: 2em; 29 | } 30 | -------------------------------------------------------------------------------- /src/helpers/states.scss: -------------------------------------------------------------------------------- 1 | .h-clickable { 2 | cursor: pointer; 3 | } 4 | 5 | .h-unselectable { 6 | user-select: none; 7 | -moz-user-select: -moz-none; 8 | -ms-user-select: none; 9 | -webkit-user-select: none; 10 | 11 | -khtml-user-select: none; 12 | } 13 | 14 | .h-hidden { 15 | display: none !important; 16 | visibility: hidden; 17 | } 18 | 19 | .h-hidden-visually { 20 | position: absolute; 21 | width: 1px; 22 | height: 1px; 23 | clip: rect(0 0 0 0); 24 | margin: -1px; 25 | padding: 0; 26 | overflow: hidden; 27 | 28 | border: 0; 29 | } 30 | 31 | .h-invisible { 32 | visibility: hidden; 33 | } 34 | -------------------------------------------------------------------------------- /src/components/pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | @include ul-horizontal(); 3 | 4 | margin: 2em 0 1em 0; 5 | 6 | font-size: font-size(s); 7 | text-align: center; 8 | 9 | li { 10 | margin: .15em; 11 | 12 | &.disabled { 13 | color: color($gray); 14 | } 15 | 16 | &.active { 17 | font-weight: font-weight(extrabold); 18 | } 19 | 20 | span, 21 | a { 22 | @include circle(2em); 23 | 24 | display: inline-block; 25 | 26 | border: none; 27 | } 28 | 29 | a:hover { 30 | background-color: color($blue, lightest); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/settings/typography.scss: -------------------------------------------------------------------------------- 1 | $font-families: ( 2 | sans : '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif', 3 | fixed : 'Consolas, "Liberation Mono", Menlo, Courier, monospace', 4 | icons: 'Fontawesome' 5 | ); 6 | $font-weights: ( 7 | thin : 100, 8 | light: 300, 9 | normal: 400, 10 | medium: 500, 11 | bold: 600, 12 | extrabold: 700, 13 | ); 14 | $font-sizes: ( 15 | xxs : .65rem, 16 | xs : .75rem, 17 | s: .85rem, 18 | default: 1rem, 19 | m: 1.2rem, 20 | l: 1.8rem, 21 | xl: 2.5rem, 22 | xxl: 4rem, 23 | ); 24 | $line-height: 1.5; 25 | -------------------------------------------------------------------------------- /src/patterns/module/module-button.scss: -------------------------------------------------------------------------------- 1 | .module__button { 2 | @extend .button.-blue; 3 | } 4 | 5 | .module__button--delete { 6 | @extend .button.-danger; 7 | 8 | float: right; 9 | } 10 | 11 | .module__button--debug { 12 | height: 2em; 13 | margin: 0; 14 | margin-left: .5em; 15 | padding: 0; 16 | 17 | color: color($red, light); 18 | background: none; 19 | border: 0; 20 | box-shadow: none; 21 | 22 | font-size: .8em; 23 | text-transform: uppercase; 24 | 25 | cursor: pointer; 26 | 27 | &:hover { 28 | color: color($red); 29 | } 30 | 31 | &:focus { 32 | outline: 0; 33 | } 34 | 35 | &:active { 36 | top: 0; 37 | 38 | box-shadow: none; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /webpack.config.babel.js: -------------------------------------------------------------------------------- 1 | import 'webpack'; 2 | import autoprefixer from 'autoprefixer'; 3 | import ExtractTextPlugin from 'extract-text-webpack-plugin'; 4 | import path from 'path'; 5 | 6 | module.exports = { 7 | entry: { 8 | 'blender': './src/blender.scss', 9 | }, 10 | output: { 11 | path: path.resolve(process.cwd(), 'dist'), 12 | filename: '[name].css', 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /\.scss$/, 18 | loader: ExtractTextPlugin.extract('raw!postcss!sass!import-glob'), 19 | } 20 | ], 21 | }, 22 | plugins: [ 23 | new ExtractTextPlugin('blender.css') 24 | ], 25 | postcss() { 26 | return [ autoprefixer ]; 27 | } 28 | }; 29 | 30 | -------------------------------------------------------------------------------- /src/vendor/modal.scss: -------------------------------------------------------------------------------- 1 | .modal { 2 | display: none; 3 | width: 400px; 4 | padding: 20px; 5 | 6 | background: #fff; 7 | border: 4px solid #afb0ad; 8 | border-radius: 3px; 9 | box-shadow: 0 2px 0 #505050; 10 | } 11 | 12 | .modal a.close-modal { 13 | display: block; 14 | position: absolute; 15 | top: -12.5px; 16 | right: -12.5px; 17 | width: 30px; 18 | height: 30px; 19 | 20 | background: url(close.png) no-repeat 0 0; 21 | 22 | text-indent: -9999px; 23 | } 24 | 25 | .modal-spinner { 26 | display: none; 27 | position: fixed; 28 | top: 50%; 29 | left: 50%; 30 | width: 64px; 31 | height: 64px; 32 | margin-top: -32px; 33 | margin-right: -32px; 34 | 35 | background: url(spinner.gif) #111 no-repeat center center; 36 | border-radius: 3px; 37 | } 38 | -------------------------------------------------------------------------------- /src/vendor/blender-js.progress.scss: -------------------------------------------------------------------------------- 1 | .progress { 2 | width: 100%; 3 | height: 2em; 4 | overflow: hidden; 5 | 6 | background-color: color($green, lightest); 7 | border-radius: 2em; 8 | } 9 | 10 | .progress_bar { 11 | height: 100%; 12 | 13 | background-color: color($green, light); 14 | border-top-left-radius: 1em; 15 | border-bottom-left-radius: 1em; 16 | 17 | transition: all .3s ease-in-out; 18 | } 19 | 20 | .-working { 21 | width: 2em; 22 | margin: 0 auto; 23 | 24 | border: solid 4px color($green, light); 25 | 26 | animation: bubble .6s infinite linear; 27 | 28 | .progress_bar { 29 | display: none; 30 | } 31 | } 32 | 33 | @keyframes bubble { 34 | from { 35 | opacity: 1; 36 | 37 | transform: scale(0); 38 | } 39 | to { 40 | opacity: 0; 41 | 42 | transform: scale(1); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/vendor/fileupload.scss: -------------------------------------------------------------------------------- 1 | @charset 'UTF-8'; 2 | /* 3 | * jQuery File Upload Plugin CSS 1.3.0 4 | * https://github.com/blueimp/jQuery-File-Upload 5 | * 6 | * Copyright 2013, Sebastian Tschan 7 | * https://blueimp.net 8 | * 9 | * Licensed under the MIT license: 10 | * http://www.opensource.org/licenses/MIT 11 | */ 12 | 13 | .fileinput-button { 14 | position: relative; 15 | overflow: hidden; 16 | } 17 | .fileinput-button input { 18 | position: absolute; 19 | top: 0; 20 | right: 0; 21 | margin: 0; 22 | 23 | opacity: 0; 24 | 25 | font-size: 200px; 26 | 27 | cursor: pointer; 28 | 29 | direction: ltr; 30 | -ms-filter: 'alpha(opacity=0)'; 31 | } 32 | 33 | /* Fixes for IE < 8 */ 34 | @media screen\9 { 35 | .fileinput-button input { 36 | height: 100%; 37 | 38 | filter: alpha(opacity=0); 39 | 40 | font-size: 100%; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/settings/settings.scss: -------------------------------------------------------------------------------- 1 | $susy: ( 2 | flow: ltr, 3 | math: fluid, 4 | output: float, 5 | gutter-position: after, 6 | container: 75em, 7 | container-position: center, 8 | columns: 12, 9 | gutters: .25, 10 | column-width: false, 11 | global-box-sizing: border-box, 12 | last-flow: to, 13 | ); 14 | $margins: ( 15 | xs: .5rem, 16 | s: 1rem, 17 | default: 2rem, 18 | m: 4rem, 19 | l: 8rem, 20 | xl: 16rem 21 | ); 22 | $breakpoints: ( 23 | s: (max-width: 640px), 24 | m: (max-width: 960px), 25 | l: (max-width: 1280px), 26 | s-v: (max-height: 640px), 27 | m-v: (max-height: 960px), 28 | l-v: (max-height: 1280px), 29 | ); 30 | $z-indexes: ( 31 | 'modal': 5000, 32 | 'toolbar': 2000, 33 | 'fixed': 500, 34 | 'above': 10, 35 | 'default': 1, 36 | 'below': -1, 37 | ); 38 | $border-radius: ( 39 | s: 3px, 40 | m: 7px, 41 | l: 15px, 42 | xl: 21px, 43 | ); 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@spatie/blender-css", 3 | "version": "5.0.3", 4 | "authors": [ 5 | "Willem Van Bockstal " 6 | ], 7 | "license": "MIT", 8 | "main": "dist/blender.css", 9 | "repository": { 10 | "type": "git", 11 | "url": "git@github.com:spatie-custom/blender-css.git" 12 | }, 13 | "scripts": { 14 | "build": "webpack", 15 | "prepublish": "npm run build" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^6.5.0", 19 | "babel-core": "^6.17.0", 20 | "babel-preset-es2015": "^6.16.0", 21 | "datatables": "^1.10.12", 22 | "extract-text-webpack-plugin": "^1.0.1", 23 | "import-glob-loader": "^1.1.0", 24 | "jquery-confirm": "^1.5.1", 25 | "node-sass": "^3.10.1", 26 | "normalize-css": "^2.3.1", 27 | "path": "^0.12.7", 28 | "postcss-loader": "^0.13.0", 29 | "raw-loader": "^0.5.1", 30 | "sass-loader": "^4.0.2", 31 | "select2": "^4.0.3", 32 | "style-loader": "^0.13.1", 33 | "susy": "^2.2.12", 34 | "webpack": "^1.12.11" 35 | }, 36 | "babel": { 37 | "presets": [ 38 | "es2015" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/components/breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | .breadcrumbs { 2 | min-height: 1.5em; 3 | margin-bottom: 2em; 4 | } 5 | 6 | .breadcrumb--back { 7 | display: inline-block; 8 | margin-right: 1em; 9 | 10 | font-size: font-size(xs); 11 | 12 | &:before { 13 | content: '\f104'; //angle-right 14 | 15 | display: inline-block; 16 | position: absolute; 17 | left: -1em; 18 | 19 | color: color($gray); 20 | border-bottom: none; 21 | opacity: .5; 22 | 23 | font-family: font-family(icons); 24 | } 25 | } 26 | 27 | .breadcrumb { 28 | @include ul-horizontal; 29 | 30 | color: color($gray); 31 | 32 | font-size: font-size(xs); 33 | list-style: none; 34 | 35 | li { 36 | padding-right: .5em; 37 | 38 | &:before { 39 | content: '\f105'; //angle-right 40 | 41 | display: inline-block; 42 | padding-right: .5em; 43 | 44 | opacity: .5; 45 | 46 | font-family: font-family(icons); 47 | } 48 | 49 | &:first-child:before { 50 | display: none; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /demo/images/svg/blender.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # The MIT License (MIT) 2 | 3 | Copyright (c) Spatie bvba 4 | 5 | > Permission is hereby granted, free of charge, to any person obtaining a copy 6 | > of this software and associated documentation files (the "Software"), to deal 7 | > in the Software without restriction, including without limitation the rights 8 | > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | > copies of the Software, and to permit persons to whom the Software is 10 | > furnished to do so, subject to the following conditions: 11 | > 12 | > The above copyright notice and this permission notice shall be included in 13 | > all copies or substantial portions of the Software. 14 | > 15 | > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | > THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/vendor/redactor/mixins.scss: -------------------------------------------------------------------------------- 1 | // MIXINS 2 | 3 | @mixin clearfix { 4 | &:after { 5 | content: ""; 6 | display: table; 7 | clear: both; 8 | } 9 | } 10 | @mixin transition-redactor($transition: all linear .2s) { 11 | -moz-transition: $transition; 12 | transition: $transition; 13 | } 14 | @mixin box-sizing-redactor($box-model) { 15 | -webkit-box-sizing: $box-model; 16 | -moz-box-sizing: $box-model; 17 | box-sizing: $box-model; 18 | } 19 | @mixin striped-redactor($color: rgba(255, 255, 255, .2), $angle: 45deg) { 20 | background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 21 | background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 22 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 23 | } 24 | @mixin animation-redactor($animation) { 25 | -webkit-animation: $animation; 26 | -o-animation: $animation; 27 | animation: $animation; 28 | } 29 | // keyframe 30 | @mixin keyframe($animation) { 31 | @-webkit-keyframes #{$animation} { 32 | @content; 33 | } 34 | 35 | @keyframes #{$animation} { 36 | @content; 37 | } 38 | } -------------------------------------------------------------------------------- /src/settings/colors.scss: -------------------------------------------------------------------------------- 1 | $red: ( 2 | lightest: #ffe9e2, 3 | lighter: #e69a9c, 4 | light: #f76b6e, 5 | default: #e83134, 6 | dark: #a32324, 7 | darker: #63010e, 8 | darkest: #3d0109, 9 | ); 10 | $orange: ( 11 | lightest: #ffe5ca, 12 | lighter: #f5b180, 13 | light: #e77636, 14 | default: #e14a0c, 15 | dark: #711f03, 16 | darker: #581902, 17 | darkest: #391102, 18 | ); 19 | $yellow: ( 20 | lightest: #f7e8d4, 21 | lighter: #f7d1a1, 22 | light: #f6d169, 23 | default: #fbbd1a, 24 | dark: #b06f1c, 25 | darker: #734d00, 26 | darkest: #422c00, 27 | ); 28 | $blue: ( 29 | lightest: #e5f4f8, 30 | lighter: #a7dceb, 31 | light: #73c7de, 32 | default: #007593, 33 | dark: #11727f, 34 | darker: #20365a, 35 | darkest: #262835, 36 | ); 37 | $green: ( 38 | lightest: #cce9e5, 39 | lighter: #bfe3de, 40 | light: #a9d6d0, 41 | default: #5ebbae, 42 | dark: #40988c, 43 | darker: #287368, 44 | darkest: #13463f, 45 | ); 46 | $gray: ( 47 | lightest: #f5f5f6, 48 | lighter: #d8d8da, 49 | light: #bbbbbe, 50 | default: #a19da1, 51 | dark: #6f6d70, 52 | darker: #413f40, 53 | darkest: #383737, 54 | ); 55 | $link: ( 56 | default: #007593, 57 | hover: #008caa, 58 | active: #007593, 59 | visited: #007593 60 | ); 61 | $black: #222; 62 | $white: #fff; 63 | $white-off: #f8f8f8; 64 | $text-color: #222; 65 | -------------------------------------------------------------------------------- /src/patterns/module/module-thumb.scss: -------------------------------------------------------------------------------- 1 | .module__thumb { 2 | display: inline-block; 3 | overflow: hidden; 4 | 5 | background: $white; 6 | border: 1px solid color($gray, lighter); 7 | border-radius: 5px; 8 | box-shadow: 1px 1px 2px color($gray, lightest); 9 | 10 | text-decoration: none; 11 | 12 | transition: transform .3s linear; 13 | 14 | 15 | &:hover, 16 | &:focus { 17 | outline: 0; 18 | 19 | & .module__thumb__image { 20 | opacity: .75; 21 | } 22 | 23 | & .module__thumb__file { 24 | color: color($gray, light); 25 | } 26 | } 27 | 28 | &.-ghost { 29 | width: module(thumb-width); 30 | height: module(thumb-width); 31 | 32 | border-style: dashed; 33 | } 34 | 35 | &.-is-disabled { 36 | filter: grayscale(100%); 37 | 38 | mix-blend-mode: multiply; 39 | 40 | & .module__thumb__image { 41 | opacity: .75; 42 | } 43 | } 44 | } 45 | 46 | .module__thumb__image { 47 | width: module(thumb-width); 48 | max-width: none; 49 | height: auto; 50 | vertical-align: middle; 51 | } 52 | 53 | .module__thumb__file { 54 | display: flex; 55 | align-items: center; 56 | width: module(thumb-width); 57 | height: module(thumb-width); 58 | 59 | color: color($gray); 60 | 61 | justify-content: center; 62 | } 63 | 64 | .module__thumb__file__icon { 65 | font-size: 1.5em; 66 | } 67 | -------------------------------------------------------------------------------- /src/utility/functions.scss: -------------------------------------------------------------------------------- 1 | @function mapping($map, $key, $parse: false) { 2 | @if not map-has-key($map, $key) { 3 | @return $key; 4 | } 5 | 6 | @if not $parse { 7 | @return map-get($map, $key); 8 | } 9 | @else { 10 | @return #{map-get($map, $key)}; 11 | } 12 | } 13 | 14 | @function strip-unit($value) { 15 | @return $value / ($value * 0 + 1); 16 | } 17 | 18 | @function str-replace($string, $search, $replace: '') { 19 | $index: str-index($string, $search); 20 | 21 | @if $index { 22 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 23 | } 24 | 25 | @return $string; 26 | } 27 | 28 | @function color($pallete, $key: 'default', $opacity: 1) { 29 | @return rgba(mapping($pallete, $key), $opacity); 30 | } 31 | 32 | @function font-size($key: 'default') { 33 | @return mapping($font-sizes, $key); 34 | } 35 | 36 | @function font-weight($key: 'normal') { 37 | @return mapping($font-weights, $key); 38 | } 39 | 40 | @function font-family($key: 'normal') { 41 | @return mapping($font-families, $key, true); 42 | } 43 | 44 | @function z-index($key: 'above') { 45 | @return mapping($z-indexes, $key); 46 | } 47 | 48 | @function border-radius($key: 'm') { 49 | @return mapping($border-radius, $key); 50 | } 51 | 52 | @function margins($key: 'default') { 53 | @return mapping($margins, $key); 54 | } 55 | 56 | @function module($key) { 57 | @return mapping($module, $key); 58 | } 59 | -------------------------------------------------------------------------------- /src/components/tabs.scss: -------------------------------------------------------------------------------- 1 | .tabs { 2 | margin: 1em -1.5em; 3 | padding: 0 1.5em 2em; 4 | 5 | border-bottom: solid 2px color($gray, lighter); 6 | } 7 | 8 | .tabs__menu { 9 | margin: 1em -1.5em 2em; 10 | 11 | font-size: font-size(s); 12 | font-weight: font-weight(bold); 13 | 14 | ul { 15 | @include ul-horizontal; 16 | 17 | display: block; 18 | padding: 0 0 0 1em; 19 | vertical-align: top; 20 | 21 | border-bottom: solid 2px color($gray, lighter); 22 | } 23 | 24 | li { 25 | margin: 0 .5em; 26 | vertical-align: bottom; 27 | 28 | background: color($gray, lightest); 29 | border: solid 2px color($gray, lightest); 30 | border-bottom: 0; 31 | border-radius: 2px 3px 0 0; 32 | 33 | a { 34 | color: color($gray); 35 | } 36 | 37 | &.ui-tabs-active, 38 | &.-active { 39 | bottom: -2px; 40 | 41 | border-color: color($gray, lighter); 42 | border-bottom: solid 2px $white; 43 | box-shadow: none; 44 | 45 | 46 | a { 47 | color: color($gray, darker); 48 | background: $white; 49 | 50 | font-weight: font-weight(extrabold); 51 | } 52 | } 53 | } 54 | 55 | a { 56 | display: inline-block; 57 | padding: .5em 1em; 58 | 59 | color: color($gray, dark); 60 | border-bottom: none; 61 | outline: none; 62 | 63 | &:hover { 64 | color: color($gray, darker); 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/patterns/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | margin-top: 5em; 3 | padding: 2em 0; 4 | 5 | color: color($gray, dark); 6 | background: color($gray, lightest); 7 | 8 | @include mq(s) { 9 | text-align: center; 10 | } 11 | 12 | a { 13 | color: inherit; 14 | border: none; 15 | 16 | text-decoration: none; 17 | 18 | &:hover { 19 | color: color($link, hover); 20 | } 21 | } 22 | } 23 | 24 | .footer__border { 25 | padding: .5em 0; 26 | //border-top: solid 2px color($gray, dark); 27 | } 28 | 29 | .footer__status { 30 | @include tag(color($green), color($green, lightest)); 31 | 32 | margin: 0 1em; 33 | 34 | font-size: font-size(s); 35 | 36 | 37 | &:before { 38 | display: inline-block; 39 | margin-right: .25em; 40 | 41 | font-family: font-family(icons); 42 | } 43 | 44 | //variations 45 | &.-non-production { 46 | &:before { 47 | content: '\f0ad'; 48 | } 49 | } 50 | &.-production { 51 | @include tag(color($orange), color($orange, lightest)); 52 | 53 | &:before { 54 | content: '\f072'; 55 | } 56 | } 57 | } 58 | 59 | .footer__version { 60 | float: left; 61 | 62 | font-size: font-size(s); 63 | text-align: left; 64 | 65 | @include mq(s) { 66 | float: none; 67 | } 68 | } 69 | 70 | .footer__colofon { 71 | float: right; 72 | 73 | font-size: font-size(s); 74 | text-align: center; 75 | 76 | @include mq(s) { 77 | float: none; 78 | } 79 | } 80 | 81 | .footer__brand { 82 | width: 1.5em; 83 | height: auto; 84 | vertical-align: middle; 85 | } 86 | -------------------------------------------------------------------------------- /src/vendor/redactor/variables.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------ 2 | // 3 | // VARIABLES 4 | // 5 | // 01. Breakpoints 6 | // 02. Baseline 7 | // 03. FontFamily 8 | // 04. FontSize 9 | // 05. Headings 10 | // 06. TextColors 11 | // 07. BackgroundColors 12 | // 13 | // ------------------------------------------------------------------ 14 | 15 | 16 | // =Breakpoints 17 | // ------------------------------------------------------------------ 18 | $breakpoint-small: 768px; 19 | 20 | 21 | // =Baseline 22 | // ------------------------------------------------------------------ 23 | $base-line: 24px; 24 | 25 | // =FontFamily 26 | // ------------------------------------------------------------------ 27 | $ui-font-family: font-family(sans); 28 | $content-font-family: $ui-font-family; 29 | $headings-font-family: $ui-font-family; 30 | $monospace-font-family: font-family(fixed); 31 | 32 | 33 | // =FontSize 34 | // ------------------------------------------------------------------ 35 | $font-size: 15px; 36 | 37 | 38 | // =Headings 39 | // ------------------------------------------------------------------ 40 | $font-size-h1: 40px; 41 | $font-size-h2: 32px; 42 | $font-size-h3: 24px; 43 | $font-size-h4: 18px; 44 | $font-size-h5: 16px; 45 | $font-size-h6: 14px; 46 | 47 | 48 | // =TextColors 49 | // ------------------------------------------------------------------ 50 | $body-color: $text-color; 51 | $headings-color: $text-color; 52 | $link-color: color($link); 53 | $link-hover-color: color($link, hover); 54 | 55 | 56 | // =BackgroundColors 57 | // ------------------------------------------------------------------ 58 | $body-background-color: #fff; 59 | $code-background-color: rgba(0, 0, 0, .05); 60 | $mark-background-color: #ffd61e; 61 | -------------------------------------------------------------------------------- /src/vendor/datatables.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Overrides on default datatables styles via Node 3 | camelCase, not standard Blender style 4 | */ 5 | 6 | 7 | [data-datatable] { 8 | display: none; //hide before load 9 | } 10 | 11 | .dataTables_wrapper { 12 | margin: 1em 0; 13 | 14 | @include mq(s) { 15 | margin: 1em 0; 16 | } 17 | 18 | [data-datatable] { 19 | display: table; //loaded 20 | } 21 | } 22 | 23 | table.dataTable { 24 | thead { 25 | .sorting:after, 26 | .sorting_desc:after, 27 | .sorting_asc:after { 28 | @include position-center-vertical; 29 | 30 | position: absolute; 31 | left: 0; 32 | 33 | font-family: font-family(icons); 34 | font-size: font-size(xs); 35 | } 36 | 37 | .sorting { 38 | background-image: none !important; 39 | 40 | &:after { 41 | content: '\f0dc'; 42 | 43 | color: color($gray, lighter); 44 | } 45 | } 46 | 47 | .sorting_desc { 48 | background-image: none !important; 49 | 50 | font-weight: font-weight(bold); 51 | &:after { 52 | content: '\f0dd'; 53 | } 54 | } 55 | 56 | .sorting_asc { 57 | background-image: none !important; 58 | 59 | font-weight: font-weight(bold); 60 | &:after { 61 | content: '\f0de'; 62 | } 63 | } 64 | } 65 | } 66 | 67 | .dataTables_info { 68 | color: color($gray, light) !important; 69 | 70 | font-size: font-size(s); 71 | text-align: left !important; 72 | } 73 | 74 | .dataTables_filter { 75 | float: right !important; 76 | padding-bottom: 1em; 77 | 78 | font-size: font-size(s); 79 | 80 | input[type=search] { 81 | border-radius: 1.5em; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/components/alert.scss: -------------------------------------------------------------------------------- 1 | .alerts { 2 | margin: 2em 0; 3 | } 4 | 5 | .alerts--fixed { 6 | position: fixed; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | margin: 0; 11 | z-index: z-index(fixed); 12 | 13 | opacity: .85; 14 | } 15 | 16 | 17 | .alert { 18 | padding: 1em; 19 | z-index: z-index(above); 20 | 21 | background: color($gray, lightest); 22 | border-right: 0; 23 | border-left: 5px solid; 24 | border-radius: border-radius(s); 25 | 26 | //variations 27 | &.-small { 28 | padding: .75em; 29 | 30 | font-size: font-size(s); 31 | } 32 | 33 | &.-inline { 34 | display: inline-block; 35 | } 36 | 37 | &.-invers { 38 | color: $white; 39 | background: rgba(color($blue, lightest) , .1); 40 | border-left-color: $white; 41 | } 42 | 43 | .form & { 44 | margin: .5em 0; 45 | padding: .65em 1em; 46 | 47 | font-size: font-size(s); 48 | } 49 | 50 | & + & { 51 | margin-top: .25em; 52 | } 53 | 54 | .alerts--fixed & { 55 | margin-top: 0; 56 | 57 | border-left-width: 0; 58 | border-radius: 0; 59 | 60 | text-align: center; 61 | } 62 | } 63 | 64 | .alert--warning { 65 | @extend .alert; 66 | 67 | color: color($orange); 68 | background: color($orange,lightest); 69 | border-left-color: color($orange); 70 | } 71 | 72 | .alert--danger, 73 | .alert--error { 74 | @extend .alert; 75 | 76 | color: color($red,dark); 77 | background: color($red, lightest); 78 | border-left-color: color($red,dark); 79 | } 80 | 81 | .alert--success { 82 | @extend .alert; 83 | 84 | color: color($green, dark); 85 | background: color($green, lightest); 86 | border-left-color: color($green, dark); 87 | } 88 | 89 | .alert--info { 90 | @extend .alert; 91 | 92 | color: color($blue); 93 | background: color($blue, lightest); 94 | border-left-color: color($blue); 95 | } 96 | -------------------------------------------------------------------------------- /src/components/button.scss: -------------------------------------------------------------------------------- 1 | a.button { 2 | line-height: 2.5em; 3 | } 4 | 5 | button, 6 | .button { 7 | display: inline-block; 8 | height: 2.5em; 9 | padding: 0 1em; 10 | vertical-align: middle; 11 | 12 | color: $white; 13 | background: color($green); 14 | border: transparent 1px solid; 15 | border-radius: border-radius(s); 16 | box-shadow: inset -1px -1px rgba($black, .15), 0 2px rgba($black, .075); 17 | filter: brightness(100%); 18 | 19 | font-weight: font-weight(bold); 20 | 21 | //state 22 | &:hover { 23 | color: $white; 24 | filter: brightness(95%); 25 | } 26 | 27 | &:active { 28 | top: 1px; 29 | 30 | border-color: transparent !important; 31 | box-shadow: inset 0 1px 0 rgba($black, .15); 32 | } 33 | 34 | &:focus { 35 | border-color: color($blue, light); 36 | outline: none; 37 | } 38 | 39 | &[disabled] { 40 | top: 0 !important; 41 | 42 | box-shadow: inset -1px -1px rgba($black, .15), 0 2px rgba($black, .075) !important; 43 | filter: none !important; 44 | opacity: .5; 45 | 46 | cursor: default; 47 | } 48 | 49 | 50 | //variations 51 | &.-small { 52 | height: 1.65em; 53 | padding: 0 .4em; 54 | 55 | font-size: font-size(s); 56 | line-height: 1.5em; 57 | } 58 | 59 | &.-warning { 60 | background: color($orange, light); 61 | } 62 | 63 | &.-danger { 64 | background: color($red); 65 | } 66 | 67 | &.-gray { 68 | background: rgba(black, .2); 69 | } 70 | 71 | &.-blue { 72 | background: color($blue, light); 73 | } 74 | 75 | //context 76 | & + & { 77 | margin-left: .5em; 78 | } 79 | } 80 | 81 | .button--delete-row { 82 | @extend .button.-small; 83 | 84 | color: color($gray, default, .5); 85 | background: none !important; 86 | border: none !important; 87 | box-shadow: none !important; 88 | 89 | &:hover { 90 | color: color($red); 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /src/base/form-check-radio.scss: -------------------------------------------------------------------------------- 1 | input[type=radio], 2 | input[type=checkbox] { 3 | width: 1.5em; 4 | height: 1.5em; 5 | margin-right: .75em; 6 | vertical-align: middle; 7 | 8 | border: 0; 9 | 10 | -webkit-appearance: none !important; 11 | -moz-appearance: $white; 12 | 13 | &:focus { 14 | outline: none; 15 | 16 | &:after { 17 | border: 2px solid color($gray); 18 | } 19 | } 20 | 21 | &:checked { 22 | &:before { 23 | transform: scale(1); 24 | } 25 | } 26 | 27 | &:after { 28 | content: ''; 29 | 30 | position: absolute; 31 | top: 0; 32 | left: 0; 33 | width: 1.5em; 34 | height: 1.5em; 35 | overflow: hidden; 36 | 37 | background: $white; 38 | border: 2px solid color($gray, light); 39 | box-shadow: inset 0 3px color($gray, default, .15), 0 3px rgba($black, .05); 40 | } 41 | 42 | &:before { 43 | position: absolute; 44 | z-index: 2; 45 | 46 | transform: scale(0); 47 | transition: transform .1s; 48 | } 49 | 50 | &[disabled] { 51 | &:after { 52 | background: rgba($text-color, .2); 53 | border-color: transparent; 54 | box-shadow: none !important; 55 | } 56 | } 57 | } 58 | 59 | input[type=checkbox] { 60 | &:after { 61 | border-radius: border-radius(s); 62 | } 63 | 64 | &:before { 65 | content: '\f00c'; //check 66 | 67 | width: 100%; 68 | 69 | color: color($green); 70 | 71 | font-family: font-family(icons); 72 | font-size: font-size(m); 73 | line-height: 1.5; 74 | text-align: center; 75 | } 76 | } 77 | 78 | input[type=radio] { 79 | &:after { 80 | border-radius: 100%; 81 | } 82 | 83 | &:before { 84 | content: ''; 85 | 86 | top: 6px; 87 | right: 6px; 88 | bottom: 6px; 89 | left: 6px; 90 | 91 | background: color($green); 92 | border-radius: 100%; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | [](https://supportukrainenow.org) 3 | 4 | # blender-css 5 | 6 | [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) 7 | 8 | These are the CSS files used by Blender CMS. 9 | 10 | ## Support us 11 | 12 | [](https://spatie.be/github-ad-click/blender-css) 13 | 14 | We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us). 15 | 16 | We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards). 17 | 18 | ## Installation 19 | 20 | This package is built for [Blender CMS](https://github.com/spatie-custom/blender) projects. 21 | 22 | Add it to the Laravel project via *Yarn*. 23 | 24 | ```cli 25 | yarn add @spatie/blender-css 26 | ``` 27 | 28 | ## Usage 29 | 30 | Include the package in your `back.scss`, and build with *Webpack* afterwards. 31 | 32 | ``` SCSS 33 | @charset 'UTF-8'; 34 | 35 | @import '@spatie/blender-css/dist/blender'; 36 | ``` 37 | 38 | ## Change log 39 | 40 | Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently. 41 | 42 | ## Contributing 43 | 44 | Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details. 45 | 46 | ## Security 47 | 48 | If you discover any security related issues, please email willem@spatie.be instead of using the issue tracker. 49 | 50 | ## Credits 51 | 52 | - [Willem Van Bockstal](https://github.com/willemvb) 53 | - [All Contributors](../../contributors) 54 | 55 | ## About Spatie 56 | Spatie is webdesign agency in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource). 57 | 58 | ## License 59 | 60 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information. 61 | -------------------------------------------------------------------------------- /src/patterns/grid.scss: -------------------------------------------------------------------------------- 1 | // usefull aliases: parent has minimum height of all floating children 2 | .grid__row, 3 | .clearfix { 4 | zoom: 1; 5 | &:before, 6 | &:after { 7 | content: ''; 8 | 9 | display: table; 10 | } 11 | &:after { 12 | clear: both; 13 | } 14 | } 15 | 16 | 17 | //default grid classes 18 | .grid { 19 | @include container(); 20 | // When in flexbox parent, we need width 21 | 22 | width: 100%; 23 | padding: 0 2em; 24 | 25 | 26 | &.-full-page { 27 | min-height: 100vh; 28 | } 29 | } 30 | 31 | .grid__col { 32 | &.-width-1\/6 { 33 | @include span(2); 34 | 35 | @include mq(s) { 36 | @include block-reset; 37 | } 38 | } 39 | &.-width-5\/6 { 40 | @include span(10); 41 | 42 | @include mq(s) { 43 | @include block-reset; 44 | } 45 | } 46 | 47 | &.-width-1\/4 { 48 | @include span(3); 49 | 50 | @include mq(s) { 51 | @include block-reset; 52 | } 53 | } 54 | 55 | &.-width-3\/4 { 56 | @include span(9); 57 | 58 | @include mq(m) { 59 | @include block-reset; 60 | } 61 | } 62 | 63 | &.-width-1\/3 { 64 | @include span(4); 65 | 66 | @include mq(s) { 67 | @include block-reset; 68 | } 69 | } 70 | 71 | &.-width-2\/3 { 72 | @include span(8); 73 | 74 | @include mq(s) { 75 | @include block-reset; 76 | } 77 | } 78 | 79 | &.-width-2\/3-centered { 80 | @include push(2); 81 | @include span(8); 82 | 83 | @include mq(s) { 84 | @include block-reset; 85 | } 86 | } 87 | 88 | &.-width-1\/2 { 89 | @include span(6); 90 | 91 | @include mq(s) { 92 | @include span(12); 93 | } 94 | @include mq(s) { 95 | @include block-reset; 96 | } 97 | } 98 | 99 | 100 | &.-last { 101 | @include last; 102 | } 103 | 104 | &.-push-1\/4 { 105 | @include push(3); 106 | 107 | @include mq(m) { 108 | @include push(0); 109 | } 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/vendor/select2.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Overrides on default confirm styles via Node 3 | */ 4 | .select2 { 5 | width: 100% !important; 6 | } 7 | 8 | 9 | //tags 10 | 11 | .select2-container--default .select2-selection--multiple, 12 | .select2-container--default .select2-selection--single { 13 | height: auto; 14 | min-height: 2.5em; 15 | padding: 0 .35em; 16 | 17 | border: 2px solid color($gray, light); 18 | border-radius: border-radius(s); 19 | box-shadow: inset 0 3px rgba(color($gray), .15), 0 3px rgba($black, .075); 20 | outline: none !important; 21 | } 22 | 23 | 24 | .select2-container--default .select2-selection--single .select2-selection__rendered { 25 | line-height: 2.5em; 26 | } 27 | 28 | .select2-container--default .select2-selection--single .select2-selection__arrow { 29 | height: 100%; 30 | } 31 | 32 | .select2-container--default .select2-search--dropdown .select2-search__field { 33 | border: 2px solid color($blue, light); 34 | border-radius: border-radius(s); 35 | box-shadow: inset 0 3px rgba(color($gray), .15), 0 3px rgba($black, .075); 36 | } 37 | 38 | .select2-container--default.select2-container--focus .select2-selection--multiple, 39 | .select2-container--default.select2-container--focus .select2-selection--single { 40 | border: 2px solid color($blue, light); 41 | } 42 | 43 | .select2-container--default .select2-selection--multiple .select2-selection__choice { 44 | margin-top: 8px; 45 | 46 | background: color($blue, lightest); 47 | border: none; 48 | } 49 | 50 | .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { 51 | vertical-align: middle; 52 | 53 | color: rgba(color($blue, dark), .4); 54 | 55 | &:hover { 56 | color: color($red, light); 57 | } 58 | } 59 | 60 | .select2-container--default .select2-search--inline .select2-search__field { 61 | height: auto; 62 | padding: 0; 63 | 64 | box-shadow: none; 65 | } 66 | 67 | .select2-dropdown { 68 | background: #fff; 69 | border: 2px solid color($gray, light); 70 | border-radius: border-radius(s); 71 | box-shadow: 0 1px 20px rgba(0, 0, 0, .25); 72 | 73 | font-size: font-size(s); 74 | } 75 | 76 | .select2-container--default .select2-results__option[aria-selected=true] { 77 | background-color: color($blue, lightest); 78 | } 79 | 80 | 81 | .select2-container--default .select2-results__option--highlighted[aria-selected] { 82 | background-color: color($blue); 83 | } 84 | -------------------------------------------------------------------------------- /src/views/auth.scss: -------------------------------------------------------------------------------- 1 | .v-auth { 2 | @include background-image-tinted('/images/auth-background.jpg' , rgba($white, .9), top center); 3 | 4 | display: flex; 5 | align-items: center; 6 | min-height: 100vh; 7 | 8 | color: $text-color; 9 | 10 | justify-content: space-around; 11 | 12 | @include mq(s) { 13 | display: block; 14 | } 15 | } 16 | 17 | .v-auth__card { 18 | width: 50vw; 19 | 20 | @include mq(s) { 21 | position: relative; 22 | top: 2em; 23 | left: 5vw; 24 | width: 90vw; 25 | } 26 | } 27 | 28 | .v-auth__gravatar { 29 | position: absolute; 30 | top: -3em; 31 | left: 50%; 32 | 33 | filter: sepia(1) hue-rotate(170deg) saturate(.5); 34 | opacity: .25; 35 | 36 | transform: translateX(-50%); 37 | } 38 | 39 | .v-auth__logo { 40 | top: -.1em; 41 | width: auto; 42 | height: 2em; 43 | vertical-align: middle; 44 | } 45 | 46 | .v-auth__title { 47 | max-width: 10em; 48 | margin-right: auto; 49 | margin-bottom: 2rem; 50 | margin-left: auto; 51 | 52 | font-size: font-size(m); 53 | font-weight: font-weight(extrabold); 54 | text-align: center; 55 | text-transform: uppercase; 56 | 57 | @include mq(s) { 58 | font-size: 6vw; 59 | } 60 | 61 | &.-small { 62 | max-width: none; 63 | } 64 | } 65 | 66 | .v-auth__form { 67 | max-width: 32em; 68 | margin-right: auto; 69 | margin-left: auto; 70 | padding: 3em; 71 | 72 | background-color: rgba($white, .5); 73 | border-radius: border-radius(s); 74 | box-shadow: 0 0 20px rgba(0,0,0,.03); 75 | 76 | [disabled] { 77 | color: $white; 78 | } 79 | } 80 | 81 | 82 | .v-auth__lang { 83 | position: fixed; 84 | top: 1em; 85 | right: 1em; 86 | z-index: z-index(toolbar); 87 | 88 | font-size: font-size(xs); 89 | 90 | ul { 91 | @include ul_horizontal; 92 | } 93 | 94 | a { 95 | padding: 0 .25em; 96 | 97 | border-bottom: none; 98 | 99 | text-transform: uppercase; 100 | } 101 | 102 | .-active, 103 | .active { 104 | font-weight: font-weight(bold); 105 | } 106 | } 107 | 108 | .v-auth__credit { 109 | position: fixed; 110 | bottom: 3px; 111 | left: 3px; 112 | z-index: z-index(above); 113 | 114 | opacity: .15; 115 | 116 | font-size: font-size(xs); 117 | font-weight: font-weight(medium); 118 | 119 | transform: rotate(-90deg); 120 | transform-origin: 0 0 ; 121 | } 122 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All Notable changes to `blender-css` will be documented in this file 4 | 5 | ## 5.0.3 - 2017-09-19 6 | - Change Redactor dropdown styles 7 | 8 | ## 5.0.2 - 2017-09-19 9 | - Change Redactor selected image color 10 | 11 | ## 5.0.0 - 2017-09-19 12 | - Update styles for Redactor II v2.10 13 | 14 | ## 4.0.3 - 2017-01-31 15 | - Add `label--required` 16 | 17 | ## 4.0.2 - 2017-01-31 18 | - Update demo page 19 | 20 | ## 4.0.1 - 2017-01-31 21 | - Change `v-auth` centering from transform to flex 22 | 23 | ## 4.0.0 - 2017-01-27 24 | - Change the classes for `alert` variations — following @spatie/scss naming 25 | 26 | ## 3.1.5 - 2017-01-13 27 | - Add `display: block` on `.chart` 28 | 29 | ## 3.1.4 - 2017-01-13 30 | - Add `module__column.-tight` 31 | 32 | ## 3.1.3 - 2017-01-13 33 | - `input[type=datetime]` width 34 | 35 | ## 3.1.2 - 2017-01-13 36 | - `input[type=date]` width 37 | 38 | ## 3.1.1 - 2017-01-10 39 | - `.grid` in flexbox needs width 40 | 41 | ## 3.1.0 - 2017-01-10` 42 | - Changed `label__lang`, `label--lang` for BEM conformity 43 | 44 | ## 3.0.3 - 2017-01-10 45 | - Added `button--delete-row` 46 | 47 | ## 3.0.2 - 2017-01-09 48 | - `label_lang` can now be used for text inputs 49 | - Added `-padded` option to `module__editor` 50 | 51 | ## 3.0.0 - 2016-12-19 52 | - Scoped name 53 | - Include media & module css 54 | - Redactor stickyness 55 | - Small improvements 56 | 57 | ## 2.0.6 58 | - `-is-disabled` class for table rows 59 | - Changed red lightest 60 | 61 | ## 2.0.4 - 2016-11-30 62 | - Remove exception for disabled label 63 | 64 | ## 2.0.3 - 2016-11-30 65 | - Regenerate dist for media updates 66 | 67 | ## 2.0.2 - 2016-11-17 68 | - Blender media update 69 | 70 | ## 2.0.1 - 2016-11-17 71 | - Blender media dependency 72 | 73 | ## 2.0.0 - 2016-11-15 74 | - Change front favicon size and class name 75 | 76 | ## 1.2.3 - 2016-10-26 77 | - Stick footer to bottom on short pages 78 | 79 | ## 1.2.2 - 2016-10-21 80 | - Updated cursor for disabled buttons 81 | 82 | ## 1.2.1 - 2016-10-21 83 | - Added disabled state for buttons 84 | 85 | ## 1.2.0 - 2016-10-20 86 | - Added margin & padding helpers 87 | 88 | ## 1.1.3 - 2016-10-20 89 | - Added `remark` variation to `table` 90 | 91 | ## 1.1.2 - 2016-10-19 92 | - Simpler footer 93 | 94 | ## 1.1.1 - 2016-10-19 95 | - Better tabs alignment 96 | 97 | ## 1.1.0 - 2016-10-19 98 | - Add back breadcrumb 99 | - Better status alignment in titles 100 | 101 | ## 1.0.0 - 2016-10-13 102 | - Initial release 103 | 104 | ## 0.0.3 - 2016-10-13 105 | 106 | ### Added 107 | - Demo page 108 | 109 | ## 0.0.2 - 2016-10-03 110 | 111 | ### Changed 112 | - Output filename 113 | 114 | ## 0.0.1 - 2016-10-03 115 | 116 | ### Added 117 | - Experimental release 118 | 119 | -------------------------------------------------------------------------------- /src/helpers/margin.scss: -------------------------------------------------------------------------------- 1 | .h-margin { 2 | margin: margins(default) !important; 3 | } 4 | 5 | .h-margin-small { 6 | margin: margins(s) !important; 7 | } 8 | 9 | .h-margin-medium { 10 | margin: margins(m) !important; 11 | } 12 | 13 | .h-margin-large { 14 | margin: margins(l) !important; 15 | } 16 | 17 | .h-margin-left { 18 | margin-left: margins(default) !important; 19 | } 20 | 21 | .h-margin-left-small { 22 | margin-left: margins(s) !important; 23 | } 24 | 25 | .h-margin-left-medium { 26 | margin-left: margins(m) !important; 27 | } 28 | 29 | .h-margin-left-large { 30 | margin-left: margins(l) !important; 31 | } 32 | 33 | .h-margin-right { 34 | margin-right: margins(default) !important; 35 | } 36 | 37 | .h-margin-right-small { 38 | margin-right: margins(s) !important; 39 | } 40 | 41 | .h-margin-right-medium { 42 | margin-right: margins(m) !important; 43 | } 44 | 45 | .h-margin-right-large { 46 | margin-right: margins(l) !important; 47 | } 48 | 49 | .h-margin-horizontal { 50 | margin-right: margins(default) !important; 51 | margin-left: margins(default) !important; 52 | } 53 | 54 | .h-margin-horizontal-small { 55 | margin-right: margins(s) !important; 56 | margin-left: margins(s) !important; 57 | } 58 | 59 | .h-margin-horizontal-medium { 60 | margin-right: margins(m) !important; 61 | margin-left: margins(m) !important; 62 | } 63 | 64 | .h-margin-horizontal-large { 65 | margin-right: margins(l) !important; 66 | margin-left: margins(l) !important; 67 | } 68 | 69 | .h-margin-top { 70 | margin-top: margins(default) !important; 71 | } 72 | 73 | .h-margin-top-small { 74 | margin-top: margins(s) !important; 75 | } 76 | 77 | .h-margin-top-medium { 78 | margin-top: margins(m) !important; 79 | } 80 | 81 | .h-margin-top-large { 82 | margin-top: margins(l) !important; 83 | } 84 | 85 | .h-margin-bottom { 86 | margin-bottom: margins(default) !important; 87 | } 88 | 89 | .h-margin-bottom-small { 90 | margin-bottom: margins(s) !important; 91 | } 92 | 93 | .h-margin-bottom-medium { 94 | margin-bottom: margins(m) !important; 95 | } 96 | 97 | .h-margin-bottom-large { 98 | margin-bottom: margins(l) !important; 99 | } 100 | 101 | .h-margin-vertical { 102 | margin-top: margins(default) !important; 103 | margin-bottom: margins(default) !important; 104 | } 105 | 106 | .h-margin-vertical-small { 107 | margin-top: margins(s) !important; 108 | margin-bottom: margins(s) !important; 109 | } 110 | 111 | .h-margin-vertical-medium { 112 | margin-top: margins(m) !important; 113 | margin-bottom: margins(m) !important; 114 | } 115 | 116 | .h-margin-vertical-large { 117 | margin-top: margins(l) !important; 118 | margin-bottom: margins(l) !important; 119 | } 120 | -------------------------------------------------------------------------------- /src/helpers/padding.scss: -------------------------------------------------------------------------------- 1 | .h-padding { 2 | padding: margins(default) !important; 3 | } 4 | 5 | .h-padding-small { 6 | padding: margins(s) !important; 7 | } 8 | 9 | .h-padding-medium { 10 | padding: margins(m) !important; 11 | } 12 | 13 | .h-padding-large { 14 | padding: margins(l) !important; 15 | } 16 | 17 | .h-padding-left { 18 | padding-left: margins(default) !important; 19 | } 20 | 21 | .h-padding-left-small { 22 | padding-left: margins(s) !important; 23 | } 24 | 25 | .h-padding-left-medium { 26 | padding-left: margins(m) !important; 27 | } 28 | 29 | .h-padding-left-large { 30 | padding-left: margins(l) !important; 31 | } 32 | 33 | .h-padding-right { 34 | padding-right: margins(default) !important; 35 | } 36 | 37 | .h-padding-right-small { 38 | padding-right: margins(s) !important; 39 | } 40 | 41 | .h-padding-right-medium { 42 | padding-right: margins(m) !important; 43 | } 44 | 45 | .h-padding-right-large { 46 | padding-right: margins(l) !important; 47 | } 48 | 49 | .h-padding-horizontal { 50 | padding-right: margins(default) !important; 51 | padding-left: margins(default) !important; 52 | } 53 | 54 | .h-padding-horizontal-small { 55 | padding-right: margins(s) !important; 56 | padding-left: margins(s) !important; 57 | } 58 | .h-padding-horizontal-medium { 59 | padding-right: margins(m) !important; 60 | padding-left: margins(m) !important; 61 | } 62 | 63 | .h-padding-horizontal-large { 64 | padding-right: margins(l) !important; 65 | padding-left: margins(l) !important; 66 | } 67 | 68 | .h-padding-top { 69 | padding-top: margins(default) !important; 70 | } 71 | 72 | .h-padding-top-small { 73 | padding-top: margins(s) !important; 74 | } 75 | 76 | .h-padding-top-medium { 77 | padding-top: margins(m) !important; 78 | } 79 | 80 | .h-padding-top-large { 81 | padding-top: margins(l) !important; 82 | } 83 | 84 | .h-padding-bottom { 85 | padding-bottom: margins(default) !important; 86 | } 87 | 88 | .h-padding-bottom-small { 89 | padding-bottom: margins(s) !important; 90 | } 91 | 92 | .h-padding-bottom-medium { 93 | padding-bottom: margins(m) !important; 94 | } 95 | 96 | .h-padding-bottom-large { 97 | padding-bottom: margins(l) !important; 98 | } 99 | 100 | .h-padding-vertical { 101 | padding-top: margins(default) !important; 102 | padding-bottom: margins(default) !important; 103 | } 104 | 105 | .h-padding-vertical-small { 106 | padding-top: margins(s) !important; 107 | padding-bottom: margins(s) !important; 108 | } 109 | 110 | .h-padding-vertical-medium { 111 | padding-top: margins(m) !important; 112 | padding-bottom: margins(m) !important; 113 | } 114 | 115 | .h-padding-vertical-large { 116 | padding-top: margins(l) !important; 117 | padding-bottom: margins(l) !important; 118 | } 119 | -------------------------------------------------------------------------------- /src/patterns/module/module-table.scss: -------------------------------------------------------------------------------- 1 | .module__table { 2 | width: 100%; 3 | margin: 0; 4 | 5 | background-color: transparent; 6 | border-collapse: collapse; 7 | } 8 | 9 | .module__row { 10 | background-color: transparent !important; 11 | border-bottom: 2px solid color($gray, lighter, .5) !important; 12 | 13 | &.-is-disabled { 14 | background-color: color($red, lightest) !important; 15 | border-color: darken(color($red, lightest), 2%) !important; 16 | } 17 | 18 | &.gu-mirror { 19 | background-color: color($blue, lightest) !important; 20 | border-color: color($blue, lighter) !important; 21 | } 22 | 23 | .gu-transit & { 24 | background: transparent !important; 25 | } 26 | } 27 | 28 | .module__column { 29 | padding: .5em; 30 | 31 | &.-stretch { 32 | width: 100%; 33 | } 34 | 35 | &.-tight { 36 | width: 1%; 37 | 38 | white-space: nowrap; 39 | } 40 | 41 | &.-no-wrap { 42 | white-space: nowrap; 43 | } 44 | } 45 | 46 | .module__column--drag { 47 | padding: .5em; 48 | vertical-align: middle; 49 | 50 | text-align: center; 51 | } 52 | 53 | .module__column--drag__icon { 54 | color: color($gray, light); 55 | 56 | cursor: grab; 57 | 58 | .gu-mirror &, 59 | &:hover { 60 | color: color($blue, light); 61 | } 62 | 63 | &:before { 64 | /*provide more 'grab' area */ 65 | padding: 1em .5em; 66 | } 67 | 68 | &.-is-disabled { 69 | visibility: hidden; 70 | } 71 | } 72 | 73 | .module__column--thumb { 74 | width: module(thumb-width); 75 | padding: .5em 0; 76 | vertical-align: middle; 77 | } 78 | 79 | .module__column--editor { 80 | width: 100%; 81 | padding: 0 .5em; 82 | vertical-align: middle; 83 | 84 | &.-active { 85 | padding: 0 2em 0 1em; 86 | 87 | fieldset, 88 | legend, 89 | .module { 90 | background-color: darken($white-off, 3%); 91 | } 92 | 93 | .module__column--editor__close { 94 | position: sticky; 95 | top: 0; 96 | right: 0; 97 | margin-right: -1em; 98 | padding-top: .5em; 99 | 100 | text-align: right; 101 | } 102 | } 103 | } 104 | 105 | .module__column--actions { 106 | width: 1%; 107 | padding: 0 1em; 108 | vertical-align: middle; 109 | 110 | text-align: right; 111 | white-space: nowrap; 112 | } 113 | 114 | .module__column__icon { 115 | display: inline-block; 116 | width: 1em; 117 | 118 | color: color($gray, default, .5); 119 | border: 0; 120 | 121 | &.-delete { 122 | &:hover { 123 | color: color($red); 124 | } 125 | } 126 | 127 | &.-restore { 128 | color: color($red, light); 129 | 130 | &:hover { 131 | color: color($red); 132 | } 133 | } 134 | 135 | &:hover, 136 | &:focus { 137 | color: color($gray, dark, .5); 138 | outline: 0; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /src/patterns/menu.scss: -------------------------------------------------------------------------------- 1 | .menu { 2 | margin-bottom: 2em; 3 | 4 | background: color($gray, lightest); 5 | 6 | li { 7 | &.-active > a { 8 | color: color($gray, darker); 9 | 10 | font-weight: font-weight(extrabold); 11 | } 12 | } 13 | 14 | a { 15 | display: inline-block; 16 | 17 | color: color($gray, dark); 18 | border-bottom: none; 19 | 20 | &:hover { 21 | color: color($link); 22 | } 23 | } 24 | } 25 | 26 | .menu__home__dashboard__icon { 27 | display: inline-block; 28 | width: 16px; 29 | height: 16px; 30 | margin-right: .15em; 31 | vertical-align: middle; 32 | 33 | background-image: url('/favicon-32x32.png'); 34 | background-repeat: no-repeat; 35 | background-size: contain; 36 | } 37 | 38 | .menu__log-out { 39 | @include circle(1.5rem); 40 | 41 | padding: 0; 42 | overflow: hidden; 43 | vertical-align: middle; 44 | 45 | color: color($gray, dark); 46 | background-color: $white; 47 | box-shadow: none !important; 48 | 49 | &:hover { 50 | color: color($orange) !important; 51 | background-color: $white; 52 | filter: none; 53 | } 54 | } 55 | 56 | 57 | .menu__home { 58 | float: left; 59 | padding: 1.5em 0; 60 | z-index: 2; 61 | 62 | font-size: .85rem; 63 | } 64 | 65 | .menu__home__dashboard { 66 | margin-right: 1.5em; 67 | } 68 | 69 | .menu__home__front { 70 | padding-left: 1.5em; 71 | } 72 | 73 | .menu__home__front__protocol { 74 | position: absolute; 75 | top: 0; 76 | left: 0; 77 | padding-left: .35em; 78 | 79 | color: color($gray, lighter); 80 | } 81 | 82 | .menu__home__front__host, 83 | .menu__home__front__protocol { 84 | @include mq(m) { 85 | display: none !important; 86 | } 87 | } 88 | 89 | .menu__user { 90 | padding: 1.5em 0; 91 | 92 | font-size: font-size(s); 93 | text-align: right; 94 | 95 | @include mq(s) { 96 | text-align: right; 97 | } 98 | 99 | ul { 100 | @include ul-horizontal; 101 | } 102 | 103 | li { 104 | padding-left: 2em; 105 | 106 | @include mq(s) { 107 | padding: 0 .5em; 108 | 109 | font-size: .85em; 110 | } 111 | } 112 | } 113 | 114 | .menu__groups { 115 | display: flex; 116 | padding: 1em 0; 117 | overflow-x: auto; 118 | 119 | font-size: font-size(s); 120 | 121 | @include mq(m) { 122 | margin: 0 -2em; 123 | } 124 | } 125 | 126 | .menu__group { 127 | display: block; 128 | flex-shrink: 0; 129 | padding: 0 4em 0 1em; 130 | vertical-align: top; 131 | 132 | border-left: solid color($gray, lighter) 2px; 133 | 134 | font-weight: font-weight(medium); 135 | 136 | ul { 137 | @include ul-clean; 138 | } 139 | 140 | a { 141 | display: inline-block; 142 | 143 | color: $text-color; 144 | border-bottom: none; 145 | 146 | line-height: 1.7; 147 | 148 | &:hover { 149 | color: color($link); 150 | } 151 | } 152 | 153 | &:before { 154 | content: attr(data-menu-group); 155 | 156 | display: block; 157 | margin: 0 0 .25em 0; 158 | 159 | color: color($gray, light); 160 | 161 | font-size: .75em; 162 | font-weight: font-weight(extrabold); 163 | text-transform: uppercase; 164 | } 165 | } 166 | 167 | .menu__group__title { 168 | margin: 0 0 .25em 0; 169 | 170 | color: color($gray, light); 171 | 172 | font-size: .75em; 173 | font-weight: font-weight(extrabold); 174 | text-transform: uppercase; 175 | } 176 | -------------------------------------------------------------------------------- /src/components/table.scss: -------------------------------------------------------------------------------- 1 | table, 2 | table.dataTable { 3 | width: 100%; 4 | margin: 2em 0 1em; 5 | 6 | border-bottom: none !important; //datatables override 7 | 8 | caption { 9 | @include font(sans, bold); 10 | @include font-size(m); 11 | 12 | text-align: left; 13 | } 14 | 15 | thead { 16 | th { 17 | padding: .5em 1em; 18 | 19 | border-bottom: solid 2px color($gray, lighter) !important; 20 | outline: none; 21 | 22 | font-size: font-size(s); 23 | font-weight: font-weight(500); 24 | text-align: left; 25 | text-transform: uppercase; 26 | } 27 | } 28 | 29 | tbody { 30 | tr { 31 | &.-added:nth-child(odd) { 32 | background: color($green, lightest) !important; 33 | } 34 | &.-added:nth-child(even) { 35 | background: lighten(color($green, lightest), 3%) !important; 36 | } 37 | &.-is-disabled { 38 | background: color($red, lightest) !important; 39 | } 40 | } 41 | 42 | tr:last-child td { 43 | border-bottom-color: color( $gray, lighter); 44 | } 45 | 46 | tr:nth-child(odd) { 47 | background-color: color($gray, lightest); 48 | } 49 | 50 | td { 51 | padding: .5em 1em; 52 | vertical-align: middle; 53 | 54 | border-bottom: 2px transparent solid; 55 | 56 | //variations 57 | &.-small { 58 | font-size: font-size(s); 59 | } 60 | &.-center { 61 | text-align: center; 62 | } 63 | &.-right { 64 | text-align: right; 65 | } 66 | &.-remark { 67 | color: color($gray, dark); 68 | 69 | font-size: font-size(xs); 70 | font-style: italic,; 71 | } 72 | } 73 | } 74 | 75 | 76 | //variations 77 | &.-compact { 78 | td, 79 | th { 80 | padding: .25em 1em; 81 | 82 | font-size: font-size(s); 83 | } 84 | } 85 | 86 | &.-sortable { 87 | th:first-child { 88 | padding-left: 2rem; 89 | } 90 | 91 | tbody tr { 92 | cursor: move; 93 | 94 | &[data-sortable='disabled'] { 95 | cursor: default; 96 | td:first-child:before { 97 | display: none; 98 | } 99 | } 100 | 101 | &.ui-sortable-helper { 102 | box-shadow: 0 1px 20px rgba(0, 0, 0, .25); 103 | opacity: .85; 104 | td { 105 | background-color: color($blue, lightest); 106 | border-bottom-color: transparent !important; 107 | } 108 | } 109 | 110 | &.ui-sortable-placeholder td { 111 | height: 2rem !important; 112 | } 113 | } 114 | 115 | td:first-child { 116 | padding-left: 0; 117 | 118 | white-space: nowrap; 119 | 120 | &:first-child:before { 121 | content: '\f07d'; 122 | 123 | display: inline-block; 124 | width: 2rem; 125 | 126 | color: color($gray, dark); 127 | 128 | font-family: font-family(icons); 129 | font-size: font-size(s); 130 | text-align: center; 131 | } 132 | } 133 | 134 | td.dataTables_empty:before { 135 | display: none !important; 136 | padding: 2em 0 !important; 137 | 138 | cursor: default; 139 | } 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /src/base/html-tag.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | position: relative; 4 | 5 | &:after, 6 | &:before { 7 | box-sizing: border-box; 8 | } 9 | } 10 | 11 | html { 12 | background: $white; 13 | } 14 | 15 | body { 16 | @include antialiasing(subpixel); 17 | @include font(sans, normal); 18 | 19 | display: flex; 20 | flex-direction: column; 21 | min-height: 100vh; 22 | 23 | color: $text-color; 24 | 25 | line-height: $line-height; 26 | 27 | @include mq(l) { 28 | font-size: font-size(default); 29 | } 30 | } 31 | 32 | h1, 33 | h2, 34 | h3 { 35 | @include hyphens(false); 36 | 37 | margin-top: 0; 38 | 39 | line-height: 1.2; //smaller line height for titles 40 | 41 | p + &, 42 | ul + &, 43 | ol + &, 44 | form + & { 45 | margin-top: 4rem; 46 | } 47 | 48 | a { 49 | //reset links in titles 50 | color: inherit !important; 51 | border-color: transparent !important; 52 | } 53 | } 54 | 55 | h1 { 56 | @include font(sans, extrabold); 57 | @include font-size(xl); 58 | } 59 | 60 | h2 { 61 | @include font(sans, light); 62 | @include font-size(l); 63 | 64 | margin-top: 4rem; 65 | 66 | text-transform: uppercase; 67 | } 68 | 69 | h3 { 70 | @include font(sans, bold); 71 | @include font-size(m); 72 | } 73 | 74 | a { 75 | color: color($link, default); 76 | border-bottom: solid 1px rgba( color($link, default) , .5) ; 77 | 78 | text-decoration: none; 79 | 80 | &:hover { 81 | color: color($link, hover); 82 | } 83 | } 84 | 85 | p, 86 | ul, 87 | ol { 88 | margin-top: 0; 89 | margin-bottom: $line-height; 90 | } 91 | 92 | 93 | strong, 94 | b { 95 | font-weight: font-weight(bold); 96 | 97 | em, 98 | i, 99 | i &, 100 | em & { 101 | font-style: italic; 102 | } 103 | } 104 | 105 | ol, 106 | ul { 107 | padding-left: 1.5em; 108 | 109 | & ul, 110 | & ol { 111 | margin-bottom: .5em; 112 | } 113 | } 114 | 115 | li { 116 | line-height: $line-height; 117 | } 118 | 119 | img, 120 | object { 121 | max-width: 100%; 122 | } 123 | 124 | 125 | /// Less used tags 126 | 127 | abbr[title], 128 | dfn[title] { 129 | border-bottom: 1px dotted color($gray); 130 | 131 | cursor: help; 132 | } 133 | address { 134 | display: inline-block; 135 | margin-bottom: 1.5em; 136 | padding: 1em; 137 | 138 | background: color($gray,lightest); 139 | } 140 | blockquote { 141 | display: inline-block; 142 | margin-bottom: 1.5em; 143 | padding: 1em; 144 | p { 145 | margin-bottom: 0; 146 | } 147 | } 148 | blockquote, 149 | q { 150 | quotes: none; 151 | } 152 | blockquote:before, 153 | blockquote:after, 154 | q:before, 155 | q:after { 156 | content: ''; 157 | content: none; 158 | } 159 | 160 | code, 161 | kbd, 162 | samp, 163 | var { 164 | @include font(fixed, normal); 165 | 166 | display: inline-block; 167 | padding: .05em .5em; 168 | 169 | color: $white; 170 | background: color($gray, darkest); 171 | border-radius: border-radius(s); 172 | } 173 | 174 | del { 175 | text-decoration: line-through; 176 | } 177 | 178 | dt { 179 | font-weight: bold; 180 | } 181 | 182 | dd { 183 | margin-bottom: .75em; 184 | padding-bottom: .75em; 185 | 186 | border-bottom: dotted 1px color($gray, darkest); 187 | } 188 | 189 | em, 190 | i, 191 | q, 192 | cite { 193 | font-style: italic; 194 | } 195 | 196 | hr { 197 | margin: 1em 0; 198 | 199 | border-top: 1px solid color($gray, lighter); 200 | } 201 | 202 | ins, 203 | mark { 204 | @include tag( color($yellow, darkest) , color($yellow, lightest) ); 205 | 206 | text-decoration: none; 207 | } 208 | 209 | pre { 210 | padding: 1.5em; 211 | 212 | border-top: 1px dotted color($gray, darkest); 213 | border-bottom: 1px dotted color($gray, darkest); 214 | } 215 | 216 | small { 217 | font-size: font-size(s); 218 | } 219 | 220 | sub, 221 | sup { 222 | vertical-align: baseline; 223 | 224 | font-size: font-size(xs); 225 | line-height: 0; 226 | } 227 | 228 | sub { 229 | top: .5ex; 230 | } 231 | 232 | sup { 233 | bottom: 1ex; 234 | } 235 | 236 | time { 237 | @include tag( $text-color , color($yellow, lightest) ); 238 | } 239 | -------------------------------------------------------------------------------- /src/base/form.scss: -------------------------------------------------------------------------------- 1 | form { 2 | //variations 3 | 4 | 5 | &.-form-button { 6 | display: inline-block; 7 | vertical-align: middle; 8 | 9 | .alert & { 10 | margin: 0 1em; 11 | } 12 | } 13 | } 14 | 15 | 16 | // Container for collection of label & input 17 | .form__group { 18 | @extend .clearfix; 19 | 20 | padding: .75em 0; 21 | 22 | 23 | //variations 24 | &.-buttons { 25 | margin: 1em 0; 26 | } 27 | 28 | &.-media { 29 | margin: .75em 0; 30 | padding: .75em; 31 | 32 | background: $white-off; 33 | } 34 | } 35 | 36 | .form__group__help { 37 | margin-top: .5em; 38 | 39 | font-size: font-size(s); 40 | } 41 | 42 | 43 | 44 | fieldset { 45 | min-width: 0; 46 | margin: .75em 0; 47 | padding: .75em; 48 | 49 | background: $white-off; 50 | border: 0; 51 | 52 | //variations 53 | &.-info { 54 | background: rgba(color($blue, lightest) , .6); 55 | } 56 | 57 | //hacks 58 | body:not(:-moz-handler-blocked) & { 59 | display: table-cell; 60 | } 61 | } 62 | 63 | 64 | legend { 65 | display: table; 66 | padding: .5em 1em; 67 | 68 | color: color($gray); 69 | background: $white-off; 70 | border-radius: 3px; 71 | 72 | font-size: font-size(xs); 73 | font-weight: font-weight(500); 74 | text-align: left; 75 | text-transform: uppercase; 76 | } 77 | 78 | 79 | label { 80 | color: color($gray, dark); 81 | 82 | font-size: font-size(default); 83 | 84 | //variations 85 | &.-invers { 86 | color: rgba($white, .5); 87 | } 88 | 89 | //context 90 | form.-stacked & { 91 | display: block; 92 | padding-bottom: .5em; 93 | } 94 | } 95 | 96 | .label--required { 97 | &:after { 98 | content: '*'; 99 | } 100 | } 101 | 102 | .lang-bubble { 103 | display: inline-block; 104 | min-width: 2em; 105 | height: 2em; 106 | padding: 0 3px; 107 | 108 | color: color($green, dark); 109 | background: $white; 110 | border: solid 1px color($gray, light); 111 | border-radius: 1em; 112 | box-shadow: 0 3px rgba($black, .075); 113 | 114 | font-size: font-size(xs); 115 | font-weight: font-weight(extrabold); 116 | line-height: 1.8; //correction 117 | text-align: center; 118 | text-transform: uppercase; 119 | } 120 | 121 | .label--lang { 122 | @extend .lang-bubble; 123 | // `important` is required to overwrite relative 124 | // positioning in blender-media 125 | 126 | position: absolute !important; 127 | top: -.25rem; 128 | left: .35em; 129 | z-index: z-index(above); 130 | } 131 | 132 | .legend__lang, 133 | .label__lang { 134 | @extend .lang-bubble; 135 | 136 | margin: 0 .35em; 137 | vertical-align: top; 138 | } 139 | 140 | //standard controls 141 | input[type='text'], 142 | input[type='password'], 143 | input[type='email'], 144 | input[type='url'], 145 | input[type='date'], 146 | input[type='month'], 147 | input[type='time'], 148 | input[type='datetime'], 149 | input[type='datetime-local'], 150 | input[type='week'], 151 | input[type='number'], 152 | input[type='search'], 153 | input[type='tel'], 154 | input[type='color'], 155 | select, 156 | textarea { 157 | display: inline-block; 158 | height: 2.5em; 159 | padding: 0 .5em; 160 | vertical-align: middle; 161 | 162 | color: $text-color; 163 | border: 2px solid color($gray, light); 164 | border-radius: border-radius(s); 165 | box-shadow: inset 0 2px rgba(color($gray), .15), 0 2px rgba($black, .075); 166 | 167 | font-weight: font-weight(normal); 168 | 169 | &:focus { 170 | border: 2px solid color($blue, light); 171 | outline: none; 172 | } 173 | 174 | //context 175 | form.-stacked & { 176 | width: 100%; 177 | } 178 | } 179 | 180 | textarea[disabled], 181 | input[disabled] { 182 | color: $text-color; 183 | box-shadow: none; 184 | opacity: .5; 185 | 186 | mix-blend-mode: multiply; 187 | -webkit-opacity: .5; 188 | -webkit-text-fill-color: $text-color; 189 | } 190 | 191 | input[type='date'], 192 | input[type='datetime'], 193 | input[type='text'].-datetime { 194 | width: 8em !important; 195 | } 196 | 197 | 198 | input[type='search'] { 199 | padding: 0 1em; 200 | } 201 | 202 | textarea { 203 | max-width: 100%; 204 | padding: .5em; 205 | } 206 | 207 | textarea[data-autosize] { 208 | resize: none; 209 | } 210 | -------------------------------------------------------------------------------- /src/vendor/redactor/dropdown.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------ 2 | // 3 | // DROPDOWN 4 | // 5 | // 01. Base 6 | // 02. InlineFormat 7 | // 03. BlockFormat 8 | // 9 | // ------------------------------------------------------------------ 10 | 11 | // =Base 12 | // ------------------------------------------------------------------ 13 | .redactor-dropdown { 14 | overflow: auto; 15 | margin: 0; 16 | padding: 0; 17 | min-width: 220px; 18 | max-height: 254px; 19 | background: #fff; 20 | box-shadow: 0 5px 20px rgba(0, 0, 0, .2); 21 | color: #000; 22 | list-style: none; 23 | font-size: 14px; 24 | font-family: $ui-font-family; 25 | } 26 | .redactor-dropdown li { 27 | 28 | border-bottom: 1px solid rgba(0, 0, 0, .07); 29 | 30 | &:last-child { 31 | border-bottom: none; 32 | } 33 | &:hover { 34 | background-color: color($blue, lighter); 35 | & a { 36 | text-decoration: none; 37 | } 38 | } 39 | &.redactor-dropdown-link-inactive { 40 | 41 | background: none; 42 | 43 | & a, 44 | & a:hover { 45 | background: none; 46 | background: none; 47 | color: #000 !important; 48 | opacity: 0.4; 49 | cursor: default; 50 | } 51 | } 52 | } 53 | .redactor-dropdown a { 54 | display: block; 55 | padding: 16px 16px 15px 16px; 56 | border: none; 57 | color: #000; 58 | text-decoration: none; 59 | 60 | & span { 61 | display: inline-block; 62 | padding: 1px 4px; 63 | border-radius: 3px; 64 | line-height: 1.4; 65 | } 66 | &:focus { 67 | outline: none; 68 | } 69 | &.selected { 70 | background-color: #000; 71 | color: #fff; 72 | } 73 | &.redactor-dropdown-link-selected { 74 | background: #000; 75 | color: #fff; 76 | } 77 | } 78 | 79 | 80 | // InlineFormat 81 | // ------------------------------------------------------------------ 82 | .redactor-dropdown-box-inline { 83 | 84 | & .redactor-dropdown-marked span { 85 | background-color: $mark-background-color; 86 | color: #000; 87 | text-decoration: none; 88 | } 89 | & .redactor-dropdown-code span { 90 | background: $code-background-color; 91 | font-family: $monospace-font-family; 92 | } 93 | & .redactor-dropdown-sample span { 94 | background: #46a9fc; 95 | color: rgba(255, 255, 255, .9); 96 | font-family: $monospace-font-family; 97 | } 98 | & .redactor-dropdown-variable span { 99 | color: rgba(0, 0, 0, .5); 100 | font-family: $monospace-font-family; 101 | } 102 | & .redactor-dropdown-shortcut span { 103 | background: #000; 104 | color: rgba(255, 255, 255, .85); 105 | white-space: nowrap; 106 | font-family: $monospace-font-family; 107 | } 108 | & .redactor-dropdown-cite span { 109 | color: rgba(0, 0, 0, .5); 110 | font-style: italic; 111 | } 112 | & .redactor-dropdown-sup span, 113 | & .redactor-dropdown-sub span { 114 | font-size: 12px; 115 | } 116 | 117 | } 118 | 119 | 120 | // BlockFormat 121 | // ------------------------------------------------------------------ 122 | .redactor-dropdown-box-format { 123 | & .redactor-dropdown-blockquote { 124 | color: rgba(0, 0, 0, .4); 125 | font-style: italic; 126 | } 127 | & .redactor-dropdown-pre { 128 | font-family: monospace, sans-serif; 129 | } 130 | & .redactor-dropdown-h1, 131 | & .redactor-dropdown-h2, 132 | & .redactor-dropdown-h3, 133 | & .redactor-dropdown-h4, 134 | & .redactor-dropdown-h5, 135 | & .redactor-dropdown-h6 { 136 | font-weight: bold; 137 | line-height: $base-line; 138 | } 139 | & .redactor-dropdown-h1 { 140 | font-size: $font-size-h1; 141 | line-height: 32px; 142 | } 143 | & .redactor-dropdown-h2 { 144 | font-size: $font-size-h2; 145 | line-height: 32px; 146 | } 147 | & .redactor-dropdown-h3 { 148 | font-size: $font-size-h3; 149 | } 150 | & .redactor-dropdown-h4 { 151 | font-size: $font-size-h4; 152 | } 153 | & .redactor-dropdown-h5 { 154 | font-size: $font-size-h5; 155 | } 156 | & .redactor-dropdown-h6 { 157 | font-size: $font-size-h6; 158 | } 159 | & .redactor-dropdown-p-intro { 160 | font-size: 1.25em; 161 | } 162 | & .redactor-dropdown-p-footnote, 163 | & .redactor-dropdown-p-caption { 164 | color: #999; 165 | font-size: 0.85em; 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /src/vendor/blender-js.parts.scss: -------------------------------------------------------------------------------- 1 | //spatie parts plugin 2 | 3 | .parts { 4 | @extend .clearfix; 5 | 6 | margin: 4em 0 2em 0; 7 | 8 | background: $white-off; 9 | border: solid 2px color($gray, light); 10 | border-radius: border-radius(s); 11 | box-shadow: 0 3px rgba(34, 34, 34, .05); 12 | 13 | font-size: font-size(s); 14 | 15 | transition: transform .3s ease-out; 16 | 17 | label { 18 | position: absolute; 19 | top: -2.35em; 20 | left: 0; 21 | 22 | background: $white; 23 | background: transparent; 24 | border-radius: border-radius(m); 25 | } 26 | 27 | .dataTables_wrapper { 28 | margin: 0 !important; 29 | } 30 | 31 | .dataTable { 32 | width: 100% !important; 33 | margin: 0 !important; 34 | } 35 | } 36 | 37 | th.part_thumb { 38 | min-width: 4rem; 39 | } 40 | 41 | td.-edit { 42 | word-break: break-all; 43 | 44 | cursor: text !important; 45 | 46 | &:after { 47 | content: '\f040'; //pencil 48 | 49 | display: inline-block; 50 | margin-left: .5em; 51 | vertical-align: middle; 52 | 53 | color: rgba(color($gray), .3); 54 | 55 | font-family: font-family(icons); 56 | font-size: font-size(s); 57 | } 58 | 59 | &:focus { 60 | outline: solid 4px color($blue, light); 61 | &:after { 62 | display: none; 63 | } 64 | } 65 | } 66 | 67 | td.part_thumb { 68 | white-space: nowrap; 69 | 70 | div { 71 | display: inline-block; 72 | width: 3rem; 73 | height: 3rem; 74 | vertical-align: middle; 75 | 76 | background-color: color($gray,dark); 77 | background-position: center; 78 | background-repeat: no-repeat; 79 | background-size: cover; 80 | border: solid 1px color($gray, lighter); 81 | border-radius: border-radius(s); 82 | } 83 | } 84 | td.part_thumb.-download { 85 | div { 86 | display: inline-block; 87 | overflow: hidden; 88 | vertical-align: middle; 89 | 90 | color: color($gray,lightest); 91 | 92 | font-weight: bold; 93 | line-height: 3rem; 94 | text-align: center; 95 | text-transform: uppercase; 96 | } 97 | } 98 | 99 | .parts_new { 100 | @extend .clearfix; 101 | 102 | position: relative; 103 | padding: 1em; 104 | 105 | font-size: font-size(xs); 106 | label { 107 | display: block; 108 | position: relative; 109 | top: 0; 110 | 111 | font-style: italic; 112 | } 113 | 114 | input { 115 | width: 100%; 116 | } 117 | } 118 | 119 | .-dropzone { 120 | background: color($blue, lightest); 121 | border-color: color($blue, light); 122 | border-style: dashed; 123 | opacity: .8; 124 | 125 | transform: scale(1.05); 126 | 127 | tr, 128 | td { 129 | background: color($blue, lightest) !important; 130 | } 131 | } 132 | 133 | .parts_alerts { 134 | .alert { 135 | margin: .5em 0; 136 | padding: 1em; 137 | } 138 | } 139 | 140 | .ui-autocomplete { 141 | position: relative; 142 | top: -3px !important; 143 | padding: 0; 144 | 145 | background: #fff; 146 | background: #fff; 147 | border: 2px solid color($gray, light); 148 | border-top-color: transparent; 149 | border-radius: 3px; 150 | box-shadow: 0 1px 20px rgba(0, 0, 0, .25); 151 | 152 | list-style: none; 153 | 154 | .ui-state-focus { 155 | background: color($blue, lightest); 156 | 157 | font-weight: bold; 158 | } 159 | 160 | li { 161 | display: block; 162 | position: relative; 163 | padding: 10px 50px 10px 10px ; 164 | 165 | text-decoration: none; 166 | 167 | cursor: pointer; 168 | } 169 | } 170 | 171 | .ui-helper-hidden-accessible { 172 | display: none; 173 | } 174 | 175 | .image_editor { 176 | display: none; 177 | width: 90vw !important; 178 | max-height: 80vh !important; 179 | margin: 0 !important; 180 | padding: 30px !important; 181 | overflow: auto; 182 | 183 | transform: translate(-50%, -50%); 184 | } 185 | 186 | .image_editor_title { 187 | margin-bottom: 28px; 188 | 189 | font-size: 1.3rem; 190 | font-weight: bold; 191 | } 192 | 193 | .image_editor_preview { 194 | border: 3px solid color($gray, lighter); 195 | border-radius: 1px; 196 | 197 | .-has-metadata & { 198 | width: calc(100% - 380px); 199 | float: left; 200 | } 201 | } 202 | 203 | .image_editor_image { 204 | display: block; 205 | width: 100%; 206 | } 207 | 208 | .image_editor_options { 209 | display: none; 210 | width: 380px; 211 | float: left; 212 | padding-left: 30px; 213 | 214 | .-has-metadata & { 215 | display: block; 216 | } 217 | 218 | label, 219 | input, 220 | textarea { 221 | display: block; 222 | width: 100%; 223 | } 224 | } 225 | 226 | .image_editor_confirm { 227 | margin-top: 30px; 228 | 229 | .-has-metadata & { 230 | width: 100%; 231 | float: left; 232 | } 233 | } 234 | -------------------------------------------------------------------------------- /src/utility/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin mq($breakpoint) { 2 | @if map-has-key($breakpoints, $breakpoint) { 3 | @media #{inspect(map-get($breakpoints, $breakpoint))} { 4 | @content; 5 | } 6 | } @else { 7 | @media (#{$breakpoint}) { 8 | @content; 9 | } 10 | } 11 | } 12 | 13 | @mixin block-reset { 14 | display: block !important; 15 | width: 100% !important; 16 | float: none !important; 17 | margin-right: 0 !important; 18 | margin-left: 0 !important; 19 | 20 | transform: none !important; 21 | } 22 | 23 | @mixin position-center-horizontal($position: absolute) { 24 | position: $position; 25 | left: 50%; 26 | 27 | transform: translateX(-50%); 28 | } 29 | 30 | @mixin position-center-vertical($position: absolute) { 31 | position: $position; 32 | top: 50%; 33 | 34 | transform: translateY(-50%); 35 | } 36 | 37 | @mixin position-center($position: absolute) { 38 | position: $position; 39 | top: 50%; 40 | left: 50%; 41 | 42 | transform: translateX(-50%) translateY(-50%); 43 | } 44 | 45 | @mixin font($family: sans, $weight: normal) { 46 | font-family: font-family($family); 47 | font-weight: font-weight($weight); 48 | } 49 | 50 | @mixin font-size($size: default) { 51 | font-size: font-size($size); 52 | } 53 | 54 | @mixin underline($color,$border-color: $color) { 55 | color: $color; 56 | border-bottom: solid .125em rgba($border-color, .15); 57 | 58 | text-decoration: none; 59 | 60 | transition: .3s color linear, .3s border-color linear; 61 | } 62 | 63 | @mixin underline-hover($color,$border-color: $color) { 64 | &:hover { 65 | color: $color; 66 | border-bottom: solid .125em rgba($border-color, .5); 67 | } 68 | } 69 | 70 | @mixin hyphens($value: true) { 71 | @if $value == true { 72 | hyphens: auto; 73 | 74 | -webkit-hyphens: auto; 75 | -moz-hyphens: auto; 76 | -ms-hyphens: auto; 77 | } 78 | @else { 79 | hyphens: none !important; 80 | 81 | -webkit-hyphens: none !important; 82 | -moz-hyphens: none !important; 83 | -ms-hyphens: none !important; 84 | } 85 | } 86 | 87 | @mixin antialiasing($value: subpixel) { 88 | @if $value == subpixel { 89 | -webkit-font-smoothing: subpixel-antialiased; 90 | } 91 | @if $value == pixel { 92 | -webkit-font-smoothing: antialiased; 93 | -moz-osx-font-smoothing: grayscale; 94 | } 95 | } 96 | 97 | @mixin tag($color, $background-color, $paddingH: .5em, $paddingV: 0) { 98 | @include font(sans, normal); 99 | 100 | display: inline-block; 101 | margin-right: -$paddingH/2; 102 | margin-left: -$paddingH/2; 103 | padding: $paddingV $paddingH; 104 | 105 | color: $color; 106 | background-color: $background-color; 107 | border-bottom: none; 108 | border-radius: border-radius(s); 109 | 110 | transition: all .3s ease-out; 111 | } 112 | 113 | @mixin ul-horizontal() { 114 | margin: 0; 115 | padding-left: 0; 116 | 117 | list-style: none; 118 | 119 | li { 120 | display: inline-block; 121 | } 122 | } 123 | 124 | @mixin ul-clean() { 125 | margin: 0; 126 | padding-left: 0; 127 | 128 | list-style: none; 129 | } 130 | 131 | @mixin gradient-vertical($start, $stop, $from: 0, $to: 100%) { 132 | background: $start; /* old browsers */ 133 | background: -webkit-linear-gradient(top, $start $from,$stop $to); /* Chrome 10-25, Safari 5.1-6 */ 134 | background: linear-gradient(to bottom, $start $from, $stop $to); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 135 | } 136 | 137 | @mixin gradient-horizontal($start, $stop, $from: 0, $to: 100%) { 138 | background: $start; /* old browsers */ 139 | background: -webkit-linear-gradient(left, $start $from,$stop $to); /* Chrome 10-25, Safari 5.1-6 */ 140 | background: linear-gradient(to right, $start $from, $stop $to); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 141 | } 142 | 143 | @mixin circle($size, $display: 'inline-block') { 144 | display: inline-block; 145 | width: $size; 146 | height: $size; 147 | overflow: hidden; 148 | 149 | border-radius: 100%; 150 | 151 | line-height: $size; 152 | text-align: center; 153 | } 154 | 155 | @mixin square($size, $display: 'inline-block') { 156 | display: inline-block; 157 | width: $size; 158 | height: $size; 159 | overflow: hidden; 160 | 161 | line-height: $size; 162 | text-align: center; 163 | } 164 | 165 | @mixin rectangle($aspect-ratio, $display: 'inline-block') { 166 | display: block; 167 | width: 100%; 168 | height: 0; 169 | padding-bottom: $aspect-ratio; 170 | overflow: hidden; 171 | } 172 | 173 | @mixin cover() { 174 | position: absolute; 175 | top: 0; 176 | right: 0; 177 | bottom: 0; 178 | left: 0; 179 | } 180 | 181 | @mixin background-svg($image, $background-position: center center, $background-size: contain, $background-repeat: no-repeat) { 182 | @include background-image($image, $background-position, $background-size, $background-repeat); 183 | } 184 | 185 | @mixin background-image($image, $background-position: center center, $background-size: contain, $background-repeat: no-repeat) { 186 | background-image: url('#{$image}'); 187 | background-position: $background-position; 188 | background-repeat: $background-repeat; 189 | background-size: $background-size; 190 | } 191 | 192 | @mixin background-image-tinted($image,$rgba, $background-position: center center) { 193 | background: linear-gradient( 194 | $rgba, 195 | $rgba 196 | ), 197 | url('#{$image}'); 198 | background-position: $background-position; 199 | background-size: cover; 200 | } 201 | 202 | @mixin prefixed-placeholder($pseudo: '') { 203 | @at-root #{$pseudo}::-webkit-input-placeholder { 204 | @content; 205 | } 206 | 207 | @at-root #{$pseudo}:-moz-placeholder { 208 | @content; 209 | } 210 | 211 | @at-root #{$pseudo}::-moz-placeholder { 212 | @content; 213 | } 214 | 215 | @at-root #{$pseudo}:-ms-input-placeholder { 216 | @content; 217 | } 218 | } 219 | -------------------------------------------------------------------------------- /src/vendor/redactor/modal.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------ 2 | // 3 | // MODAL 4 | // 5 | // ------------------------------------------------------------------ 6 | 7 | #redactor-modal-overlay { 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | overflow: auto; 12 | margin: auto; 13 | width: 100%; 14 | height: 100%; 15 | background-color: rgba(255, 255, 255, .95); 16 | } 17 | #redactor-modal-box { 18 | position: fixed; 19 | top: 0; 20 | right: 0; 21 | bottom: 0; 22 | left: 0; 23 | overflow-x: hidden; 24 | overflow-y: auto; 25 | } 26 | #redactor-modal { 27 | 28 | position: relative; 29 | margin: auto; 30 | margin-top: 16px; 31 | padding: 0; 32 | border-radius: 5px; 33 | background: #fff; 34 | box-shadow: 0 4px 40px rgba(0, 0, 0, .15); 35 | color: #000; 36 | font-size: 14px; 37 | font-family: $ui-font-family; 38 | 39 | @media (max-width: 768px) { 40 | font-size: 16px !important; 41 | } 42 | 43 | @media (max-width: 768px) { 44 | & .redactor-modal-tab-side { 45 | float: none; 46 | margin-right: 0; 47 | margin-bottom: 24px; 48 | width: auto; 49 | } 50 | & .redactor-modal-tab-area { 51 | float: none; 52 | width: auto; 53 | } 54 | } 55 | 56 | & #redactor-modal-header { 57 | padding: 20px 24px; 58 | border-bottom: 1px solid rgba(0, 0, 0, .05); 59 | border-top-left-radius: 5px; 60 | border-top-right-radius: 5px; 61 | background: #f5f5f5; 62 | color: #000; 63 | font-weight: bold; 64 | font-size: 16px; 65 | } 66 | & #redactor-modal-close { 67 | position: absolute; 68 | top: 10px; 69 | right: 4px; 70 | padding: 0; 71 | width: 30px; 72 | height: 40px; 73 | outline: none; 74 | border: 0; 75 | background: none; 76 | box-shadow: none; 77 | color: rgba(0, 0, 0, .4); 78 | text-align: center; 79 | font-weight: 300; 80 | font-size: 30px; 81 | cursor: pointer; 82 | -webkit-appearance: none; 83 | &:hover { 84 | color: #000; 85 | } 86 | } 87 | & #redactor-modal-body { 88 | overflow: auto; 89 | padding: 40px 48px 24px 48px; 90 | 91 | @media (max-width: 768px) { 92 | padding: 24px; 93 | } 94 | 95 | & section { 96 | margin-bottom: 24px; 97 | } 98 | & label { 99 | display: block; 100 | margin-bottom: 4px; 101 | font-weight: bold; 102 | font-size: 12px; 103 | & .desc { 104 | color: rgba(0, 0, 0, .5); 105 | font-weight: normal; 106 | } 107 | &.checkbox { 108 | font-weight: normal; 109 | font-size: 16px; 110 | } 111 | } 112 | } 113 | 114 | & select, 115 | & input[type="text"], 116 | & input[type="password"], 117 | & input[type="email"], 118 | & input[type="url"], 119 | & input[type="number"], 120 | & textarea { 121 | position: relative; 122 | z-index: 2; 123 | box-sizing: border-box; 124 | margin: 0; 125 | padding: 8px; 126 | width: 100%; 127 | height: 40px; 128 | border: 1px solid #ddd; 129 | border-radius: 3px; 130 | background-color: white; 131 | box-shadow: none; 132 | color: #333; 133 | font-size: 14px; 134 | font-family: $ui-font-family; 135 | 136 | @media (max-width: 768px) { 137 | font-size: 16px; 138 | } 139 | 140 | &:focus { 141 | @include transition-redactor(border .3s ease-in); 142 | outline: none; 143 | 144 | border-color: #aaa; 145 | } 146 | } 147 | & textarea { 148 | display: block; 149 | line-height: 1.4em; 150 | } 151 | 152 | & button { 153 | margin: 0; 154 | margin-right: 8px; 155 | margin-bottom: 8px; 156 | padding: 13px 24px 14px 24px; 157 | height: 40px; 158 | outline: none; 159 | border: 1px solid transparent; 160 | border-radius: 4px; 161 | background-color: #eee; 162 | color: #000; 163 | text-align: center; 164 | text-decoration: none; 165 | font-weight: normal; 166 | font-size: 13px; 167 | font-family: $ui-font-family; 168 | line-height: 1; 169 | cursor: pointer; 170 | 171 | &:hover { 172 | background: none; 173 | background: #ddd; 174 | color: #777; 175 | 176 | text-decoration: none; 177 | } 178 | 179 | &.redactor-modal-button-offset { 180 | margin-left: 24px; 181 | } 182 | 183 | &#redactor-modal-button-delete { 184 | background: color($red); 185 | color: #fff; 186 | &:hover { 187 | filter: brightness(95%); 188 | } 189 | } 190 | &#redactor-modal-button-action { 191 | background: none; 192 | background-color: color($green); 193 | color: #fff; 194 | &:hover { 195 | filter: brightness(95%); 196 | } 197 | } 198 | } 199 | 200 | & .redactor-group { 201 | @include clearfix; 202 | } 203 | 204 | & .redactor-modal-tab-side { 205 | float: left; 206 | margin-right: 6%; 207 | width: 26%; 208 | } 209 | 210 | & .redactor-modal-tab-area { 211 | float: left; 212 | width: 66%; 213 | } 214 | } 215 | 216 | #redactor-modal-tabber { 217 | margin-bottom: 40px; 218 | font-size: 12px; 219 | & a { 220 | margin-right: -1px; 221 | padding: 8px 15px; 222 | border: 1px solid #ddd; 223 | color: #000; 224 | text-decoration: none; 225 | line-height: 1; 226 | &:hover { 227 | border-color: rgba(31,120,216,1); 228 | background-color: rgba(31,120,216,1); 229 | color: #fff; 230 | } 231 | &.active { 232 | border-color: #ddd; 233 | background-color: rgba(0, 0, 0, .05); 234 | color: rgba(0, 0, 0, .5); 235 | cursor: default; 236 | } 237 | } 238 | } 239 | 240 | #redactor-modal-list { 241 | overflow-x: auto; 242 | margin-left: 0; 243 | padding-left: 0; 244 | max-height: 250px; 245 | list-style: none; 246 | & li { 247 | border-bottom: 1px solid rgba(0, 0, 0, .07); 248 | &:last-child { 249 | border-bottom: none; 250 | } 251 | } 252 | & a { 253 | position: relative; 254 | display: block; 255 | padding: 16px 4px; 256 | color: #000; 257 | text-decoration: none; 258 | font-size: 15px; 259 | &:hover { 260 | background-color: #eee; 261 | } 262 | } 263 | } 264 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | "node_modules/**", 4 | "resources/assets/sass/front/utility/**" 5 | ], 6 | "always-semicolon": true, 7 | "block-indent": " ", 8 | "color-case": "lower", 9 | "color-shorthand": true, 10 | "element-case": "lower", 11 | "eof-newline": true, 12 | "leading-zero": false, 13 | "quotes": "single", 14 | "remove-empty-rulesets": true, 15 | "space-after-colon": " ", 16 | "space-after-combinator": " ", 17 | "space-after-opening-brace": "\n", 18 | "space-after-selector-delimiter": "\n", 19 | "space-before-closing-brace": "\n", 20 | "space-before-colon": "", 21 | "space-before-combinator": " ", 22 | "space-before-opening-brace": " ", 23 | "space-before-selector-delimiter": "", 24 | "space-between-declarations": "\n", 25 | "strip-spaces": true, 26 | "unitless-zero": true, 27 | "vendor-prefix-align": true, 28 | "sort-order-fallback": "abc", 29 | "sort-order": [ 30 | [ 31 | "$variable", 32 | "$extend", 33 | "$include" 34 | ], 35 | [ 36 | "content" 37 | ], 38 | [ 39 | "box-sizing", 40 | "display", 41 | "flex", 42 | "flex-align", 43 | "flex-direction", 44 | "flex-grow", 45 | "flex-order", 46 | "flex-pack", 47 | "flex-shrink", 48 | "align-content", 49 | "align-items", 50 | "position", 51 | "top", 52 | "right", 53 | "bottom", 54 | "left", 55 | "width", 56 | "min-width", 57 | "max-width", 58 | "height", 59 | "min-height", 60 | "max-height", 61 | "clear", 62 | "clip", 63 | "float", 64 | "margin", 65 | "margin-top", 66 | "margin-right", 67 | "margin-bottom", 68 | "margin-left", 69 | "padding", 70 | "padding-top", 71 | "padding-right", 72 | "padding-bottom", 73 | "padding-left", 74 | "overflow", 75 | "overflow-x", 76 | "overflow-y", 77 | "resize", 78 | "vertical-align", 79 | "visibility", 80 | "zoom", 81 | "z-index" 82 | ], 83 | [ 84 | "color", 85 | "background", 86 | "background-attachment", 87 | "background-clip", 88 | "background-color", 89 | "background-image", 90 | "background-origin", 91 | "background-position", 92 | "background-position-x", 93 | "background-position-y", 94 | "background-repeat", 95 | "background-size", 96 | "border", 97 | "border-collapse", 98 | "border-color", 99 | "border-style", 100 | "border-width", 101 | "border-top", 102 | "border-top-color", 103 | "border-top-style", 104 | "border-top-width", 105 | "border-right", 106 | "border-right-color", 107 | "border-right-style", 108 | "border-right-width", 109 | "border-bottom", 110 | "border-bottom-color", 111 | "border-bottom-style", 112 | "border-bottom-width", 113 | "border-left", 114 | "border-left-color", 115 | "border-left-style", 116 | "border-left-width", 117 | "border-radius", 118 | "border-top-left-radius", 119 | "border-top-right-radius", 120 | "border-bottom-right-radius", 121 | "border-bottom-left-radius", 122 | "border-image", 123 | "border-image-outset", 124 | "border-image-source", 125 | "border-image-repeat", 126 | "border-image-slice", 127 | "border-image-width", 128 | "border-spacing", 129 | "box-shadow", 130 | "filter", 131 | "opacity", 132 | "outline", 133 | "outline-width", 134 | "outline-style", 135 | "outline-color", 136 | "outline-offset", 137 | "text-shadow" 138 | ], 139 | [ 140 | "counter-increment", 141 | "counter-reset", 142 | "font", 143 | "font-family", 144 | "font-size", 145 | "font-size-adjust", 146 | "font-smooth", 147 | "webkit-font-smoothing", 148 | "moz-osx-font-smoothing", 149 | "font-stretch", 150 | "font-style", 151 | "font-variant", 152 | "font-weight", 153 | "hyphens", 154 | "letter-spacing", 155 | "line-height", 156 | "list-style", 157 | "list-style-image", 158 | "list-style-position", 159 | "list-style-type", 160 | "quotes", 161 | "tab-size", 162 | "text-align", 163 | "text-align-last", 164 | "text-decoration", 165 | "text-indent", 166 | "text-justify", 167 | "text-outline", 168 | "text-rendering", 169 | "text-transform", 170 | "text-wrap", 171 | "text-overflow", 172 | "text-overflow-ellipsis", 173 | "text-overflow-mode", 174 | "white-space", 175 | "word-break", 176 | "word-spacing", 177 | "word-wrap" 178 | ], 179 | [ 180 | "animation", 181 | "animation-delay", 182 | "animation-direction", 183 | "animation-duration", 184 | "animation-iteration-count", 185 | "animation-name", 186 | "animation-play-state", 187 | "animation-timing-function", 188 | "cursor", 189 | "pointer-events", 190 | "transform", 191 | "transform-origin", 192 | "transition", 193 | "transition-delay", 194 | "transition-duration", 195 | "transition-property", 196 | "transition-timing-function", 197 | "user-select", 198 | "-moz-user-select", 199 | "-ms-user-select", 200 | "-webkit-user-select" 201 | ], 202 | [ 203 | "..." 204 | ], 205 | [ 206 | "$include form-placeholder", 207 | "$include mq", 208 | "$include mq-below", 209 | "$include mq-above" 210 | ] 211 | ], 212 | "verbose": true 213 | } 214 | -------------------------------------------------------------------------------- /src/vendor/redactor/content.scss: -------------------------------------------------------------------------------- 1 | .redactor-styles { 2 | color: $body-color; 3 | font-size: $font-size; 4 | 5 | font-family: $content-font-family; 6 | line-height: $base-line; 7 | 8 | @media (max-width: $breakpoint-small) { 9 | font-size: 16px; 10 | } 11 | 12 | @media (min-width: $breakpoint-small) { 13 | 14 | blockquote { 15 | padding-left: $base-line; 16 | border-left: 1px solid rgba(0, 0, 0, .1); 17 | } 18 | 19 | } 20 | 21 | &[dir="rtl"] { 22 | unicode-bidi: embed; 23 | direction: rtl; 24 | 25 | & ul, 26 | & ol { 27 | & li { 28 | text-align: right; 29 | } 30 | } 31 | ul, 32 | ol, 33 | ul ul, 34 | ol ol, 35 | ul ol, 36 | ol ul { 37 | margin: 0 $base-line 0 0; 38 | } 39 | } 40 | 41 | // links 42 | a { 43 | color: $link-color; 44 | &:focus, 45 | &:hover { 46 | color: $link-hover-color; 47 | } 48 | } 49 | 50 | // headings 51 | h1, 52 | h2, 53 | h3, 54 | h4, 55 | h5, 56 | h6 { 57 | margin: 0; 58 | margin-bottom: 12px; 59 | padding: 0; 60 | color: $headings-color; 61 | text-transform: none; 62 | font-weight: bold; 63 | font-family: $headings-font-family; 64 | text-rendering: optimizeLegibility; 65 | 66 | &:empty { 67 | min-height: $base-line; 68 | } 69 | } 70 | h1 { 71 | font-size: $font-size-h1; 72 | line-height: 44px; 73 | } 74 | h2 { 75 | font-size: $font-size-h2; 76 | line-height: 36px; 77 | } 78 | h3 { 79 | font-size: $font-size-h3; 80 | line-height: 32px; 81 | } 82 | h4 { 83 | font-size: $font-size-h4; 84 | line-height: $base-line; 85 | } 86 | h5 { 87 | font-size: $font-size-h5; 88 | line-height: $base-line; 89 | } 90 | h6 { 91 | font-size: $font-size-h6; 92 | line-height: $base-line; 93 | } 94 | 95 | 96 | // Line height and margin 97 | p, 98 | ul, 99 | ol, 100 | dl, 101 | blockquote, 102 | hr, 103 | pre, 104 | table, 105 | figure, 106 | address { 107 | margin: 0; 108 | padding: 0; 109 | } 110 | p, 111 | blockquote { 112 | &:empty { 113 | min-height: $base-line; 114 | } 115 | } 116 | // Top Space 117 | p, 118 | ul, 119 | ol, 120 | dl, 121 | blockquote, 122 | hr, 123 | pre, 124 | table, 125 | form, 126 | figure { 127 | + h2, 128 | + h3, 129 | + h4, 130 | + h5, 131 | + h6 { 132 | margin-top: $base-line; 133 | } 134 | } 135 | ul, 136 | ol, 137 | ul ul, 138 | ol ol, 139 | ul ol, 140 | ol ul { 141 | margin: 0 0 0 $base-line; 142 | } 143 | ul li, 144 | ol li { 145 | text-align: left; 146 | } 147 | ol ol li { 148 | list-style-type: lower-alpha; 149 | } 150 | ol ol ol li { 151 | list-style-type: lower-roman; 152 | } 153 | p, 154 | ul, 155 | ol, 156 | dl, 157 | blockquote, 158 | hr, 159 | pre, 160 | table, 161 | figure, 162 | address { 163 | margin-bottom: 16px; 164 | } 165 | 166 | // quote 167 | blockquote { 168 | position: relative; 169 | color: rgba(0, 0, 0, .6); 170 | font-style: italic; 171 | & cite { 172 | font-size: 80%; 173 | } 174 | } 175 | 176 | 177 | // address 178 | address { 179 | font-style: normal; 180 | } 181 | 182 | // definition list 183 | dl dt { 184 | font-weight: bold; 185 | } 186 | dd { 187 | margin-left: $base-line; 188 | } 189 | 190 | // text-level 191 | cite { 192 | color: rgba(0, 0, 0, .5); 193 | font-style: italic; 194 | } 195 | s, 196 | del { 197 | text-decoration: line-through; 198 | } 199 | abbr[title], 200 | dfn[title] { 201 | border-bottom: 1px dotted #000; 202 | cursor: help; 203 | } 204 | strong, 205 | b { 206 | font-weight: bold; 207 | } 208 | em, 209 | i { 210 | font-style: italic; 211 | } 212 | sub, 213 | sup { 214 | position: relative; 215 | margin-left: .2rem; 216 | font-size: 10px; 217 | line-height: 0; 218 | } 219 | sup { 220 | top: -.4rem; 221 | } 222 | sub { 223 | bottom: -.2rem; 224 | } 225 | strong, b, em, i, sup, sub, u, ins { 226 | &:empty { 227 | display: inline-block; 228 | min-width: 1px; 229 | min-height: 1rem; 230 | } 231 | } 232 | figcaption { 233 | margin: 4px 0; 234 | color: #999; 235 | text-align: left; 236 | font-size: .85em; 237 | } 238 | ins, 239 | u { 240 | text-decoration: underline; 241 | } 242 | mark { 243 | background-color: $mark-background-color; 244 | color: #000; 245 | text-decoration: none; 246 | } 247 | 248 | // сode 249 | pre, 250 | code, 251 | kbd, 252 | samp, 253 | var, 254 | output { 255 | font-style: normal; 256 | font-size: 90%; 257 | font-family: $monospace-font-family; 258 | } 259 | pre { 260 | overflow: auto; 261 | margin-top: 16px; 262 | padding: 16px 20px; 263 | background: rgba(0, 0, 0, .03); 264 | color: rgba(0, 0, 0, .75); 265 | word-wrap: normal; 266 | font-size: 90%; 267 | line-height: $base-line; 268 | } 269 | mark, 270 | code, 271 | samp, 272 | kbd { 273 | display: inline-block; 274 | padding: 2px 4px 1px 4px; 275 | border-radius: 3px; 276 | line-height: 1; 277 | } 278 | code { 279 | background: $code-background-color; 280 | } 281 | pre code { 282 | padding: 0; 283 | border: none; 284 | background: none; 285 | font-size: 100%; 286 | line-height: $base-line; 287 | } 288 | var { 289 | color: rgba(0, 0, 0, .5); 290 | } 291 | samp { 292 | background: #46a9fc; 293 | color: rgba(255, 255, 255, .9); 294 | } 295 | kbd { 296 | background: #000; 297 | color: rgba(255, 255, 255, .85); 298 | white-space: nowrap; 299 | } 300 | 301 | 302 | // Normalize horizontal line 303 | hr { 304 | display: block; 305 | box-sizing: content-box; 306 | height: 1px; 307 | border: 0; 308 | border-top: 1px solid rgba(0, 0, 0, .1); 309 | } 310 | 311 | // Responsive media 312 | img, 313 | video, 314 | audio, 315 | embed, 316 | object { 317 | max-width: 100%; 318 | } 319 | img, 320 | video, 321 | embed, 322 | object { 323 | height: auto; 324 | } 325 | embed, 326 | object { 327 | height: 100%; 328 | } 329 | img { 330 | vertical-align: middle; 331 | -ms-interpolation-mode: bicubic; 332 | } 333 | 334 | // tables 335 | table { 336 | max-width: 100%; 337 | width: 100%; 338 | border-collapse: collapse; 339 | empty-cells: show; 340 | 341 | caption { 342 | padding: 0; 343 | color: rgba(0, 0, 0, .5); 344 | text-transform: uppercase; 345 | font-size: 11px; 346 | } 347 | 348 | th, 349 | td { 350 | padding: 16px; 351 | padding-bottom: 15px; 352 | border: 1px solid #eee; 353 | } 354 | 355 | tfoot th, 356 | tfoot td { 357 | color: rgba(0, 0, 0, .5); 358 | } 359 | } 360 | 361 | 362 | // Responsive embedded objects 363 | & .video-container { 364 | position: relative; 365 | margin-bottom: 16px; 366 | padding-bottom: 56.25%; // ratio 16:9 367 | height: 0; 368 | & iframe, 369 | & object, 370 | & embed { 371 | position: absolute; 372 | top: 0; 373 | left: 0; 374 | width: 100% !important; 375 | height: 100% !important; 376 | } 377 | } 378 | 379 | & .p--intro { 380 | font-size: 1.25em; 381 | } 382 | 383 | & .p--footnote, 384 | & .p--caption { 385 | color: #999; 386 | font-size: .85em; 387 | } 388 | } 389 | -------------------------------------------------------------------------------- /src/vendor/redactor/ui.scss: -------------------------------------------------------------------------------- 1 | // ------------------------------------------------------------------ 2 | // 3 | // UI 4 | // 5 | // 01. Base 6 | // 02. Zindex 7 | // 03. Fullscreen 8 | // 04. Placeholder 9 | // 05. Editor 10 | // 06. Utility 11 | // 07. Accessibility 12 | // 08. Toolbar 13 | // 09. Air 14 | // 10. Toolbar & Air 15 | // 11. Tooltip 16 | // 12. Structure 17 | // 13. Upload 18 | // 14. Progress 19 | // 15. Animation 20 | // 21 | // ------------------------------------------------------------------ 22 | 23 | 24 | // =Base 25 | // ------------------------------------------------------------------ 26 | .redactor-box { 27 | position: relative; 28 | overflow: visible; 29 | } 30 | .redactor-layer, 31 | .redactor-box { 32 | background: #fff; 33 | } 34 | 35 | 36 | // =Zindex 37 | // ------------------------------------------------------------------ 38 | .redactor-layer, 39 | .redactor-box, 40 | .redactor-box textarea { 41 | z-index: 2; 42 | } 43 | .redactor-link-tooltip { 44 | z-index: 1050; 45 | } 46 | .redactor-toolbar-box { 47 | z-index: 100; 48 | } 49 | .redactor-box-fullscreen { 50 | z-index: 1051; 51 | } 52 | .redactor-air, 53 | .redactor-dropdown { 54 | z-index: 1052; 55 | } 56 | #redactor-modal-overlay, 57 | #redactor-modal-box, 58 | #redactor-modal { 59 | z-index: 1053; 60 | } 61 | .redactor-body-fullscreen .redactor-link-tooltip { 62 | z-index: 1099; 63 | } 64 | 65 | 66 | // =Fullscreen 67 | // ------------------------------------------------------------------ 68 | .redactor-box-fullscreen { 69 | position: fixed; 70 | top: 0; 71 | left: 0; 72 | width: 100%; 73 | } 74 | 75 | 76 | // =Placeholder 77 | // ------------------------------------------------------------------ 78 | .redactor-placeholder:after { 79 | position: absolute; 80 | top: 20px; 81 | left: 20px; 82 | display: block; 83 | color: rgba(0, 0, 0, .3); 84 | content: attr(placeholder); 85 | font-weight: normal !important; 86 | } 87 | 88 | 89 | // =Editor 90 | // ------------------------------------------------------------------ 91 | .redactor-layer { 92 | position: relative; 93 | overflow: auto; 94 | margin: 0; 95 | padding: 24px 32px 12px 32px; 96 | outline: none; 97 | border: 2px solid color($gray, light); 98 | border-top: 0; 99 | border-radius: 0 0 border-radius(s) border-radius(s); 100 | box-shadow: 0 3px rgba($black, .075); 101 | white-space: normal; 102 | } 103 | .redactor-relative { 104 | position: relative; 105 | } 106 | .redactor-in { 107 | cursor: text; 108 | } 109 | .redactor-layer:focus, 110 | .redactor-in:focus { 111 | outline: none; 112 | } 113 | 114 | 115 | // =Utility 116 | // ------------------------------------------------------------------ 117 | .redactor-scrollbar-measure { 118 | position: absolute; 119 | top: -9999px; 120 | overflow: scroll; 121 | width: 50px; 122 | height: 50px; 123 | } 124 | .redactor-script-tag { 125 | display: none; 126 | } 127 | .redactor-layer-img-edit img { 128 | cursor: pointer; 129 | } 130 | 131 | // Accessibility 132 | // ------------------------------------------------------------------ 133 | .redactor-voice-label { 134 | display: none; 135 | } 136 | 137 | .redactor-voice-alert { 138 | position: absolute; 139 | left: -3000px; 140 | } 141 | 142 | 143 | // =Toolbar 144 | // ------------------------------------------------------------------ 145 | .redactor-toolbar-box { 146 | position: sticky; 147 | top: 0; 148 | 149 | & .re-button-tooltip { 150 | position: absolute; 151 | z-index: 101; 152 | display: none !important; 153 | padding: 3px 8px; 154 | border-radius: 2px; 155 | background: rgba(0, 0, 0, .9); 156 | color: rgba(255, 255, 255, .8); 157 | white-space: nowrap; 158 | font-size: 12px; 159 | font-family: $monospace-font-family; 160 | } 161 | } 162 | 163 | .redactor-toolbar { 164 | 165 | @include clearfix; 166 | 167 | padding: 0 !important; 168 | border: 2px solid color($gray, light); 169 | border-bottom: 0; 170 | border-radius: border-radius(s) border-radius(s) 0 0; 171 | background: #fff; 172 | box-shadow: 0 3px rgba($black, .075); 173 | } 174 | .redactor-toolbar.redactor-toolbar-overflow { 175 | overflow-y: auto; 176 | height: 48px; 177 | white-space: nowrap; 178 | } 179 | .redactor-toolbar li a { 180 | color: color($gray, dark); 181 | 182 | &:hover { 183 | outline: none; 184 | background-color: color($blue, lighter); 185 | } 186 | &:active, 187 | &.redactor-act { 188 | outline: none; 189 | background-color: color($gray, lighter); 190 | } 191 | } 192 | .redactor-toolbar li a.redactor-button-disabled { 193 | opacity: 0.3; 194 | &:hover { 195 | outline: none; 196 | background-color: transparent !important; 197 | color: #333; 198 | cursor: default; 199 | } 200 | } 201 | .redactor-toolbar li a.redactor-button-focus { 202 | background: #000; 203 | color: #fff; 204 | } 205 | .redactor-toolbar.redactor-toolbar-external { 206 | z-index: 100; 207 | border: 1px solid rgba(0, 0, 0, .1); 208 | box-shadow: none; 209 | } 210 | 211 | 212 | // =Air 213 | // ------------------------------------------------------------------ 214 | .redactor-air { 215 | 216 | position: absolute; 217 | padding: 0; 218 | min-width: 200px; 219 | max-width: 576px; 220 | border: none; 221 | border-radius: 4px; 222 | background: rgba(0, 0, 0, .9); 223 | } 224 | .redactor-air li a { 225 | color: rgba(255, 255, 255, .75); 226 | 227 | &:hover { 228 | outline: none; 229 | background-color: rgba(31,120,216,1); 230 | color: #fff; 231 | } 232 | &:active, 233 | &.redactor-act { 234 | outline: none; 235 | background-color: #333; 236 | color: rgba(255, 255, 255, .5); 237 | } 238 | } 239 | .redactor-air li a.redactor-button-disabled { 240 | opacity: .3; 241 | &:hover { 242 | outline: none; 243 | background-color: transparent !important; 244 | color: rgba(255, 255, 255, .3); 245 | cursor: default; 246 | } 247 | } 248 | .redactor-air li a.redactor-button-focus { 249 | background: #eee; 250 | color: #333; 251 | } 252 | 253 | 254 | // =Toolbar & Air 255 | // ------------------------------------------------------------------ 256 | .redactor-air, 257 | .redactor-toolbar { 258 | margin: 0 !important; 259 | list-style: none !important; 260 | font-family: $ui-font-family; 261 | line-height: 1 !important; 262 | } 263 | .redactor-air li, 264 | .redactor-toolbar li { 265 | display: inline-block; 266 | margin: 0 !important; 267 | padding: 0 !important; 268 | outline: none; 269 | list-style: none !important; 270 | vertical-align: top; 271 | } 272 | .redactor-air li a, 273 | .redactor-toolbar li a { 274 | position: relative; 275 | display: block; 276 | box-sizing: border-box; 277 | padding: 16px; 278 | padding-top: 17px; 279 | padding-bottom: 15px; 280 | height: 48px; 281 | outline: none; 282 | border: none; 283 | text-align: center; 284 | text-decoration: none; 285 | font-size: 14px; 286 | line-height: 48px; 287 | line-height: 1; 288 | cursor: pointer; 289 | cursor: pointer; 290 | zoom: 1; 291 | 292 | &.re-button-icon { 293 | padding: 16px; 294 | font-size: 16px; 295 | } 296 | } 297 | .redactor-toolbar li a { 298 | border-right: 1px solid rgba(0, 0, 0, .05); 299 | } 300 | .redactor-toolbar li:last-child a { 301 | border-right: none; 302 | } 303 | 304 | 305 | // =Tooltip 306 | // ------------------------------------------------------------------ 307 | .redactor-link-tooltip { 308 | position: absolute; 309 | display: inline-block; 310 | padding: 16px; 311 | border-radius: 3px; 312 | background-color: rgba(#000, .95); 313 | color: #555 !important; 314 | font-size: 14px; 315 | font-family: $ui-font-family; 316 | line-height: 1; 317 | } 318 | .redactor-link-tooltip a { 319 | margin: 0 8px; 320 | color: #ccc; 321 | text-decoration: none; 322 | font-size: 14px; 323 | 324 | &:hover { 325 | color: #fff; 326 | } 327 | } 328 | 329 | 330 | // =Structure 331 | // ------------------------------------------------------------------ 332 | .redactor-structure { 333 | 334 | h1, h2, h3, h4, h5, h6, div { 335 | position: relative; 336 | &:before { 337 | position: absolute; 338 | left: -28px; 339 | width: 24px; 340 | text-align: right; 341 | font-weight: normal; 342 | font-size: 10px; 343 | opacity: .3; 344 | } 345 | } 346 | h1:before { content: "h1"; } 347 | h2:before { content: "h2"; } 348 | h3:before { content: "h3"; } 349 | h4:before { content: "h4"; } 350 | h5:before { content: "h5"; } 351 | h6:before { content: "h6"; } 352 | div:before { content: "div"; } 353 | 354 | } 355 | 356 | // =Image 357 | // ------------------------------------------------------------------ 358 | #redactor-image-box { 359 | position: relative; 360 | display: inline-block; 361 | max-width: 100%; 362 | outline: 3px solid color($blue, light); 363 | box-shadow: 0 0 12px color($blue, light); 364 | line-height: 0; 365 | } 366 | #redactor-image-editter { 367 | position: absolute; 368 | top: 50%; 369 | left: 50%; 370 | z-index: 5; 371 | margin-top: -11px; 372 | margin-left: -18px; 373 | padding: 7px 10px; 374 | border-radius: 3px; 375 | background-color: rgba(#000, .9); 376 | color: #fff; 377 | font-size: 12px; 378 | line-height: 1; 379 | cursor: pointer; 380 | } 381 | #redactor-image-resizer { 382 | position: absolute; 383 | right: -6px; 384 | bottom: -5px; 385 | z-index: 2; 386 | box-sizing: border-box; 387 | width: 10px; 388 | height: 10px; 389 | border: 2px solid #000; 390 | background-color: rgba(#fff, .9); 391 | line-height: 1; 392 | cursor: nw-resize; 393 | } 394 | 395 | // =Upload 396 | // ------------------------------------------------------------------ 397 | #redactor-droparea { 398 | position: relative; 399 | overflow: hidden; 400 | padding: 64px 24px; 401 | border: 3px dashed rgba(0, 0, 0, .1); 402 | } 403 | #redactor-droparea.drag-hover { 404 | background: rgba(200, 222, 250, 0.75); 405 | } 406 | #redactor-droparea.drag-drop { 407 | background: rgba(250, 248, 200, 0.5); 408 | } 409 | #redactor-droparea-placeholder { 410 | margin-left: 64px; 411 | color: rgba(0, 0, 0, .7); 412 | text-align: center; 413 | font-size: 12px; 414 | } 415 | .redactor-image-dragover { 416 | outline: 2px solid color($blue, light); 417 | } 418 | 419 | 420 | // =Progress 421 | // ------------------------------------------------------------------ 422 | #redactor-progress { 423 | position: fixed; 424 | top: 0; 425 | left: 0; 426 | z-index: 1000000; 427 | width: 100%; 428 | height: 10px; 429 | } 430 | #redactor-progress span { 431 | 432 | @include striped-redactor; 433 | @include animation-redactor(progress-bar-stripes 2s linear infinite); 434 | 435 | display: block; 436 | width: 100%; 437 | height: 100%; 438 | background-color: color($blue, dark); 439 | background-size: 40px 40px; 440 | } 441 | 442 | @-webkit-keyframes progress-bar-stripes { 443 | from { background-position: 40px 0; } 444 | to { background-position: 0 0; } 445 | } 446 | @-o-keyframes progress-bar-stripes { 447 | from { background-position: 40px 0; } 448 | to { background-position: 0 0; } 449 | } 450 | @keyframes progress-bar-stripes { 451 | from { background-position: 40px 0; } 452 | to { background-position: 0 0; } 453 | } 454 | 455 | 456 | // =Animation 457 | // ------------------------------------------------------------------ 458 | .redactor-animated { 459 | -webkit-animation-duration: 1s; 460 | animation-duration: 1s; 461 | -webkit-animation-fill-mode: both; 462 | animation-fill-mode: both; 463 | } 464 | 465 | // slideUp 466 | @include keyframe(redactorSlideUp) { 467 | to { 468 | padding-top: 0; 469 | padding-bottom: 0; 470 | height: 0; 471 | } 472 | } 473 | .redactor-slideUp { 474 | overflow: hidden; 475 | -webkit-animation-name: redactorSlideUp; 476 | animation-name: redactorSlideUp; 477 | } 478 | 479 | // slideDown 480 | @include keyframe(redactorSlideDown) { 481 | from { 482 | padding-top: 0; 483 | padding-bottom: 0; 484 | height: 0; 485 | } 486 | } 487 | 488 | .redactor-slideDown { 489 | overflow: hidden; 490 | -webkit-animation-name: redactorSlideDown; 491 | animation-name: redactorSlideDown; 492 | } 493 | 494 | // fadeIn 495 | @include keyframe(redactorFadeIn) { 496 | from { 497 | opacity: 0; 498 | } 499 | to { 500 | opacity: 1; 501 | } 502 | } 503 | 504 | .redactor-fadeIn { 505 | -webkit-animation-name: redactorFadeIn; 506 | animation-name: redactorFadeIn; 507 | } 508 | 509 | 510 | // fadeOut 511 | @include keyframe(redactorFadeOut) { 512 | from { 513 | opacity: 1; 514 | } 515 | to { 516 | opacity: 0; 517 | } 518 | } 519 | 520 | .redactor-fadeOut { 521 | -webkit-animation-name: redactorFadeOut; 522 | animation-name: redactorFadeOut; 523 | } 524 | -------------------------------------------------------------------------------- /src/vendor/redactor/icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Redactor'; 3 | src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | [class^="re-icon-"], [class*=" re-icon-"] { 9 | /* use !important to prevent issues with browser extensions that change fonts */ 10 | font-family: 'Redactor' !important; 11 | speak: none; 12 | font-style: normal; 13 | font-weight: normal; 14 | font-variant: normal; 15 | text-transform: none; 16 | line-height: 1; 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } 20 | 21 | .re-icon-aligncenter:before { 22 | content: "\e900"; 23 | } 24 | .re-icon-alignment:before, 25 | .re-icon-alignleft:before { 26 | content: "\e901"; 27 | } 28 | .re-icon-alignright:before { 29 | content: "\e902"; 30 | } 31 | .re-icon-bold:before { 32 | content: "\e903"; 33 | } 34 | .re-icon-bookmark:before { 35 | content: "\e904"; 36 | } 37 | .re-icon-clips:before { 38 | content: "\e905"; 39 | } 40 | .re-icon-codesnippets:before { 41 | content: "\e906"; 42 | } 43 | .re-icon-deleted:before { 44 | content: "\e907"; 45 | } 46 | .re-icon-expand:before { 47 | content: "\e908"; 48 | } 49 | .re-icon-file:before { 50 | content: "\e909"; 51 | } 52 | .re-icon-fontcolor:before { 53 | content: "\e90a"; 54 | } 55 | .re-icon-fontfamily:before { 56 | content: "\e90b"; 57 | } 58 | .re-icon-fontsize:before { 59 | content: "\e90c"; 60 | } 61 | .re-icon-format:before { 62 | content: "\e90d"; 63 | } 64 | .re-icon-html:before { 65 | content: "\e90e"; 66 | } 67 | .re-icon-imagecenter:before { 68 | content: "\e90f"; 69 | } 70 | .re-icon-imageleft:before { 71 | content: "\e910"; 72 | } 73 | .re-icon-imageright:before { 74 | content: "\e911"; 75 | } 76 | .re-icon-image:before { 77 | content: "\e912"; 78 | } 79 | .re-icon-indent:before { 80 | content: "\e913"; 81 | } 82 | .re-icon-inline:before { 83 | content: "\e914"; 84 | } 85 | .re-icon-italic:before { 86 | content: "\e915"; 87 | } 88 | .re-icon-horizontalrule:before { 89 | content: "\e916"; 90 | } 91 | .re-icon-link:before { 92 | content: "\e917"; 93 | } 94 | .re-icon-ol:before, 95 | .re-icon-ordered:before { 96 | content: "\e918"; 97 | } 98 | .re-icon-outdent:before { 99 | content: "\e919"; 100 | } 101 | .re-icon-properties:before { 102 | content: "\e91a"; 103 | } 104 | .re-icon-readmore:before { 105 | content: "\e91b"; 106 | } 107 | .re-icon-redo:before { 108 | content: "\e91c"; 109 | } 110 | .re-icon-retract:before { 111 | content: "\e91d"; 112 | } 113 | .re-icon-specialcharacters:before { 114 | content: "\e91e"; 115 | } 116 | .re-icon-sub:before { 117 | content: "\e91f"; 118 | } 119 | .re-icon-sup:before { 120 | content: "\e920"; 121 | } 122 | .re-icon-table:before { 123 | content: "\e921"; 124 | } 125 | .re-icon-textdirection:before { 126 | content: "\e922"; 127 | } 128 | .re-icon-toggle:before { 129 | content: "\e923"; 130 | } 131 | .re-icon-underline:before { 132 | content: "\e924"; 133 | } 134 | .re-icon-undo:before { 135 | content: "\e925"; 136 | } 137 | .re-icon-ul:before, 138 | .re-icon-lists:before, 139 | .re-icon-unordered:before { 140 | content: "\e926"; 141 | } 142 | .re-icon-video:before { 143 | content: "\e927"; 144 | } 145 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | blender-css 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | 26 | 41 |
42 | 60 |
61 |
62 |
63 | 68 | 72 |
73 |
74 |
75 |
76 | 77 |

Blender-css

78 |

79 | Examples of common elements in HTML (no scripts). 80 |

81 | 82 |

Alerts

83 |
84 |
Fixed success message
85 |
86 |

87 |

Success message
88 |
Info message
89 |
Warning
90 |
Error
91 |
Small neutral
92 |

93 | 94 |

Buttons

95 |

96 | 97 |

98 |

99 | 100 |

101 |

102 | 103 |

104 | 105 |

Disabled

106 |

107 | 108 |

109 |

110 | 111 |

112 |

113 | 114 |

115 | 116 |

Forms

117 | 118 |
119 |
120 | 121 |
EN
122 | 123 |
124 | 127 |
128 |
129 | 130 | 131 |
132 |
133 |
134 |
135 | 136 | 137 | 138 |
139 |
140 |
141 |
142 | 143 | 144 |
145 |
146 |
147 |
148 |
149 |
150 | 151 | 152 |
153 |
154 |
155 |
156 | 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 |
165 |
166 |
167 |
168 | 169 | 170 | 171 | Select2 174 | 175 | 176 | 177 | 178 | 179 | 180 |
181 |
182 |
183 | 184 |

Margins

185 |

186 | h-margin-left-small 187 |

188 |

189 | h-margin-left 190 |

191 |

192 | h-margin-left-medium 193 |

194 |

195 | h-margin-left-large 196 |

197 | 198 |

Padding

199 |

200 | h-padding-left-small 201 |

202 |

203 | h-padding-left 204 |

205 |

206 | h-padding-left-medium 207 |

208 |

209 | h-padding-left-large 210 |

211 | 212 | 213 |

Pagination

214 |
    215 |
  • «
    • 216 |
  • 1
    • 217 |
  • 2
    • 218 |
  • 3
    • 219 |
  • 4
    • 220 |
  • 5
    • 221 |
  • 6
    • 222 |
    • 223 |
224 | 225 |

Tabs

226 |

227 |

240 |

241 | 242 |

Datatable

243 |
244 |
245 | 246 |
247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 261 | 264 | 267 | 272 | 273 | 274 | 277 | 280 | 283 | 288 | 289 | 290 | 293 | 296 | 299 | 304 | 305 | 306 |
E-mailFirst NameLast Name
259 | someone@spatie.be 260 | 262 | First name 263 | 265 | Last Name 266 | 268 |
269 | 270 |
271 |
275 | someone@spatie.be 276 | 278 | First name 279 | 281 | Last Name 282 | 284 |
285 | 286 |
287 |
291 | someone@spatie.be 292 | 294 | First name 295 | 297 | Last Name 298 | 300 |
301 | 302 |
303 |
307 |
Aantal: 14
308 |
309 | 310 |

Sortable table

311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 326 | 333 | 334 | 335 | 340 | 347 | 348 | 349 | 354 | 361 | 362 | 363 |
News
322 | 323 | Category 1 324 | 325 | 327 |
328 | 331 |
332 |
336 | 337 | Category 2 338 | 339 | 341 |
342 | 345 |
346 |
350 | 351 | Category 3 352 | 353 | 355 |
356 | 359 |
360 |
364 |
365 |
366 |
367 | 383 | 384 | 385 | 386 | -------------------------------------------------------------------------------- /src/vendor/datetimepicker.scss: -------------------------------------------------------------------------------- 1 | .xdsoft_datetimepicker { 2 | display: none; 3 | position: absolute; 4 | padding: 8px; 5 | padding-top: 2px; 6 | padding-left: 0; 7 | z-index: 9999; 8 | 9 | color: #333; 10 | background: #fff; 11 | border: 2px solid color($gray, light); 12 | border-radius: border-radius(s); 13 | box-shadow: 0 1px 20px rgba(0, 0, 0, .25); 14 | } 15 | 16 | .xdsoft_datetimepicker iframe { 17 | position: absolute; 18 | top: 0; 19 | left: 0; 20 | width: 75px; 21 | height: 210px; 22 | 23 | background: transparent; 24 | border: none; 25 | } 26 | 27 | /*For IE8 or lower*/ 28 | .xdsoft_datetimepicker button { 29 | border: none !important; 30 | box-shadow: none !important; 31 | } 32 | 33 | .xdsoft_noselect { 34 | user-select: none; 35 | -moz-user-select: none; 36 | -ms-user-select: none; 37 | -webkit-user-select: none; 38 | 39 | -khtml-user-select: none; 40 | -webkit-touch-callout: none; 41 | -o-user-select: none; 42 | } 43 | 44 | .xdsoft_noselect::selection { 45 | background: transparent; 46 | } 47 | .xdsoft_noselect::-moz-selection { 48 | background: transparent; 49 | } 50 | 51 | .xdsoft_datetimepicker.xdsoft_inline { 52 | display: inline-block; 53 | position: static; 54 | 55 | box-shadow: none; 56 | } 57 | 58 | .xdsoft_datetimepicker * { 59 | box-sizing: border-box; 60 | margin: 0; 61 | padding: 0; 62 | 63 | -moz-box-sizing: border-box; 64 | } 65 | 66 | .xdsoft_datetimepicker .xdsoft_datepicker, 67 | .xdsoft_datetimepicker .xdsoft_timepicker { 68 | display: none; 69 | } 70 | 71 | .xdsoft_datetimepicker .xdsoft_datepicker.active, 72 | .xdsoft_datetimepicker .xdsoft_timepicker.active { 73 | display: block; 74 | } 75 | 76 | .xdsoft_datetimepicker .xdsoft_datepicker { 77 | width: 224px; 78 | float: left; 79 | margin-left: 8px; 80 | } 81 | 82 | .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker { 83 | width: 256px; 84 | } 85 | 86 | .xdsoft_datetimepicker .xdsoft_timepicker { 87 | width: 58px; 88 | float: left; 89 | margin-top: 0; 90 | margin-left: 8px; 91 | 92 | text-align: center; 93 | } 94 | 95 | .xdsoft_datetimepicker .xdsoft_datepicker.active + .xdsoft_timepicker { 96 | margin-top: 8px; 97 | margin-bottom: 3px; 98 | } 99 | 100 | .xdsoft_datetimepicker .xdsoft_mounthpicker { 101 | position: relative; 102 | 103 | text-align: center; 104 | } 105 | 106 | .xdsoft_datetimepicker .xdsoft_label i, 107 | .xdsoft_datetimepicker .xdsoft_prev, 108 | .xdsoft_datetimepicker .xdsoft_next, 109 | .xdsoft_datetimepicker .xdsoft_today_button { 110 | color: color($gray); 111 | 112 | font-family: font-family(icons); 113 | } 114 | 115 | .xdsoft_datetimepicker .xdsoft_label i { 116 | display: inline-block; 117 | width: 9px; 118 | height: 20px; 119 | vertical-align: middle; 120 | 121 | background-position: -92px -19px; 122 | opacity: .5; 123 | } 124 | 125 | .xdsoft_datetimepicker .xdsoft_prev { 126 | float: left; 127 | 128 | &:after { 129 | content: '\f104'; //angle-right 130 | 131 | font-family: font-family(icons); 132 | } 133 | } 134 | .xdsoft_datetimepicker .xdsoft_today_button { 135 | float: left; 136 | margin-left: 5px; 137 | 138 | &:after { 139 | content: '\f107'; //angle-right 140 | 141 | font-family: font-family(icons); 142 | } 143 | } 144 | 145 | .xdsoft_datetimepicker .xdsoft_next { 146 | float: right; 147 | 148 | background-position: 0 0; 149 | 150 | &:after { 151 | content: '\f105'; //angle-right 152 | 153 | font-family: font-family(icons); 154 | } 155 | } 156 | 157 | .xdsoft_datetimepicker .xdsoft_next, 158 | .xdsoft_datetimepicker .xdsoft_prev, 159 | .xdsoft_datetimepicker .xdsoft_today_button { 160 | display: block; 161 | position: relative; 162 | width: 20px; 163 | min-width: 0; 164 | height: 30px; 165 | padding: 0; 166 | overflow: hidden; 167 | 168 | background-color: transparent; 169 | background-repeat: no-repeat; 170 | border: 0 none; 171 | opacity: .5; 172 | outline: medium none; 173 | 174 | line-height: 1; 175 | white-space: nowrap; 176 | 177 | cursor: pointer; 178 | 179 | -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; 180 | } 181 | 182 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, 183 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { 184 | display: block; 185 | width: 30px; 186 | height: 15px; 187 | float: none; 188 | margin-top: 7px; 189 | margin-left: 14px; 190 | 191 | background-position: -40px -15px; 192 | } 193 | 194 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev { 195 | margin-top: 0; 196 | margin-bottom: 7px; 197 | 198 | background-position: -40px 0; 199 | } 200 | 201 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { 202 | height: 151px; 203 | overflow: hidden; 204 | 205 | border-bottom: 1px solid #ddd; 206 | } 207 | 208 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div { 209 | height: 25px; 210 | 211 | color: #666; 212 | background: #f5f5f5; 213 | border-collapse: collapse; 214 | border-top: 1px solid #ddd; 215 | border-bottom-width: 0; 216 | 217 | font-size: 12px; 218 | line-height: 25px; 219 | text-align: center; 220 | 221 | cursor: pointer; 222 | } 223 | 224 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:first-child { 225 | border-top-width: 0; 226 | } 227 | 228 | .xdsoft_datetimepicker .xdsoft_today_button:hover, 229 | .xdsoft_datetimepicker .xdsoft_next:hover, 230 | .xdsoft_datetimepicker .xdsoft_prev:hover { 231 | opacity: 1; 232 | 233 | -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; 234 | } 235 | 236 | .xdsoft_datetimepicker .xdsoft_label { 237 | display: inline; 238 | position: relative; 239 | width: 182px; 240 | float: left; 241 | margin: 0; 242 | padding: 5px 3px; 243 | z-index: 9999; 244 | 245 | background-color: #fff; 246 | 247 | font-size: 14px; 248 | line-height: 20px; 249 | text-align: center; 250 | 251 | cursor: pointer; 252 | } 253 | 254 | .xdsoft_datetimepicker .xdsoft_label:hover > span { 255 | text-decoration: underline; 256 | } 257 | 258 | .xdsoft_datetimepicker .xdsoft_label:hover i { 259 | opacity: 1.0; 260 | } 261 | 262 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { 263 | display: none; 264 | position: absolute; 265 | top: 30px; 266 | right: 0; 267 | max-height: 160px; 268 | overflow-y: hidden; 269 | z-index: 101; 270 | 271 | background: #fff; 272 | border: 1px solid #ccc; 273 | } 274 | 275 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect { 276 | right: -7px; 277 | } 278 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect { 279 | right: 2px; 280 | } 281 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { 282 | color: #fff; 283 | background: color($blue, lighter); 284 | } 285 | 286 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { 287 | padding: 2px 10px 2px 5px; 288 | 289 | text-decoration: none !important; 290 | } 291 | 292 | .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { 293 | color: #fff; 294 | background: color($blue, lighter); 295 | 296 | font-weight: 700; 297 | } 298 | 299 | .xdsoft_datetimepicker .xdsoft_month { 300 | width: 100px; 301 | 302 | text-align: right; 303 | } 304 | 305 | .xdsoft_datetimepicker .xdsoft_calendar { 306 | clear: both; 307 | } 308 | 309 | .xdsoft_datetimepicker .xdsoft_year { 310 | width: 48px; 311 | margin-left: 5px; 312 | } 313 | 314 | .xdsoft_datetimepicker .xdsoft_calendar table { 315 | width: 100%; 316 | 317 | border-collapse: collapse; 318 | } 319 | 320 | .xdsoft_datetimepicker .xdsoft_calendar td > div { 321 | padding-right: 5px; 322 | } 323 | 324 | .xdsoft_datetimepicker .xdsoft_calendar th { 325 | height: 25px; 326 | } 327 | 328 | .xdsoft_datetimepicker .xdsoft_calendar td, 329 | .xdsoft_datetimepicker .xdsoft_calendar th { 330 | width: 14.2857142%; 331 | height: 25px; 332 | padding: 0; 333 | vertical-align: middle; 334 | 335 | color: #666; 336 | background: #f5f5f5; 337 | border: 1px solid #ddd; 338 | border-collapse: collapse; 339 | 340 | font-size: 12px; 341 | text-align: right; 342 | 343 | cursor: pointer; 344 | } 345 | .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, 346 | .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th { 347 | width: 12.5%; 348 | } 349 | 350 | .xdsoft_datetimepicker .xdsoft_calendar th { 351 | background: #f1f1f1; 352 | } 353 | 354 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { 355 | color: color($blue); 356 | 357 | font-weight: 700; 358 | } 359 | 360 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default { 361 | color: #000; 362 | background: #ffe9d2; 363 | box-shadow: #ffb871 0 1px 4px 0 inset; 364 | } 365 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint { 366 | color: #000; 367 | background: #c1ffc9; 368 | box-shadow: #00dd1c 0 1px 4px 0 inset; 369 | } 370 | 371 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, 372 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, 373 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { 374 | color: #fff; 375 | background: color($blue, lighter); 376 | 377 | font-weight: 700; 378 | } 379 | 380 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, 381 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, 382 | .xdsoft_datetimepicker .xdsoft_time_box > div > div.xdsoft_disabled { 383 | opacity: .5; 384 | 385 | cursor: default; 386 | 387 | -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; 388 | } 389 | 390 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { 391 | opacity: .2; 392 | 393 | -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)'; 394 | } 395 | 396 | .xdsoft_datetimepicker .xdsoft_calendar td:hover, 397 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover { 398 | color: #fff !important; 399 | background: color($blue) !important; 400 | box-shadow: none !important; 401 | } 402 | 403 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, 404 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover { 405 | color: #fff !important; 406 | background: #3af !important; 407 | box-shadow: #178fe5 0 1px 3px 0 inset !important; 408 | } 409 | 410 | .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, 411 | .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_disabled:hover { 412 | color: inherit !important; 413 | background: inherit !important; 414 | box-shadow: inherit !important; 415 | } 416 | 417 | .xdsoft_datetimepicker .xdsoft_calendar th { 418 | color: #999; 419 | 420 | font-weight: 700; 421 | text-align: center; 422 | 423 | cursor: default; 424 | } 425 | 426 | .xdsoft_datetimepicker .xdsoft_copyright { 427 | clear: both; 428 | float: none; 429 | margin-left: 8px; 430 | 431 | color: #ccc !important; 432 | 433 | font-size: 10px; 434 | } 435 | 436 | .xdsoft_datetimepicker .xdsoft_copyright a { 437 | color: #eee !important; 438 | } 439 | .xdsoft_datetimepicker .xdsoft_copyright a:hover { 440 | color: #aaa !important; 441 | } 442 | 443 | .xdsoft_time_box { 444 | position: relative; 445 | 446 | border: 1px solid #ccc; 447 | } 448 | .xdsoft_scrollbar > .xdsoft_scroller { 449 | height: 20px; 450 | 451 | background: #ccc !important; 452 | border-radius: 3px; 453 | } 454 | .xdsoft_scrollbar { 455 | position: absolute; 456 | top: 0; 457 | right: 0; 458 | bottom: 0; 459 | width: 7px; 460 | 461 | cursor: pointer; 462 | } 463 | .xdsoft_scroller_box { 464 | position: relative; 465 | } 466 | 467 | .xdsoft_datetimepicker.xdsoft_dark { 468 | color: #ccc; 469 | background: #000; 470 | border-top: 1px solid #333; 471 | border-right: 1px solid #333; 472 | border-bottom: 1px solid #444; 473 | border-left: 1px solid #333; 474 | box-shadow: 0 5px 15px -5px rgba(255, 255, 255, .506); 475 | } 476 | 477 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box { 478 | border-bottom: 1px solid #222; 479 | } 480 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div { 481 | color: #999; 482 | background: #0a0a0a; 483 | border-top: 1px solid #222; 484 | } 485 | 486 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label { 487 | background-color: #000; 488 | } 489 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select { 490 | background: #000; 491 | border: 1px solid #333; 492 | } 493 | 494 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { 495 | color: #000; 496 | background: #007fff; 497 | } 498 | 499 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { 500 | color: #000; 501 | background: #c50; 502 | box-shadow: #b03e00 0 1px 3px 0 inset; 503 | } 504 | 505 | 506 | 507 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td, 508 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { 509 | color: #999; 510 | background: #0a0a0a; 511 | border: 1px solid #222; 512 | } 513 | 514 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { 515 | background: #0e0e0e; 516 | } 517 | 518 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today { 519 | color: #c50; 520 | } 521 | 522 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default { 523 | color: #000; 524 | background: #ffe9d2; 525 | box-shadow: #ffb871 0 1px 4px 0 inset; 526 | } 527 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint { 528 | color: #000; 529 | background: #c1ffc9; 530 | box-shadow: #00dd1c 0 1px 4px 0 inset; 531 | } 532 | 533 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default, 534 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current, 535 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { 536 | color: #000; 537 | background: #c50; 538 | box-shadow: #b03e00 0 1px 3px 0 inset; 539 | } 540 | 541 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover, 542 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box > div > div:hover { 543 | color: #000 !important; 544 | background: #007fff !important; 545 | } 546 | 547 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { 548 | color: #666; 549 | } 550 | 551 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { 552 | color: #333 !important; 553 | } 554 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a { 555 | color: #111 !important; 556 | } 557 | .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { 558 | color: #555 !important; 559 | } 560 | 561 | .xdsoft_dark .xdsoft_time_box { 562 | border: 1px solid #333; 563 | } 564 | 565 | .xdsoft_dark .xdsoft_scrollbar > .xdsoft_scroller { 566 | background: #333 !important; 567 | } 568 | .xdsoft_datetimepicker .xdsoft_save_selected { 569 | display: block; 570 | width: 100%; 571 | margin-top: 5px; 572 | 573 | color: #454551; 574 | border: 1px solid #ddd !important; 575 | 576 | font-size: 13px; 577 | } 578 | .xdsoft_datetimepicker .blue-gradient-button { 579 | position: relative; 580 | height: 28px; 581 | padding: 4px 17px 4px 33px; 582 | 583 | color: #82878c; 584 | /* IE10+ */ 585 | background: linear-gradient(to bottom, #fff 0%, #f4f8fa 73%); 586 | background: -moz-linear-gradient(top, #fff 0%, #f4f8fa 73%); 587 | /* Opera 11.10+ */ 588 | background: -ms-linear-gradient(top, #fff 0%, #f4f8fa 73%); 589 | /* Chrome10+,Safari5.1+ */ 590 | background: -o-linear-gradient(top, #fff 0%, #f4f8fa 73%); 591 | /* Chrome,Safari4+ */ 592 | background: -webkit-linear-gradient(top, #fff 0%, #f4f8fa 73%); 593 | /* FF3.6+ */ 594 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(73%, #f4f8fa)); 595 | border: 1px solid #d7d8da; 596 | /* W3C */ 597 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f4f8fa',GradientType=0 ); 598 | 599 | font-family: 'museo-sans', 'Book Antiqua', sans-serif; 600 | font-size: 12px; 601 | font-weight: 300; 602 | /* IE6-9 */ 603 | } 604 | .xdsoft_datetimepicker .blue-gradient-button:hover, 605 | .xdsoft_datetimepicker .blue-gradient-button:focus, 606 | .xdsoft_datetimepicker .blue-gradient-button:hover span, 607 | .xdsoft_datetimepicker .blue-gradient-button:focus span { 608 | color: #454551; 609 | background: -moz-linear-gradient(top, #f4f8fa 0%, #fff 73%); 610 | /* FF3.6+ */ 611 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f8fa), color-stop(73%, #fff)); 612 | /* Chrome,Safari4+ */ 613 | background: -webkit-linear-gradient(top, #f4f8fa 0%, #fff 73%); 614 | /* Chrome10+,Safari5.1+ */ 615 | background: -o-linear-gradient(top, #f4f8fa 0%, #fff 73%); 616 | /* Opera 11.10+ */ 617 | background: -ms-linear-gradient(top, #f4f8fa 0%, #fff 73%); 618 | /* IE10+ */ 619 | background: linear-gradient(to bottom, #f4f8fa 0%, #fff 73%); 620 | /* W3C */ 621 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8fa', endColorstr='#FFF',GradientType=0 ); 622 | /* IE6-9 */ 623 | } 624 | -------------------------------------------------------------------------------- /demo/fonts/font-awesome/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0, 0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-genderless:before,.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"} --------------------------------------------------------------------------------