diff options
Diffstat (limited to 'system/admin/static/editor/sass')
31 files changed, 9567 insertions, 0 deletions
diff --git a/system/admin/static/editor/sass/components/_buttons.scss b/system/admin/static/editor/sass/components/_buttons.scss new file mode 100644 index 0000000..7192bec --- /dev/null +++ b/system/admin/static/editor/sass/components/_buttons.scss @@ -0,0 +1,157 @@ +// shared styles +.btn, .btn-flat { + border: none; + border-radius: 2px; + display: inline-block; + height: $button-height; + line-height: $button-line-height; + // margin-bottom: 15px; + outline: 0; + padding: 0 2rem; + text-transform: uppercase; + vertical-align: middle; + // Gets rid of tap active state + -webkit-tap-highlight-color: transparent; +} +// Disabled shared style +.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled { + background-color: $button-bg-color-disabled !important; + box-shadow: none; + color: $button-color-disabled !important; + cursor: default; + * { + pointer-events: none; + } + + &:hover { + background-color: $button-bg-color-disabled; + color: $button-color-disabled; + } +} +// Shared icon styles +.btn, .btn-floating, .btn-large, .btn-flat { + i { + font-size: $button-font-size-shared; + line-height: inherit; + } +} + +// Raised Button +.btn { + text-decoration:none; + color: $button-color-raised; + background-color: $button-color; + text-align: center; + letter-spacing: .5px; + @extend .z-depth-1; + @include transition(.2s ease-out); + cursor: pointer; + + &:hover { + background-color: lighten($button-color, 5%); + @extend .z-depth-1-half; + } +} + +// Floating button +.btn-floating { + display: inline-block; + color: $button-color-raised; + position: relative; + overflow: hidden; + z-index: 1; + width: $button-floating-size; + height: $button-floating-size; + line-height: $button-floating-size; + padding: 0; + background-color: $button-color; + border-radius: 50%; + @extend .z-depth-1; + transition: .3s; + cursor: pointer; + vertical-align: middle; + + i { + width: inherit; + display: inline-block; + text-align: center; + color: $button-color-raised; + font-size: $button-large-icon-font-size; + line-height: $button-floating-size; + } + + &:hover { + @extend .z-depth-1-half; + } + &:before { + border-radius: 0; + } + &.btn-large { + width: $button-floating-size * 1.5; + height: $button-floating-size * 1.5; + i{ + line-height: $button-floating-size * 1.5; + } + } + +} +// button fix +button.btn-floating { + border: none; +} + +// Fixed Action Button +.fixed-action-btn { + position: fixed; + right: 23px; + bottom: 23px; + padding-top: 15px; + margin-bottom: 0; + z-index: 998; + + ul { + left: 0; + right: 0; + text-align: center; + position: absolute; + bottom: 64px; + margin: 0; + + li { + margin-bottom: 15px; + } + + a.btn-floating { + opacity: 0; + } + } +} + +// Flat button +.btn-flat { + box-shadow: none; + background-color: transparent; + color: $button-color-flat; + cursor: pointer; + + &.disabled { + color: lighten(#999, 10%); + cursor: default; + } +} + +// Large button +.btn-large { + @extend .btn; + height: $button-height * 1.5; + line-height: 56px; + + i { + font-size: $button-large-icon-font-size; + } +} + +// Block button +.btn-block { + display: block; +} diff --git a/system/admin/static/editor/sass/components/_cards.scss b/system/admin/static/editor/sass/components/_cards.scss new file mode 100644 index 0000000..524d0cf --- /dev/null +++ b/system/admin/static/editor/sass/components/_cards.scss @@ -0,0 +1,152 @@ + + +.card-panel { + transition: box-shadow .25s; + padding: $card-padding; + margin: $element-top-margin 0 $element-bottom-margin 0; + border-radius: 2px; + @extend .z-depth-1; + background-color: $card-bg-color; +} + +.card { + position: relative; + overflow: hidden; + margin: $element-top-margin 0 $element-bottom-margin 0; + background-color: $card-bg-color; + transition: box-shadow .25s; + border-radius: 2px; + @extend .z-depth-1; + + + .card-title { + color: $card-bg-color; + font-size: 24px; + font-weight: 300; + &.activator { + cursor: pointer; + } + } + + // Card Sizes + &.small, &.medium, &.large { + position: relative; + + .card-image { + overflow: hidden; + } + .card-content { + overflow: hidden; + } + .card-action { + position: absolute; + bottom: 0; + left: 0; + right: 0; + } + } + + &.small { + height: 300px; + + .card-image { + height: 150px; + } + .card-content { + height: 150px; + } + + } + + &.medium { + height: 400px; + + .card-image { + height: 250px; + } + .card-content { + height: 150px; + } + } + + &.large { + height: 500px; + + .card-image { + height: 330px; + } + .card-content { + height: 170px; + } + } + + + .card-image { + position: relative; + + // Image background for content + img { + border-radius: 2px 2px 0 0; + position: relative; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + } + + .card-title { + position: absolute; + bottom: 0; + left: 0; + padding: $card-padding; + } + + } + + .card-content { + padding: $card-padding; + border-radius: 0 0 2px 2px; + + + p { + margin: 0; + color: inherit; + } + .card-title { + line-height: 48px; + } + } + + .card-action { + border-top: 1px solid rgba(160,160,160,.2); + padding: $card-padding; + + a { + color: $card-link-color; + margin-right: $card-padding; + @include transition(color .3s ease); + text-transform: uppercase; + + &:hover { color: $card-link-color-light; } + } + } + + .card-reveal { + padding: $card-padding; + position: absolute; + background-color: $card-bg-color; + width: 100%; + overflow-y: auto; + top: 100%; + height: 100%; + z-index: 1; + display: none; + + .card-title { + cursor: pointer; + display: block; + } + + } +} diff --git a/system/admin/static/editor/sass/components/_collapsible.scss b/system/admin/static/editor/sass/components/_collapsible.scss new file mode 100644 index 0000000..6b45d1e --- /dev/null +++ b/system/admin/static/editor/sass/components/_collapsible.scss @@ -0,0 +1,85 @@ +.collapsible { + border-top: 1px solid $collapsible-border-color; + border-right: 1px solid $collapsible-border-color; + border-left: 1px solid $collapsible-border-color; + margin: $element-top-margin 0 $element-bottom-margin 0; + @extend .z-depth-1; +} + +.collapsible-header { + display: block; + cursor: pointer; + height: $collapsible-height; + line-height: $collapsible-height; + padding: 0 1rem; + background-color: $collapsible-header-color; + border-bottom: 1px solid $collapsible-border-color; + + i { + width: 2rem; + font-size: 1.6rem; + line-height: $collapsible-height; + display: block; + float: left; + text-align: center; + margin-right: 1rem; + } +} + +.collapsible-body { + display: none; + border-bottom: 1px solid $collapsible-border-color; + @include box-sizing(border-box); + + p { + margin: 0; + padding: 2rem; + } +} + +// sideNav collapsible styling +.side-nav { + + .collapsible { + border: none; + box-shadow: none; + + li { padding: 0; } + } + + .collapsible-header { + background-color: transparent; + border: none; + line-height: inherit; + height: inherit; + margin: 0 1rem; + + i { line-height: inherit; } + } + + .collapsible-body { + border: 0; + background-color: $collapsible-header-color; + + li a { margin: 0 1rem 0 2rem; } + } + +} + +// Popout Collapsible + +.collapsible.popout { + border: none; + box-shadow: none; + > li { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); + // transform: scaleX(.92); + margin: 0 24px; + transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940); + } + > li.active { + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); + margin: 16px 0; + // transform: scaleX(1); + } +} diff --git a/system/admin/static/editor/sass/components/_color.scss b/system/admin/static/editor/sass/components/_color.scss new file mode 100644 index 0000000..95d65d5 --- /dev/null +++ b/system/admin/static/editor/sass/components/_color.scss @@ -0,0 +1,412 @@ +// Utility Color Classes + +//.success { +// +//} + +// Google Color Palette defined: http://www.google.com/design/spec/style/color.html + + +$materialize-red: ( + "lighten-5": #fdeaeb, + "lighten-4": #f8c1c3, + "lighten-3": #f3989b, + "lighten-2": #ee6e73, + "lighten-1": #ea454b, + "base": #e51c23, + "darken-1": #d0181e, + "darken-2": #b9151b, + "darken-3": #a21318, + "darken-4": #8b1014, +); + +$red: ( + "lighten-5": #FFEBEE, + "lighten-4": #FFCDD2, + "lighten-3": #EF9A9A, + "lighten-2": #E57373, + "lighten-1": #EF5350, + "base": #F44336, + "darken-1": #E53935, + "darken-2": #D32F2F, + "darken-3": #C62828, + "darken-4": #B71C1C, + "accent-1": #FF8A80, + "accent-2": #FF5252, + "accent-3": #FF1744, + "accent-4": #D50000 +); + +$pink: ( + "lighten-5": #fce4ec, + "lighten-4": #f8bbd0, + "lighten-3": #f48fb1, + "lighten-2": #f06292, + "lighten-1": #ec407a, + "base": #e91e63, + "darken-1": #d81b60, + "darken-2": #c2185b, + "darken-3": #ad1457, + "darken-4": #880e4f, + "accent-1": #ff80ab, + "accent-2": #ff4081, + "accent-3": #f50057, + "accent-4": #c51162 +); + +$purple: ( + "lighten-5": #f3e5f5, + "lighten-4": #e1bee7, + "lighten-3": #ce93d8, + "lighten-2": #ba68c8, + "lighten-1": #ab47bc, + "base": #9c27b0, + "darken-1": #8e24aa, + "darken-2": #7b1fa2, + "darken-3": #6a1b9a, + "darken-4": #4a148c, + "accent-1": #ea80fc, + "accent-2": #e040fb, + "accent-3": #d500f9, + "accent-4": #aa00ff +); + +$deep-purple: ( + "lighten-5": #ede7f6, + "lighten-4": #d1c4e9, + "lighten-3": #b39ddb, + "lighten-2": #9575cd, + "lighten-1": #7e57c2, + "base": #673ab7, + "darken-1": #5e35b1, + "darken-2": #512da8, + "darken-3": #4527a0, + "darken-4": #311b92, + "accent-1": #b388ff, + "accent-2": #7c4dff, + "accent-3": #651fff, + "accent-4": #6200ea +); + +$indigo: ( + "lighten-5": #e8eaf6, + "lighten-4": #c5cae9, + "lighten-3": #9fa8da, + "lighten-2": #7986cb, + "lighten-1": #5c6bc0, + "base": #3f51b5, + "darken-1": #3949ab, + "darken-2": #303f9f, + "darken-3": #283593, + "darken-4": #1a237e, + "accent-1": #8c9eff, + "accent-2": #536dfe, + "accent-3": #3d5afe, + "accent-4": #304ffe +); + +$blue: ( + "lighten-5": #E3F2FD, + "lighten-4": #BBDEFB, + "lighten-3": #90CAF9, + "lighten-2": #64B5F6, + "lighten-1": #42A5F5, + "base": #2196F3, + "darken-1": #1E88E5, + "darken-2": #1976D2, + "darken-3": #1565C0, + "darken-4": #0D47A1, + "accent-1": #82B1FF, + "accent-2": #448AFF, + "accent-3": #2979FF, + "accent-4": #2962FF +); + +$light-blue: ( + "lighten-5": #e1f5fe, + "lighten-4": #b3e5fc, + "lighten-3": #81d4fa, + "lighten-2": #4fc3f7, + "lighten-1": #29b6f6, + "base": #03a9f4, + "darken-1": #039be5, + "darken-2": #0288d1, + "darken-3": #0277bd, + "darken-4": #01579b, + "accent-1": #80d8ff, + "accent-2": #40c4ff, + "accent-3": #00b0ff, + "accent-4": #0091ea +); + +$cyan: ( + "lighten-5": #e0f7fa, + "lighten-4": #b2ebf2, + "lighten-3": #80deea, + "lighten-2": #4dd0e1, + "lighten-1": #26c6da, + "base": #00bcd4, + "darken-1": #00acc1, + "darken-2": #0097a7, + "darken-3": #00838f, + "darken-4": #006064, + "accent-1": #84ffff, + "accent-2": #18ffff, + "accent-3": #00e5ff, + "accent-4": #00b8d4 +); + +$teal: ( + "lighten-5": #e0f2f1, + "lighten-4": #b2dfdb, + "lighten-3": #80cbc4, + "lighten-2": #4db6ac, + "lighten-1": #26a69a, + "base": #009688, + "darken-1": #00897b, + "darken-2": #00796b, + "darken-3": #00695c, + "darken-4": #004d40, + "accent-1": #a7ffeb, + "accent-2": #64ffda, + "accent-3": #1de9b6, + "accent-4": #00bfa5 +); + +$green: ( + "lighten-5": #E8F5E9, + "lighten-4": #C8E6C9, + "lighten-3": #A5D6A7, + "lighten-2": #81C784, + "lighten-1": #66BB6A, + "base": #4CAF50, + "darken-1": #43A047, + "darken-2": #388E3C, + "darken-3": #2E7D32, + "darken-4": #1B5E20, + "accent-1": #B9F6CA, + "accent-2": #69F0AE, + "accent-3": #00E676, + "accent-4": #00C853 +); + +$light-green: ( + "lighten-5": #f1f8e9, + "lighten-4": #dcedc8, + "lighten-3": #c5e1a5, + "lighten-2": #aed581, + "lighten-1": #9ccc65, + "base": #8bc34a, + "darken-1": #7cb342, + "darken-2": #689f38, + "darken-3": #558b2f, + "darken-4": #33691e, + "accent-1": #ccff90, + "accent-2": #b2ff59, + "accent-3": #76ff03, + "accent-4": #64dd17 +); + +$lime: ( + "lighten-5": #f9fbe7, + "lighten-4": #f0f4c3, + "lighten-3": #e6ee9c, + "lighten-2": #dce775, + "lighten-1": #d4e157, + "base": #cddc39, + "darken-1": #c0ca33, + "darken-2": #afb42b, + "darken-3": #9e9d24, + "darken-4": #827717, + "accent-1": #f4ff81, + "accent-2": #eeff41, + "accent-3": #c6ff00, + "accent-4": #aeea00 +); + +$yellow: ( + "lighten-5": #fffde7, + "lighten-4": #fff9c4, + "lighten-3": #fff59d, + "lighten-2": #fff176, + "lighten-1": #ffee58, + "base": #ffeb3b, + "darken-1": #fdd835, + "darken-2": #fbc02d, + "darken-3": #f9a825, + "darken-4": #f57f17, + "accent-1": #ffff8d, + "accent-2": #ffff00, + "accent-3": #ffea00, + "accent-4": #ffd600 +); + +$amber: ( + "lighten-5": #fff8e1, + "lighten-4": #ffecb3, + "lighten-3": #ffe082, + "lighten-2": #ffd54f, + "lighten-1": #ffca28, + "base": #ffc107, + "darken-1": #ffb300, + "darken-2": #ffa000, + "darken-3": #ff8f00, + "darken-4": #ff6f00, + "accent-1": #ffe57f, + "accent-2": #ffd740, + "accent-3": #ffc400, + "accent-4": #ffab00 +); + +$orange: ( + "lighten-5": #fff3e0, + "lighten-4": #ffe0b2, + "lighten-3": #ffcc80, + "lighten-2": #ffb74d, + "lighten-1": #ffa726, + "base": #ff9800, + "darken-1": #fb8c00, + "darken-2": #f57c00, + "darken-3": #ef6c00, + "darken-4": #e65100, + "accent-1": #ffd180, + "accent-2": #ffab40, + "accent-3": #ff9100, + "accent-4": #ff6d00 +); + +$deep-orange: ( + "lighten-5": #fbe9e7, + "lighten-4": #ffccbc, + "lighten-3": #ffab91, + "lighten-2": #ff8a65, + "lighten-1": #ff7043, + "base": #ff5722, + "darken-1": #f4511e, + "darken-2": #e64a19, + "darken-3": #d84315, + "darken-4": #bf360c, + "accent-1": #ff9e80, + "accent-2": #ff6e40, + "accent-3": #ff3d00, + "accent-4": #dd2c00 +); + +$brown: ( + "lighten-5": #efebe9, + "lighten-4": #d7ccc8, + "lighten-3": #bcaaa4, + "lighten-2": #a1887f, + "lighten-1": #8d6e63, + "base": #795548, + "darken-1": #6d4c41, + "darken-2": #5d4037, + "darken-3": #4e342e, + "darken-4": #3e2723 +); + +$blue-grey: ( + "lighten-5": #eceff1, + "lighten-4": #cfd8dc, + "lighten-3": #b0bec5, + "lighten-2": #90a4ae, + "lighten-1": #78909c, + "base": #607d8b, + "darken-1": #546e7a, + "darken-2": #455a64, + "darken-3": #37474f, + "darken-4": #263238 +); + +$grey: ( + "lighten-5": #fafafa, + "lighten-4": #f5f5f5, + "lighten-3": #eeeeee, + "lighten-2": #e0e0e0, + "lighten-1": #bdbdbd, + "base": #9e9e9e, + "darken-1": #757575, + "darken-2": #616161, + "darken-3": #424242, + "darken-4": #212121 +); + +$shades: ( + "black": #000000, + "white": #FFFFFF, + "transparent": transparent +); + +$colors: ( + "materialize-red": $materialize-red, + "red": $red, + "pink": $pink, + "purple": $purple, + "deep-purple": $deep-purple, + "indigo": $indigo, + "blue": $blue, + "light-blue": $light-blue, + "cyan": $cyan, + "teal": $teal, + "green": $green, + "light-green": $light-green, + "lime": $lime, + "yellow": $yellow, + "amber": $amber, + "orange": $orange, + "deep-orange": $deep-orange, + "brown": $brown, + "blue-grey": $blue-grey, + "grey": $grey, + "shades": $shades +); + + +// Color Classes + +@each $color_name, $color in $colors { + @each $color_type, $color_value in $color { + @if $color_type == "base" { + .#{$color_name} { + background-color: $color_value !important; + } + .#{$color_name}-text { + color: $color_value !important; + } + } + @else { + .#{$color_name}.#{$color_type} { + background-color: $color_value !important; + } + .#{$color_name}-text.text-#{$color_type} { + color: $color_value !important; + } + } + } +} + +// Shade classes +@each $color, $color_value in $shades { + .#{$color} { + background-color: $color_value !important; + } + .#{$color}-text { + color: $color_value !important; + } +} + + +// usage: color("name_of_color", "type_of_color") +// to avoid to repeating map-get($colors, ...) + +@function color($color, $type) { + @if map-has-key($colors, $color) { + $curr_color: map-get($colors, $color); + @if map-has-key($curr_color, $type) { + @return map-get($curr_color, $type); + } + } + @warn "Unknown `#{name}` in $colors."; + @return null; +} + diff --git a/system/admin/static/editor/sass/components/_dropdown.scss b/system/admin/static/editor/sass/components/_dropdown.scss new file mode 100644 index 0000000..585fbd6 --- /dev/null +++ b/system/admin/static/editor/sass/components/_dropdown.scss @@ -0,0 +1,40 @@ +.dropdown-content { + @extend .z-depth-1; + background-color: $dropdown-bg-color; + margin: 0; + display: none; + min-width: 100px; + max-height: 650px; + overflow-y: auto; + opacity: 0; + position: absolute; + z-index: 999; + will-change: width, height; + + li { + clear: both; + color: $off-black; + cursor: pointer; + line-height: 1.5rem; + width: 100%; + text-align: left; + text-transform: none; + + &:hover, &.active { + background-color: $dropdown-hover-bg-color; + } + + & > a, & > span { + font-size: 1.2rem; + color: $dropdown-color; + display: block; + padding: 1rem 1rem; + } + + // Icon alignment override + & > a > i { + height: inherit; + line-height: inherit; + } + } +} diff --git a/system/admin/static/editor/sass/components/_form.scss b/system/admin/static/editor/sass/components/_form.scss new file mode 100644 index 0000000..ed35233 --- /dev/null +++ b/system/admin/static/editor/sass/components/_form.scss @@ -0,0 +1,886 @@ +/* Remove Focus Boxes */ +select:focus { + outline: 1px solid lighten($secondary-color, 47%); +} +button:focus { + outline: none; + background-color: lighten($button-color, 4%); +} + +label { + font-size: $label-font-size; + color: $input-border-color; +} + +/*************************** + Text Inputs + Textarea +****************************/ + +// Style Placeholders +::-webkit-input-placeholder { + color: lighten($input-border-color, 20%); +} + +:-moz-placeholder { /* Firefox 18- */ + color: lighten($input-border-color, 20%); +} + +::-moz-placeholder { /* Firefox 19+ */ + color: lighten($input-border-color, 20%); +} + +:-ms-input-placeholder { + color: lighten($input-border-color, 20%); +} + +// Text inputs +input[type=text], +input[type=password], +input[type=email], +input[type=url], +input[type=time], +input[type=date], +input[type=datetime-local], +input[type=tel], +input[type=number], +input[type=search], +textarea.materialize-textarea { + + // General Styles + background-color: transparent; + border: none; + border-bottom: 1px solid $input-border-color; + border-radius: 0; + outline: none; + height: 3rem; + width: 100%; + + font-size: 1rem; + margin: 0 0 15px 0; + padding: 0; + box-shadow: none; + @include box-sizing(content-box); + transition: all .3s; + + + // Disabled input style + &:disabled, &[readonly="readonly"] { + color: $input-disabled-color; + border-bottom: 1px dotted $input-disabled-color; + } + // Disabled label style + &:disabled+label, &[readonly="readonly"]+label { + color: $input-disabled-color; + } + // Focused input style + &:focus:not([readonly]) { + border-bottom: 1px solid $input-focus-color; + box-shadow: 0 1px 0 0 $input-focus-color; + } + // Focused label style + &:focus:not([readonly])+label { + color: $input-focus-color; + } + // Valid Input Style + &.valid, + &:focus.valid { + border-bottom: 1px solid $input-success-color; + box-shadow: 0 1px 0 0 $input-success-color; + } + // Custom Success Message + &.valid + label:after, + &:focus.valid + label:after { + content: attr(data-success); + color: $input-success-color; + opacity: 1; + } + // Invalid Input Style + &.invalid, + &:focus.invalid { + border-bottom: 1px solid $input-error-color; + box-shadow: 0 1px 0 0 $input-error-color; + } + // Custom Error message + &.invalid + label:after, + &:focus.invalid + label:after { + content: attr(data-error); + color: $input-error-color; + opacity: 1; + } + + // Form Message Shared Styles + & + label:after { + display: block; + content: ""; + position: absolute; + top: 65px; + opacity: 0; + transition: .2s opacity ease-out, .2s color ease-out; + } +} + +// Styling for input field wrapper +.input-field { + position: relative; + margin-top: 1rem; + + label { + color: $input-border-color; + position: absolute; + top: 0.8rem; + left: $gutter-width / 2; + font-size: 1rem; + cursor: text; + @include transition(.2s ease-out); + } + label.active { + font-size: $label-font-size; + @include transform(translateY(-140%)); + } + + // Prefix Icons + .prefix { + position: absolute; + width: 3rem; + font-size: 2rem; + @include transition(color .2s); + + &.active { color: $input-focus-color; } + } + .prefix ~ input, + .prefix ~ textarea { + margin-left: 3rem; + width: 92%; + width: calc(100% - 3rem); + } + .prefix ~ textarea { padding-top: .8rem; } + .prefix ~ label { margin-left: 3rem; } + + @media #{$medium-and-down} { + .prefix ~ input { + width: 86%; + width: calc(100% - 3rem); + } + } + @media #{$small-and-down} { + .prefix ~ input { + width: 80%; + width: calc(100% - 3rem); + } + } +} + + +// Search Field + + +.input-field input[type=search] { + display: block; + line-height: inherit; + padding-left: 4rem; + width: calc(100% - 4rem); + + &:focus { + background-color: $input-bg-color; + border: 0; + box-shadow: none; + color: #444; + + & + label i, + & ~ .mdi-navigation-close { + color: #444; + } + } + + & + label { + left: 1rem; + } + + & ~ .mdi-navigation-close { + position: absolute; + top: 0; + right: 1rem; + color: transparent; + cursor: pointer; + font-size: 2rem; + transition: .3s color; + } +} + + +// Default textarea +textarea { + width: 100%; + height: 3rem; + background-color: transparent; + + &.materialize-textarea { + overflow-y: hidden; /* prevents scroll bar flash */ + padding: 1.6rem 0; /* prevents text jump on Enter keypress */ + resize: none; + min-height: 3rem; + } +} + + +// For textarea autoresize +.hiddendiv { + display: none; + white-space: pre-wrap; + word-wrap: break-word; + overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */ + padding-top: 1.2rem; /* prevents text jump on Enter keypress */ +} + + +/*************** + Radio Buttons +***************/ + +/* Remove default Radio Buttons */ +[type="radio"]:not(:checked), +[type="radio"]:checked { + position: absolute; + left: -9999px; + visibility: hidden; +} + +[type="radio"]:not(:checked) + label, +[type="radio"]:checked + label { + position: relative; + padding-left: 35px; + cursor: pointer; + display: inline-block; + height: 25px; + line-height: 25px; + font-size: 1rem; + @include transition(.28s ease); + + -webkit-user-select: none; /* webkit (safari, chrome) browsers */ + -moz-user-select: none; /* mozilla browsers */ + -khtml-user-select: none; /* webkit (konqueror) browsers */ + -ms-user-select: none; /* IE10+ */ +} + +[type="radio"] + label:before, +[type="radio"] + label:after { + content: ''; + position: absolute; + left: 0; + top: 0; + margin: 4px; + width: 16px; + height: 16px; + z-index: 0; + @include transition(.28s ease); +} + + +/* Unchecked styles */ +[type="radio"]:not(:checked) + label:before { + border-radius: 50%; + border: 2px solid $radio-empty-color; +} +[type="radio"]:not(:checked) + label:after { + border-radius: 50%; + border: 2px solid $radio-empty-color; + z-index: -1; + + @include transform(scale(0)); +} + +/* Checked styles */ +[type="radio"]:checked + label:before { + border-radius: 50%; + border: 2px solid transparent; +} +[type="radio"]:checked + label:after { + border-radius: 50%; + border: 2px solid $radio-fill-color; + background-color: $radio-fill-color; + z-index: 0; + @include transform(scale(1.02)); +} + +/* Radio With gap */ +[type="radio"].with-gap:checked + label:before { + border-radius: 50%; + border: 2px solid $radio-fill-color; +} +[type="radio"].with-gap:checked + label:after { + border-radius: 50%; + border: 2px solid $radio-fill-color; + background-color: $radio-fill-color; + z-index: 0; + @include transform(scale(.5)); +} + +/* Disabled Radio With gap */ +[type="radio"].with-gap:disabled:checked + label:before { + border: 2px solid $input-disabled-color; +} +[type="radio"].with-gap:disabled:checked + label:after { + border: none; + background-color: $input-disabled-color; +} + +/* Disabled style */ +[type="radio"]:disabled:not(:checked) + label:before, +[type="radio"]:disabled:checked + label:before { + background-color: transparent; + border-color: $input-disabled-color; +} +[type="radio"]:disabled + label { + color: $input-disabled-color; +} +[type="radio"]:disabled:not(:checked) + label:before { + border-color: $input-disabled-color; +} +[type="radio"]:disabled:checked + label:after { + background-color: $input-disabled-color; + border-color: $input-disabled-solid-color; +} + + +/*************** + Checkboxes +***************/ + +/* CUSTOM CSS CHECKBOXES */ +form p { + margin-bottom: 10px; + text-align: left; +} +form p:last-child { + margin-bottom: 0; +} + +/* Remove default checkbox */ +[type="checkbox"]:not(:checked), +[type="checkbox"]:checked { + position: absolute; + left: -9999px; + visibility: hidden; +} + + +// Checkbox Styles +[type="checkbox"] { + + // Text Label Style + + label { + position: relative; + padding-left: 35px; + cursor: pointer; + display: inline-block; + height: 25px; + line-height: 25px; + font-size: 1rem; + + -webkit-user-select: none; /* webkit (safari, chrome) browsers */ + -moz-user-select: none; /* mozilla browsers */ + -khtml-user-select: none; /* webkit (konqueror) browsers */ + -ms-user-select: none; /* IE10+ */ + } + + /* checkbox aspect */ + + label:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 18px; + z-index: 0; + border: 2px solid $radio-empty-color; + border-radius: 1px; + margin-top: 2px; + @include transition(.2s); + } + + &:not(:checked):disabled + label:before { + border: none; + background-color: $input-disabled-color; + } + +} + +[type="checkbox"]:checked { + + label:before { + top: -4px; + left: -3px; + width: 12px; height: 22px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: 2px solid $radio-fill-color; + border-bottom: 2px solid $radio-fill-color; + @include transform(rotate(40deg)); + -webkit-backface-visibility: hidden; + @include transform-origin(100% 100%); + } + + &:disabled + label:before { + border-right: 2px solid $input-disabled-color; + border-bottom: 2px solid $input-disabled-color; + } + +} + +/* Indeterminate checkbox */ +[type="checkbox"]:indeterminate { + +label:before { + left: -10px; + top: -11px; + width: 10px; height: 22px; + border-top: none; + border-left: none; + border-right: 2px solid $radio-fill-color; + border-bottom: none; + @include transform(rotate(90deg)); + -webkit-backface-visibility: hidden; + @include transform-origin(100% 100%); + } + + // Disabled indeterminate + &:disabled + label:before { + border-right: 2px solid $input-disabled-color; + background-color: transparent; + } +} + + +// Filled in Style +[type="checkbox"].filled-in { + // General + + label:after { + border-radius: 2px; + } + + label:before, + + label:after { + content: ''; + left: 0; + position: absolute; + /* .1s delay is for check animation */ + transition: border .25s, background-color .25s, width .20s .1s, height .20s .1s, top .20s .1s, left .20s .1s; + z-index: 1; + } + // Unchecked style + &:not(:checked) + label:before { + width: 0; + height: 0; + border: 3px solid transparent; + left: 6px; + top: 10px; + + -webkit-transform: rotateZ(37deg); + transform: rotateZ(37deg); + -webkit-transform-origin: 20% 40%; + transform-origin: 100% 100%; + } + &:not(:checked) + label:after { + height: 20px; + width: 20px; + background-color: transparent; + border: 2px solid $radio-empty-color; + top: 0px; + z-index: 0; + } + // Checked style + &:checked { + + label:before { + top: 0; + left: 1px; + width: 8px; + height: 13px; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-right: 2px solid $input-bg-color; + border-bottom: 2px solid $input-bg-color; + -webkit-transform: rotateZ(37deg); + transform: rotateZ(37deg); + + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + } + + label:after { + top: 0px; + width: 20px; + height: 20px; + border: 2px solid $secondary-color; + background-color: $secondary-color; + z-index: 0; + } + } + // Disabled style + &:disabled:not(:checked) + label:before { + + background-color: transparent; + border: 2px solid transparent; + } + &:disabled:not(:checked) + label:after { + border-color: transparent; + background-color: $input-disabled-solid-color; + } + &:disabled:checked + label:before { + background-color: transparent; + + } + &:disabled:checked + label:after { + background-color: $input-disabled-solid-color; + border-color: $input-disabled-solid-color; + } + +} + +/*************** + Switch +***************/ +.switch, +.switch * { + -webkit-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -ms-user-select: none; +} +.switch label { + cursor: pointer; +} +.switch label input[type=checkbox]{ + opacity: 0; + width: 0; + height: 0; +} +.switch label input[type=checkbox]:checked + .lever { + background-color: $switch-checked-lever-bg; +} +.switch label input[type=checkbox]:checked + .lever:after { + background-color: $switch-bg-color; +} +.switch label .lever { + content: ""; + display: inline-block; + position: relative; + width: 40px; + height: 15px; + background-color: $switch-unchecked-lever-bg; + border-radius: 15px; + margin-right: 10px; + transition: background 0.3s ease; + vertical-align: middle; + margin: 0 16px; +} +.switch label .lever:after { + content: ""; + position: absolute; + display: inline-block; + width: 21px; + height: 21px; + background-color: $switch-unchecked-bg; + border-radius: 21px; + box-shadow: 0 1px 3px 1px rgba(0,0,0,.4); + left: -5px; + top: -3px; + transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease; +} +// Switch active style +input[type=checkbox]:checked:not(:disabled) ~ .lever:active:after { + box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px transparentize($switch-bg-color, .9); +} +input[type=checkbox]:not(:disabled) ~ .lever:active:after { + box-shadow: 0 1px 3px 1px rgba(0,0,0,.4), 0 0 0 15px rgba(0, 0, 0, .08); +} +.switch label input[type=checkbox]:checked + .lever:after { + left: 24px; +} + +// Disabled Styles + +.switch input[type=checkbox][disabled] + .lever{ + cursor: default; +} +.switch label input[type=checkbox][disabled] + .lever:after, +.switch label input[type=checkbox][disabled]:checked + .lever:after { + background-color: $input-disabled-solid-color; +} + + + + +/*************** + Select Field +***************/ + +.select-label { + position: absolute; +} + +.select-wrapper { + position: relative; + + input.select-dropdown { + position: relative; + cursor: pointer; + // color: #444; + background-color: transparent; + border: none; + border-bottom: 1px solid $input-border-color; + outline: none; + height: 3rem; + line-height: 3rem; + width: 100%; + font-size: 1rem; + margin: 0 0 15px 0; + padding: 0; + display: block; + } + span.caret { + color: initial; + position: absolute; + right: 0; + top: 16px; + font-size: 10px; + &.disabled { + color: $input-disabled-color; + } + } + & + label { + position: absolute; + top: -14px; + font-size: $label-font-size; + } +} + +select { display: none; } +select.browser-default { display: block; } + + +// Disabled styles +select:disabled { + color: rgba(0,0,0,.3); +} +.select-wrapper input.select-dropdown:disabled { + color: rgba(0,0,0,.3); + cursor: default; + -webkit-user-select: none; /* webkit (safari, chrome) browsers */ + -moz-user-select: none; /* mozilla browsers */ + -ms-user-select: none; /* IE10+ */ + border-bottom: 1px solid rgba(0,0,0,.3); +} +.select-wrapper i { + color: rgba(0,0,0,.3); +} +.select-dropdown li.disabled { + color: rgba(0,0,0,.3); + background-color: transparent; +} + + +/********************* + File Input +**********************/ +.file-field { + position: relative; + + .file-path-wrapper { + overflow: hidden; + padding-left: 10px; + } + input.file-path { width: 100%; } + + .btn { + float: left; + height: 3rem; + line-height: 3rem; + } + + span { + cursor: pointer; + } + + input[type=file] { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + width: 100%; + margin: 0; + padding: 0; + font-size: 20px; + cursor: pointer; + opacity: 0; + filter: alpha(opacity=0); + } +} + + + +/*************** + Range +***************/ + +.range-field { + position: relative; +} + +input[type=range], input[type=range] + .thumb { + @extend .no-select; + cursor: pointer; +} + +input[type=range] { + position: relative; + background-color: transparent; + border: none; + outline: none; + width: 100%; + margin: 15px 0px; + padding: 0; +} +input[type=range] + .thumb { + position: absolute; + border: none; + height: 0; + width: 0; + border-radius: 50%; + background-color: $radio-fill-color; + top: 10px; + margin-left: -6px; + + @include transform-origin(50% 50%); + @include transform(rotate(-45deg)); + + .value { + display: block; + width: 30px; + text-align: center; + color: $radio-fill-color; + font-size: 0; + @include transform(rotate(45deg)); + } + + &.active { + border-radius: 50% 50% 50% 0; + + .value { + color: $input-bg-color; + margin-left: -1px; + margin-top: 8px; + font-size: 10px; + } + } +} + + +input[type=range]:focus { + outline: none; +} + + + +// WebKit +input[type=range]{ + -webkit-appearance: none; +} + +input[type=range]::-webkit-slider-runnable-track { + height: 3px; + background: #c2c0c2; + border: none; +} + +input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background-color: $radio-fill-color; + transform-origin: 50% 50%; + margin: -5px 0 0 0; + @include transition(.3s); +} + +input[type=range]:focus::-webkit-slider-runnable-track { + background: #ccc; +} + +// FireFox +input[type=range]{ + /* fix for FF unable to apply focus style bug */ + border: 1px solid white; + + /*required for proper track sizing in FF*/ +} + +input[type=range]::-moz-range-track { + height: 3px; + background: #ddd; + border: none; +} + +input[type=range]::-moz-range-thumb { + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: $radio-fill-color; + margin-top: -5px; +} + +/*hide the outline behind the border*/ +input[type=range]:-moz-focusring{ + outline: 1px solid white; + outline-offset: -1px; +} + +input[type=range]:focus::-moz-range-track { + background: #ccc; +} + +// IE 10+ +input[type=range]::-ms-track { + height: 3px; + + /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ + background: transparent; + + /*leave room for the larger thumb to overflow with a transparent border */ + border-color: transparent; + border-width: 6px 0; + + /*remove default tick marks*/ + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #777; +} +input[type=range]::-ms-fill-upper { + background: #ddd; +} +input[type=range]::-ms-thumb { + border: none; + height: 14px; + width: 14px; + border-radius: 50%; + background: $radio-fill-color; +} +input[type=range]:focus::-ms-fill-lower { + background: #888; +} +input[type=range]:focus::-ms-fill-upper { + background: #ccc; +} + +/*************************** + Text Inputs + Textarea +****************************/ + +select { + background-color: rgba(255, 255, 255, 0.90); + width: 100%; + padding: 5px; + border: 1px solid #f2f2f2; + border-radius: 2px; + height: 3rem; + } diff --git a/system/admin/static/editor/sass/components/_global.scss b/system/admin/static/editor/sass/components/_global.scss new file mode 100644 index 0000000..c246270 --- /dev/null +++ b/system/admin/static/editor/sass/components/_global.scss @@ -0,0 +1,718 @@ +@charset "UTF-8"; + + +//Default styles + +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +body { + // display: flex; + // min-height: 100vh; + // flex-direction: column; +} + +main { + // flex: 1 0 auto; +} + +ul { + list-style-type: none; +} + +a { + color: $link-color; + text-decoration: none; + + // Gets rid of tap active state + -webkit-tap-highlight-color: transparent; +} + + +// Positioning +.valign-wrapper { + @include flexbox(); + @include align(center); + + .valign { + display: block; + } +} + + +ul { + padding: 0; + li { + list-style-type: none; + } +} + +// classic clearfix +.clearfix { + clear: both; +} + + +// Z-levels +.z-depth-0 { + box-shadow: none !important; +} +.z-depth-1{ + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); +} +.z-depth-1-half{ + box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); +} +.z-depth-2{ + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} +.z-depth-3{ + box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); +} +.z-depth-4{ + box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); +} +.z-depth-5{ + box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); +} + +.hoverable:hover { + transition: box-shadow .25s; + box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +} + +// Dividers + +.divider { + height: 1px; + overflow: hidden; + background-color: color("grey", "lighten-2"); +} + + +// Blockquote + +blockquote { + margin: 20px 0; + padding-left: 1.5rem; + border-left: 5px solid $primary-color; +} + +// Icon Styles + +i { + line-height: inherit; + + &.left { + float: left; + margin-right: 15px; + } + &.right { + float: right; + margin-left: 15px; + } + &.tiny { + font-size: 1rem; + } + &.small { + font-size: 2rem; + } + &.medium { + font-size: 4rem; + } + &.large { + font-size: 6rem; + } +} + +// Images +img.responsive-img, +video.responsive-video { + max-width: 100%; + height: auto; +} + + +// Pagination + +.pagination { + + li { + float: left; + font-size: 1.2rem; + padding: 0 10px; + line-height: 30px; + border-radius: 2px; + text-align: center; + + a { color: #444; } + + &.active a { color: #fff; } + + &.active { background-color: $primary-color; } + + &.disabled a { + cursor: default; + color: #999; + } + + i { + font-size: 2rem; + } + } + + + li.pages ul li { + display: inline-block; + float: none; + } +} +@media #{$medium-and-down} { + .pagination { + width: 100%; + + li.prev, + li.next { + width: 10%; + } + + li.pages { + width: 80%; + overflow: hidden; + white-space: nowrap; + } + } +} + + +// Parallax +.parallax-container { + position: relative; + overflow: hidden; + height: 500px; +} + +.parallax { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + + img { + display: none; + position: absolute; + left: 50%; + bottom: 0; + min-width: 100%; + min-height: 100%; + -webkit-transform: translate3d(0,0,0); + transform: translate3d(0,0,0); + transform: translateX(-50%); + } +} + +// Pushpin +.pin-top, .pin-bottom { + position: relative; +} +.pinned { + position: fixed !important; +} + +/********************* + Transition Classes +**********************/ + +ul.staggered-list li { + opacity: 0; +} + +.fade-in { + opacity: 0; + transform-origin: 0 50%; +} + + +/********************* + Media Query Classes +**********************/ +.hide-on-small-only, .hide-on-small-and-down { + @media #{$small-and-down} { + display: none !important; + } +} +.hide-on-med-and-down { + @media #{$medium-and-down} { + display: none !important; + } +} +.hide-on-med-and-up { + @media #{$medium-and-up} { + display: none !important; + } +} +.hide-on-med-only { + @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) { + display: none !important; + } +} +.hide-on-large-only { + @media #{$large-and-up} { + display: none !important; + } +} +.show-on-large { + @media #{$large-and-up} { + display: initial !important; + } +} +.show-on-medium { + @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) { + display: initial !important; + } +} +.show-on-small { + @media #{$small-and-down} { + display: initial !important; + } +} +.show-on-medium-and-up { + @media #{$medium-and-up} { + display: initial !important; + } +} +.show-on-medium-and-down { + @media #{$medium-and-down} { + display: initial !important; + } +} + + +// Center text on mobile +.center-on-small-only { + @media #{$small-and-down} { + text-align: center; + } +} + +// Footer +footer.page-footer { + margin-top: 20px; + padding-top: 20px; + background-color: $footer-bg-color; + + .footer-copyright { + overflow: hidden; + height: 50px; + line-height: 50px; + color: rgba(255,255,255,.8); + background-color: rgba(51,51,51,.08);; + @extend .light; + } +} + +// Tables +table, th, td { + border: none; +} + +table { + width:100%; + display: table; + + &.bordered > thead > tr, + &.bordered > tbody > tr { + border-bottom: 1px solid $table-border-color; + } + + &.striped > tbody { + > tr:nth-child(odd) { + background-color: $table-striped-color; + } + + > tr > td { + border-radius: 0px; + } + } + + &.hoverable > tbody > tr { + @include transition(background-color .25s ease); + &:hover { + background-color: $table-striped-color; + } + } + + &.centered { + thead tr th, tbody tr td { + text-align: center; + + } + } + +} + +thead { + border-bottom: 1px solid $table-border-color; +} + +td, th{ + padding: 15px 5px; + display: table-cell; + text-align: left; + vertical-align: middle; + border-radius: 2px; +} + +// Responsive Table +@media #{$medium-and-down} { + + table.responsive-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + display: block; + position: relative; + + th, + td { + margin: 0; + vertical-align: top; + } + + th { text-align: left; } + thead { + display: block; + float: left; + + tr { + display: block; + padding: 0 10px 0 0; + + th::before { + content: "\00a0"; + } + } + } + tbody { + display: block; + width: auto; + position: relative; + overflow-x: auto; + white-space: nowrap; + + tr { + display: inline-block; + vertical-align: top; + } + } + th { + display: block; + text-align: right; + } + td { + display: block; + min-height: 1.25em; + text-align: left; + } + tr { padding: 0 10px; } + + /* sort out borders */ + thead { + border: 0; + border-right: 1px solid $table-border-color; + } + + &.bordered { + th { border-bottom: 0; border-left: 0; } + td { border-left: 0; border-right: 0; border-bottom: 0; } + tr { border: 0; } + tbody tr { border-right: 1px solid $table-border-color; } + } + + } + +} + + +// Collections +.collection { + margin: $element-top-margin 0 $element-bottom-margin 0; + border: 1px solid $collection-border-color; + border-radius: 2px; + overflow: hidden; + position: relative; + + .collection-item { + background-color: $collection-bg-color; + line-height: 1.5rem; + padding: 10px 20px; + margin: 0; + border-bottom: 1px solid $collection-border-color; + + // Avatar Collection + &.avatar { + min-height: 84px; + padding-left: 72px; + position: relative; + + .circle { + position: absolute; + width: 42px; + height: 42px; + overflow: hidden; + left: 15px; + display: inline-block; + vertical-align: middle; + } + i.circle { + font-size: 18px; + line-height: 42px; + color: #fff; + background-color: #999; + text-align: center; + } + + + .title { + font-size: 16px; + } + + p { + margin: 0; + } + + .secondary-content { + position: absolute; + top: 16px; + right: 16px; + } + + } + + + &:last-child { + border-bottom: none; + } + + &.active { + background-color: $collection-active-bg-color; + color: $collection-active-color; + } + } + a.collection-item{ + display: block; + @include transition(.25s); + color: $secondary-color; + &:not(.active) { + &:hover { + background-color: $collection-hover-bg-color; + } + } + } + + &.with-header { + .collection-header { + background-color: $collection-bg-color; + border-bottom: 1px solid $collection-border-color; + padding: 10px 20px; + } + .collection-item { + padding-left: 30px; + } + .collection-item.avatar { + padding-left: 72px; + } + } + +} +// Made less specific to allow easier overriding +.secondary-content { + float: right; + color: $secondary-color; +} + + +// Badges +span.badge { + min-width: 3rem; + padding: 0 6px; + text-align: center; + font-size: 1rem; + line-height: inherit; + color: color('grey', 'darken-1'); + position: absolute; + right: 15px; + @include box-sizing(border-box); + + &.new { + font-weight: 300; + font-size: 0.8rem; + color: #fff; + background-color: $badge-bg-color; + border-radius: 2px; + } + &.new:after { + content: " new"; + } +} + +// Responsive Videos +.video-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + &.no-controls { + padding-top: 0; + } + + iframe, object, embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} + +// Progress Bar +.progress { + position: relative; + height: 4px; + display: block; + width: 100%; + background-color: lighten($progress-bar-color, 40%); + border-radius: 2px; + margin: $element-top-margin 0 $element-bottom-margin 0; + overflow: hidden; + .determinate { + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + background-color: $progress-bar-color; + @include transition(width .3s linear); + } + .indeterminate { + background-color: $progress-bar-color; + &:before { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left:0; + bottom: 0; + will-change: left, right; + // Custom bezier + @include animation(indeterminate 2.1s cubic-bezier(0.650, 0.815, 0.735, 0.395) infinite); + + } + &:after { + content: ''; + position: absolute; + background-color: inherit; + top: 0; + left:0; + bottom: 0; + will-change: left, right; + // Custom bezier + @include animation(indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite); + @include animation-delay(1.15s); + } + } +} +@include keyframes(indeterminate) { + 0% { + left: -35%; + right:100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} + +@include keyframes(indeterminate-short) { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} + + +/******************* + Utility Classes +*******************/ + +.hide { + display: none !important; +} + +// Text Align +.left-align { + text-align: left; +} +.right-align { + text-align: right +} +.center, .center-align { + text-align: center; +} + +.left { + float: left !important; +} +.right { + float: right !important; +} + +// No Text Select +.no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.circle { + border-radius: 50%; +} + +.center-block { + display: block; + margin-left: auto; + margin-right: auto; +} + +.truncate { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.no-padding { + padding: 0 !important; +} diff --git a/system/admin/static/editor/sass/components/_grid.scss b/system/admin/static/editor/sass/components/_grid.scss new file mode 100644 index 0000000..68d727d --- /dev/null +++ b/system/admin/static/editor/sass/components/_grid.scss @@ -0,0 +1,117 @@ +.container { + margin: 0 auto; + max-width: 1280px; + width: 90%; +} +@media #{$medium-and-up} { + .container { + width: 85%; + } +} +@media #{$large-and-up} { + .container { + width: 70%; + } +} +.container .row { + margin-left: (-1 * $gutter-width / 2); + margin-right: (-1 * $gutter-width / 2); +} + +.section { + padding-top: 1rem; + padding-bottom: 1rem; + + &.no-pad { + padding: 0; + } + &.no-pad-bot { + padding-bottom: 0; + } + &.no-pad-top { + padding-top: 0; + } +} + + +.row { + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + + // Clear floating children + &:after { + content: ""; + display: table; + clear: both; + } + + .col { + float: left; + @include box-sizing(border-box); + padding: 0 $gutter-width / 2; + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.s#{$i} { + width: $perc; + margin-left: 0; + } + $i: $i + 1; + } + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.offset-s#{$i} { + margin-left: $perc; + } + $i: $i + 1; + } + + @media #{$medium-and-up} { + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.m#{$i} { + width: $perc; + margin-left: 0; + } + $i: $i + 1; + } + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.offset-m#{$i} { + margin-left: $perc; + } + $i: $i + 1; + } + + } + + @media #{$large-and-up} { + + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.l#{$i} { + width: $perc; + margin-left: 0; + } + $i: $i + 1; + } + $i: 1; + @while $i <= $num-cols { + $perc: unquote((100 / ($num-cols / $i)) + "%"); + &.offset-l#{$i} { + margin-left: $perc; + } + $i: $i + 1; + } + + } + + } +} diff --git a/system/admin/static/editor/sass/components/_icons-material-design.scss b/system/admin/static/editor/sass/components/_icons-material-design.scss new file mode 100644 index 0000000..3c78470 --- /dev/null +++ b/system/admin/static/editor/sass/components/_icons-material-design.scss @@ -0,0 +1,3257 @@ +$font-mdi : 'Material-Design-Icons'; +$mdi-prefix : 'mdi-'; + +@font-face { + font-family: "#{$font-mdi}"; + src:url("#{$icons-font-path}#{$font-mdi}.eot?#iefix") format("embedded-opentype"), + url("#{$icons-font-path}#{$font-mdi}.woff2") format("woff2"), + url("#{$icons-font-path}#{$font-mdi}.woff") format("woff"), + url("#{$icons-font-path}#{$font-mdi}.ttf") format("truetype"), + url("#{$icons-font-path}#{$font-mdi}.svg##{$font-mdi}") format("svg"); + font-weight: normal; + font-style: normal; +} + +[class^="mdi-"], [class*="mdi-"] { + speak: none; + display: inline-block; + font-family: "Material-Design-Icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-rendering: auto; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transform: translate(0, 0); + &:before { + display: inline-block; + speak: none; + text-decoration: inherit; + } + &.pull-left { + margin-right: .3em; + } + &.pull-right{ + margin-left: .3em; + } + &.mdi-lg:before, &.mdi-lg:after { + font-size: 1.33333333em; + line-height: 0.75em; + vertical-align: -15%; + } + &.mdi-2x:before, &.mdi-2x:after { + font-size: 2em; + } + &.mdi-3x:before, &.mdi-3x:after { + font-size: 3em; + } + &.mdi-4x:before, &.mdi-4x:after { + font-size: 4em; + } + &.mdi-5x:before, &.mdi-5x:after { + font-size: 5em; + } +} + +[class^="mdi-device-signal-cellular-"], +[class^="mdi-device-battery-"], +[class^="mdi-device-battery-charging-"], +[class^="mdi-device-signal-cellular-connected-no-internet-"], +[class^="mdi-device-signal-wifi-"], +[class^="mdi-device-signal-wifi-statusbar-not-connected"], +.mdi-device-network-wifi{ + &:after { + opacity: .3; + position: absolute; + left: 0; + top: 0; + z-index: 1; + display: inline-block; + speak: none; + text-decoration: inherit; + } +} + +[class^="mdi-device-signal-cellular-"]:after {content:"\e758";} +[class^="mdi-device-battery-"]:after {content:"\e735";} +[class^="mdi-device-battery-charging-"]:after {content:"\e733";} +[class^="mdi-device-signal-cellular-connected-no-internet-"]:after {content:"\e75d";} +[class^="mdi-device-signal-wifi-"]:after, .mdi-device-network-wifi:after {content:"\e765";} +[class^="mdi-device-signal-wifi-statusbasr-not-connected"]:after {content:"\e8f7";} + +.mdi-device-signal-cellular-off, .mdi-device-signal-cellular-null, .mdi-device-signal-cellular-no-sim, .mdi-device-signal-wifi-off, .mdi-device-signal-wifi-4-bar, .mdi-device-signal-cellular-4-bar, .mdi-device-battery-alert, .mdi-device-signal-cellular-connected-no-internet-4-bar, .mdi-device-battery-std, .mdi-device-battery-full .mdi-device-battery-unknown { + &:after { + content: ""; + } +} + +.mdi-fw { + width: 1.28571429em; + text-align: center; +} +.mdi-ul { + padding-left: 0; + margin-left: 2.14285714em; + list-style-type: none; +} +.mdi-ul > li { + position: relative; +} +.mdi-li { + position: absolute; + left: -2.14285714em; + width: 2.14285714em; + top: 0.14285714em; + text-align: center; +} +.mdi-li.mdi-lg { + left: -1.85714286em; +} +.mdi-border { + padding: .2em .25em .15em; + border: solid 0.08em #eeeeee; + border-radius: .1em; +} + +.mdi-spin { + -webkit-animation: mdi-spin 2s infinite linear; + animation: mdi-spin 2s infinite linear; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; +} +.mdi-pulse { + -webkit-animation: mdi-spin 1s steps(8) infinite; + animation: mdi-spin 1s steps(8) infinite ; + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; +} +@-webkit-keyframes mdi-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +@keyframes mdi-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} +.mdi-rotate-90 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.mdi-rotate-180 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.mdi-rotate-270 { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.mdi-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); +} +.mdi-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 .mdi-rotate-90, +:root .mdi-rotate-180, +:root .mdi-rotate-270, +:root .mdi-flip-horizontal, +:root .mdi-flip-vertical { + filter: none; +} +.mdi-stack { + position: relative; + display: inline-block; + width: 2em; + height: 2em; + line-height: 2em; + vertical-align: middle; +} +.mdi-stack-1x, +.mdi-stack-2x { + position: absolute; + left: 0; + width: 100%; + text-align: center; +} +.mdi-stack-1x { + line-height: inherit; +} +.mdi-stack-2x { + font-size: 2em; +} +.mdi-inverse { + color: #ffffff; +} + + +/* Start Icons */ + + +.mdi-action-3d-rotation:before { + content: "\e600"; +} + +.mdi-action-accessibility:before { + content: "\e601"; +} + +.mdi-action-account-balance-wallet:before { + content: "\e602"; +} + +.mdi-action-account-balance:before { + content: "\e603"; +} + +.mdi-action-account-box:before { + content: "\e604"; +} + +.mdi-action-account-child:before { + content: "\e605"; +} + +.mdi-action-account-circle:before { + content: "\e606"; +} + +.mdi-action-add-shopping-cart:before { + content: "\e607"; +} + +.mdi-action-alarm-add:before { + content: "\e608"; +} + +.mdi-action-alarm-off:before { + content: "\e609"; +} + +.mdi-action-alarm-on:before { + content: "\e60a"; +} + +.mdi-action-alarm:before { + content: "\e60b"; +} + +.mdi-action-android:before { + content: "\e60c"; +} + +.mdi-action-announcement:before { + content: "\e60d"; +} + +.mdi-action-aspect-ratio:before { + content: "\e60e"; +} + +.mdi-action-assessment:before { + content: "\e60f"; +} + +.mdi-action-assignment-ind:before { + content: "\e610"; +} + +.mdi-action-assignment-late:before { + content: "\e611"; +} + +.mdi-action-assignment-return:before { + content: "\e612"; +} + +.mdi-action-assignment-returned:before { + content: "\e613"; +} + +.mdi-action-assignment-turned-in:before { + content: "\e614"; +} + +.mdi-action-assignment:before { + content: "\e615"; +} + +.mdi-action-autorenew:before { + content: "\e616"; +} + +.mdi-action-backup:before { + content: "\e617"; +} + +.mdi-action-book:before { + content: "\e618"; +} + +.mdi-action-bookmark-outline:before { + content: "\e619"; +} + +.mdi-action-bookmark:before { + content: "\e61a"; +} + +.mdi-action-bug-report:before { + content: "\e61b"; +} + +.mdi-action-cached:before { + content: "\e61c"; +} + +.mdi-action-check-circle:before { + content: "\e61d"; +} + +.mdi-action-class:before { + content: "\e61e"; +} + +.mdi-action-credit-card:before { + content: "\e61f"; +} + +.mdi-action-dashboard:before { + content: "\e620"; +} + +.mdi-action-delete:before { + content: "\e621"; +} + +.mdi-action-description:before { + content: "\e622"; +} + +.mdi-action-dns:before { + content: "\e623"; +} + +.mdi-action-done-all:before { + content: "\e624"; +} + +.mdi-action-done:before { + content: "\e625"; +} + +.mdi-action-event:before { + content: "\e626"; +} + +.mdi-action-exit-to-app:before { + content: "\e627"; +} + +.mdi-action-explore:before { + content: "\e628"; +} + +.mdi-action-extension:before { + content: "\e629"; +} + +.mdi-action-face-unlock:before { + content: "\e62a"; +} + +.mdi-action-favorite-outline:before { + content: "\e62b"; +} + +.mdi-action-favorite:before { + content: "\e62c"; +} + +.mdi-action-find-in-page:before { + content: "\e62d"; +} + +.mdi-action-find-replace:before { + content: "\e62e"; +} + +.mdi-action-flip-to-back:before { + content: "\e62f"; +} + +.mdi-action-flip-to-front:before { + content: "\e630"; +} + +.mdi-action-get-app:before { + content: "\e631"; +} + +.mdi-action-grade:before { + content: "\e632"; +} + +.mdi-action-group-work:before { + content: "\e633"; +} + +.mdi-action-help:before { + content: "\e634"; +} + +.mdi-action-highlight-remove:before { + content: "\e635"; +} + +.mdi-action-history:before { + content: "\e636"; +} + +.mdi-action-home:before { + content: "\e637"; +} + +.mdi-action-https:before { + content: "\e638"; +} + +.mdi-action-info-outline:before { + content: "\e639"; +} + +.mdi-action-info:before { + content: "\e63a"; +} + +.mdi-action-input:before { + content: "\e63b"; +} + +.mdi-action-invert-colors:before { + content: "\e63c"; +} + +.mdi-action-label-outline:before { + content: "\e63d"; +} + +.mdi-action-label:before { + content: "\e63e"; +} + +.mdi-action-language:before { + content: "\e63f"; +} + +.mdi-action-launch:before { + content: "\e640"; +} + +.mdi-action-list:before { + content: "\e641"; +} + +.mdi-action-lock-open:before { + content: "\e642"; +} + +.mdi-action-lock-outline:before { + content: "\e643"; +} + +.mdi-action-lock:before { + content: "\e644"; +} + +.mdi-action-loyalty:before { + content: "\e645"; +} + +.mdi-action-markunread-mailbox:before { + content: "\e646"; +} + +.mdi-action-note-add:before { + content: "\e647"; +} + +.mdi-action-open-in-browser:before { + content: "\e648"; +} + +.mdi-action-open-in-new:before { + content: "\e649"; +} + +.mdi-action-open-with:before { + content: "\e64a"; +} + +.mdi-action-pageview:before { + content: "\e64b"; +} + +.mdi-action-payment:before { + content: "\e64c"; +} + +.mdi-action-perm-camera-mic:before { + content: "\e64d"; +} + +.mdi-action-perm-contact-cal:before { + content: "\e64e"; +} + +.mdi-action-perm-data-setting:before { + content: "\e64f"; +} + +.mdi-action-perm-device-info:before { + content: "\e650"; +} + +.mdi-action-perm-identity:before { + content: "\e651"; +} + +.mdi-action-perm-media:before { + content: "\e652"; +} + +.mdi-action-perm-phone-msg:before { + content: "\e653"; +} + +.mdi-action-perm-scan-wifi:before { + content: "\e654"; +} + +.mdi-action-picture-in-picture:before { + content: "\e655"; +} + +.mdi-action-polymer:before { + content: "\e656"; +} + +.mdi-action-print:before { + content: "\e657"; +} + +.mdi-action-query-builder:before { + content: "\e658"; +} + +.mdi-action-question-answer:before { + content: "\e659"; +} + +.mdi-action-receipt:before { + content: "\e65a"; +} + +.mdi-action-redeem:before { + content: "\e65b"; +} + +.mdi-action-reorder:before { + content: "\e65c"; +} + +.mdi-action-report-problem:before { + content: "\e65d"; +} + +.mdi-action-restore:before { + content: "\e65e"; +} + +.mdi-action-room:before { + content: "\e65f"; +} + +.mdi-action-schedule:before { + content: "\e660"; +} + +.mdi-action-search:before { + content: "\e661"; +} + +.mdi-action-settings-applications:before { + content: "\e662"; +} + +.mdi-action-settings-backup-restore:before { + content: "\e663"; +} + +.mdi-action-settings-bluetooth:before { + content: "\e664"; +} + +.mdi-action-settings-cell:before { + content: "\e665"; +} + +.mdi-action-settings-display:before { + content: "\e666"; +} + +.mdi-action-settings-ethernet:before { + content: "\e667"; +} + +.mdi-action-settings-input-antenna:before { + content: "\e668"; +} + +.mdi-action-settings-input-component:before { + content: "\e669"; +} + +.mdi-action-settings-input-composite:before { + content: "\e66a"; +} + +.mdi-action-settings-input-hdmi:before { + content: "\e66b"; +} + +.mdi-action-settings-input-svideo:before { + content: "\e66c"; +} + +.mdi-action-settings-overscan:before { + content: "\e66d"; +} + +.mdi-action-settings-phone:before { + content: "\e66e"; +} + +.mdi-action-settings-power:before { + content: "\e66f"; +} + +.mdi-action-settings-remote:before { + content: "\e670"; +} + +.mdi-action-settings-voice:before { + content: "\e671"; +} + +.mdi-action-settings:before { + content: "\e672"; +} + +.mdi-action-shop-two:before { + content: "\e673"; +} + +.mdi-action-shop:before { + content: "\e674"; +} + +.mdi-action-shopping-basket:before { + content: "\e675"; +} + +.mdi-action-shopping-cart:before { + content: "\e676"; +} + +.mdi-action-speaker-notes:before { + content: "\e677"; +} + +.mdi-action-spellcheck:before { + content: "\e678"; +} + +.mdi-action-star-rate:before { + content: "\e679"; +} + +.mdi-action-stars:before { + content: "\e67a"; +} + +.mdi-action-store:before { + content: "\e67b"; +} + +.mdi-action-subject:before { + content: "\e67c"; +} + +.mdi-action-supervisor-account:before { + content: "\e67d"; +} + +.mdi-action-swap-horiz:before { + content: "\e67e"; +} + +.mdi-action-swap-vert-circle:before { + content: "\e67f"; +} + +.mdi-action-swap-vert:before { + content: "\e680"; +} + +.mdi-action-system-update-tv:before { + content: "\e681"; +} + +.mdi-action-tab-unselected:before { + content: "\e682"; +} + +.mdi-action-tab:before { + content: "\e683"; +} + +.mdi-action-theaters:before { + content: "\e684"; +} + +.mdi-action-thumb-down:before { + content: "\e685"; +} + +.mdi-action-thumb-up:before { + content: "\e686"; +} + +.mdi-action-thumbs-up-down:before { + content: "\e687"; +} + +.mdi-action-toc:before { + content: "\e688"; +} + +.mdi-action-today:before { + content: "\e689"; +} + +.mdi-action-track-changes:before { + content: "\e68a"; +} + +.mdi-action-translate:before { + content: "\e68b"; +} + +.mdi-action-trending-down:before { + content: "\e68c"; +} + +.mdi-action-trending-neutral:before { + content: "\e68d"; +} + +.mdi-action-trending-up:before { + content: "\e68e"; +} + +.mdi-action-turned-in-not:before { + content: "\e68f"; +} + +.mdi-action-turned-in:before { + content: "\e690"; +} + +.mdi-action-verified-user:before { + content: "\e691"; +} + +.mdi-action-view-agenda:before { + content: "\e692"; +} + +.mdi-action-view-array:before { + content: "\e693"; +} + +.mdi-action-view-carousel:before { + content: "\e694"; +} + +.mdi-action-view-column:before { + content: "\e695"; +} + +.mdi-action-view-day:before { + content: "\e696"; +} + +.mdi-action-view-headline:before { + content: "\e697"; +} + +.mdi-action-view-list:before { + content: "\e698"; +} + +.mdi-action-view-module:before { + content: "\e699"; +} + +.mdi-action-view-quilt:before { + content: "\e69a"; +} + +.mdi-action-view-stream:before { + content: "\e69b"; +} + +.mdi-action-view-week:before { + content: "\e69c"; +} + +.mdi-action-visibility-off:before { + content: "\e69d"; +} + +.mdi-action-visibility:before { + content: "\e69e"; +} + +.mdi-action-wallet-giftcard:before { + content: "\e69f"; +} + +.mdi-action-wallet-membership:before { + content: "\e6a0"; +} + +.mdi-action-wallet-travel:before { + content: "\e6a1"; +} + +.mdi-action-work:before { + content: "\e6a2"; +} + +.mdi-alert-error:before { + content: "\e6a3"; +} + +.mdi-alert-warning:before { + content: "\e6a4"; +} + +.mdi-av-album:before { + content: "\e6a5"; +} + +.mdi-av-closed-caption:before { + content: "\e6a6"; +} + +.mdi-av-equalizer:before { + content: "\e6a7"; +} + +.mdi-av-explicit:before { + content: "\e6a8"; +} + +.mdi-av-fast-forward:before { + content: "\e6a9"; +} + +.mdi-av-fast-rewind:before { + content: "\e6aa"; +} + +.mdi-av-games:before { + content: "\e6ab"; +} + +.mdi-av-hearing:before { + content: "\e6ac"; +} + +.mdi-av-high-quality:before { + content: "\e6ad"; +} + +.mdi-av-loop:before { + content: "\e6ae"; +} + +.mdi-av-mic-none:before { + content: "\e6af"; +} + +.mdi-av-mic-off:before { + content: "\e6b0"; +} + +.mdi-av-mic:before { + content: "\e6b1"; +} + +.mdi-av-movie:before { + content: "\e6b2"; +} + +.mdi-av-my-library-add:before { + content: "\e6b3"; +} + +.mdi-av-my-library-books:before { + content: "\e6b4"; +} + +.mdi-av-my-library-music:before { + content: "\e6b5"; +} + +.mdi-av-new-releases:before { + content: "\e6b6"; +} + +.mdi-av-not-interested:before { + content: "\e6b7"; +} + +.mdi-av-pause-circle-fill:before { + content: "\e6b8"; +} + +.mdi-av-pause-circle-outline:before { + content: "\e6b9"; +} + +.mdi-av-pause:before { + content: "\e6ba"; +} + +.mdi-av-play-arrow:before { + content: "\e6bb"; +} + +.mdi-av-play-circle-fill:before { + content: "\e6bc"; +} + +.mdi-av-play-circle-outline:before { + content: "\e6bd"; +} + +.mdi-av-play-shopping-bag:before { + content: "\e6be"; +} + +.mdi-av-playlist-add:before { + content: "\e6bf"; +} + +.mdi-av-queue-music:before { + content: "\e6c0"; +} + +.mdi-av-queue:before { + content: "\e6c1"; +} + +.mdi-av-radio:before { + content: "\e6c2"; +} + +.mdi-av-recent-actors:before { + content: "\e6c3"; +} + +.mdi-av-repeat-one:before { + content: "\e6c4"; +} + +.mdi-av-repeat:before { + content: "\e6c5"; +} + +.mdi-av-replay:before { + content: "\e6c6"; +} + +.mdi-av-shuffle:before { + content: "\e6c7"; +} + +.mdi-av-skip-next:before { + content: "\e6c8"; +} + +.mdi-av-skip-previous:before { + content: "\e6c9"; +} + +.mdi-av-snooze:before { + content: "\e6ca"; +} + +.mdi-av-stop:before { + content: "\e6cb"; +} + +.mdi-av-subtitles:before { + content: "\e6cc"; +} + +.mdi-av-surround-sound:before { + content: "\e6cd"; +} + +.mdi-av-timer:before { + content: "\e6ce"; +} + +.mdi-av-video-collection:before { + content: "\e6cf"; +} + +.mdi-av-videocam-off:before { + content: "\e6d0"; +} + +.mdi-av-videocam:before { + content: "\e6d1"; +} + +.mdi-av-volume-down:before { + content: "\e6d2"; +} + +.mdi-av-volume-mute:before { + content: "\e6d3"; +} + +.mdi-av-volume-off:before { + content: "\e6d4"; +} + +.mdi-av-volume-up:before { + content: "\e6d5"; +} + +.mdi-av-web:before { + content: "\e6d6"; +} + +.mdi-communication-business:before { + content: "\e6d7"; +} + +.mdi-communication-call-end:before { + content: "\e6d8"; +} + +.mdi-communication-call-made:before { + content: "\e6d9"; +} + +.mdi-communication-call-merge:before { + content: "\e6da"; +} + +.mdi-communication-call-missed:before { + content: "\e6db"; +} + +.mdi-communication-call-received:before { + content: "\e6dc"; +} + +.mdi-communication-call-split:before { + content: "\e6dd"; +} + +.mdi-communication-call:before { + content: "\e6de"; +} + +.mdi-communication-chat:before { + content: "\e6df"; +} + +.mdi-communication-clear-all:before { + content: "\e6e0"; +} + +.mdi-communication-comment:before { + content: "\e6e1"; +} + +.mdi-communication-contacts:before { + content: "\e6e2"; +} + +.mdi-communication-dialer-sip:before { + content: "\e6e3"; +} + +.mdi-communication-dialpad:before { + content: "\e6e4"; +} + +.mdi-communication-dnd-on:before { + content: "\e6e5"; +} + +.mdi-communication-email:before { + content: "\e6e6"; +} + +.mdi-communication-forum:before { + content: "\e6e7"; +} + +.mdi-communication-import-export:before { + content: "\e6e8"; +} + +.mdi-communication-invert-colors-off:before { + content: "\e6e9"; +} + +.mdi-communication-invert-colors-on:before { + content: "\e6ea"; +} + +.mdi-communication-live-help:before { + content: "\e6eb"; +} + +.mdi-communication-location-off:before { + content: "\e6ec"; +} + +.mdi-communication-location-on:before { + content: "\e6ed"; +} + +.mdi-communication-message:before { + content: "\e6ee"; +} + +.mdi-communication-messenger:before { + content: "\e6ef"; +} + +.mdi-communication-no-sim:before { + content: "\e6f0"; +} + +.mdi-communication-phone:before { + content: "\e6f1"; +} + +.mdi-communication-portable-wifi-off:before { + content: "\e6f2"; +} + +.mdi-communication-quick-contacts-dialer:before { + content: "\e6f3"; +} + +.mdi-communication-quick-contacts-mail:before { + content: "\e6f4"; +} + +.mdi-communication-ring-volume:before { + content: "\e6f5"; +} + +.mdi-communication-stay-current-landscape:before { + content: "\e6f6"; +} + +.mdi-communication-stay-current-portrait:before { + content: "\e6f7"; +} + +.mdi-communication-stay-primary-landscape:before { + content: "\e6f8"; +} + +.mdi-communication-stay-primary-portrait:before { + content: "\e6f9"; +} + +.mdi-communication-swap-calls:before { + content: "\e6fa"; +} + +.mdi-communication-textsms:before { + content: "\e6fb"; +} + +.mdi-communication-voicemail:before { + content: "\e6fc"; +} + +.mdi-communication-vpn-key:before { + content: "\e6fd"; +} + +.mdi-content-add-box:before { + content: "\e6fe"; +} + +.mdi-content-add-circle-outline:before { + content: "\e6ff"; +} + +.mdi-content-add-circle:before { + content: "\e700"; +} + +.mdi-content-add:before { + content: "\e701"; +} + +.mdi-content-archive:before { + content: "\e702"; +} + +.mdi-content-backspace:before { + content: "\e703"; +} + +.mdi-content-block:before { + content: "\e704"; +} + +.mdi-content-clear:before { + content: "\e705"; +} + +.mdi-content-content-copy:before { + content: "\e706"; +} + +.mdi-content-content-cut:before { + content: "\e707"; +} + +.mdi-content-content-paste:before { + content: "\e708"; +} + +.mdi-content-create:before { + content: "\e709"; +} + +.mdi-content-drafts:before { + content: "\e70a"; +} + +.mdi-content-filter-list:before { + content: "\e70b"; +} + +.mdi-content-flag:before { + content: "\e70c"; +} + +.mdi-content-forward:before { + content: "\e70d"; +} + +.mdi-content-gesture:before { + content: "\e70e"; +} + +.mdi-content-inbox:before { + content: "\e70f"; +} + +.mdi-content-link:before { + content: "\e710"; +} + +.mdi-content-mail:before { + content: "\e711"; +} + +.mdi-content-markunread:before { + content: "\e712"; +} + +.mdi-content-redo:before { + content: "\e713"; +} + +.mdi-content-remove-circle-outline:before { + content: "\e714"; +} + +.mdi-content-remove-circle:before { + content: "\e715"; +} + +.mdi-content-remove:before { + content: "\e716"; +} + +.mdi-content-reply-all:before { + content: "\e717"; +} + +.mdi-content-reply:before { + content: "\e718"; +} + +.mdi-content-report:before { + content: "\e719"; +} + +.mdi-content-save:before { + content: "\e71a"; +} + +.mdi-content-select-all:before { + content: "\e71b"; +} + +.mdi-content-send:before { + content: "\e71c"; +} + +.mdi-content-sort:before { + content: "\e71d"; +} + +.mdi-content-text-format:before { + content: "\e71e"; +} + +.mdi-content-undo:before { + content: "\e71f"; +} + +.mdi-editor-attach-file:before { + content: "\e776"; +} + +.mdi-editor-attach-money:before { + content: "\e777"; +} + +.mdi-editor-border-all:before { + content: "\e778"; +} + +.mdi-editor-border-bottom:before { + content: "\e779"; +} + +.mdi-editor-border-clear:before { + content: "\e77a"; +} + +.mdi-editor-border-color:before { + content: "\e77b"; +} + +.mdi-editor-border-horizontal:before { + content: "\e77c"; +} + +.mdi-editor-border-inner:before { + content: "\e77d"; +} + +.mdi-editor-border-left:before { + content: "\e77e"; +} + +.mdi-editor-border-outer:before { + content: "\e77f"; +} + +.mdi-editor-border-right:before { + content: "\e780"; +} + +.mdi-editor-border-style:before { + content: "\e781"; +} + +.mdi-editor-border-top:before { + content: "\e782"; +} + +.mdi-editor-border-vertical:before { + content: "\e783"; +} + +.mdi-editor-format-align-center:before { + content: "\e784"; +} + +.mdi-editor-format-align-justify:before { + content: "\e785"; +} + +.mdi-editor-format-align-left:before { + content: "\e786"; +} + +.mdi-editor-format-align-right:before { + content: "\e787"; +} + +.mdi-editor-format-bold:before { + content: "\e788"; +} + +.mdi-editor-format-clear:before { + content: "\e789"; +} + +.mdi-editor-format-color-fill:before { + content: "\e78a"; +} + +.mdi-editor-format-color-reset:before { + content: "\e78b"; +} + +.mdi-editor-format-color-text:before { + content: "\e78c"; +} + +.mdi-editor-format-indent-decrease:before { + content: "\e78d"; +} + +.mdi-editor-format-indent-increase:before { + content: "\e78e"; +} + +.mdi-editor-format-italic:before { + content: "\e78f"; +} + +.mdi-editor-format-line-spacing:before { + content: "\e790"; +} + +.mdi-editor-format-list-bulleted:before { + content: "\e791"; +} + +.mdi-editor-format-list-numbered:before { + content: "\e792"; +} + +.mdi-editor-format-paint:before { + content: "\e793"; +} + +.mdi-editor-format-quote:before { + content: "\e794"; +} + +.mdi-editor-format-size:before { + content: "\e795"; +} + +.mdi-editor-format-strikethrough:before { + content: "\e796"; +} + +.mdi-editor-format-textdirection-l-to-r:before { + content: "\e797"; +} + +.mdi-editor-format-textdirection-r-to-l:before { + content: "\e798"; +} + +.mdi-editor-format-underline:before { + content: "\e799"; +} + +.mdi-editor-functions:before { + content: "\e79a"; +} + +.mdi-editor-insert-chart:before { + content: "\e79b"; +} + +.mdi-editor-insert-comment:before { + content: "\e79c"; +} + +.mdi-editor-insert-drive-file:before { + content: "\e79d"; +} + +.mdi-editor-insert-emoticon:before { + content: "\e79e"; +} + +.mdi-editor-insert-invitation:before { + content: "\e79f"; +} + +.mdi-editor-insert-link:before { + content: "\e7a0"; +} + +.mdi-editor-insert-photo:before { + content: "\e7a1"; +} + +.mdi-editor-merge-type:before { + content: "\e7a2"; +} + +.mdi-editor-mode-comment:before { + content: "\e7a3"; +} + +.mdi-editor-mode-edit:before { + content: "\e7a4"; +} + +.mdi-editor-publish:before { + content: "\e7a5"; +} + +.mdi-editor-vertical-align-bottom:before { + content: "\e7a6"; +} + +.mdi-editor-vertical-align-center:before { + content: "\e7a7"; +} + +.mdi-editor-vertical-align-top:before { + content: "\e7a8"; +} + +.mdi-editor-wrap-text:before { + content: "\e7a9"; +} + +.mdi-file-attachment:before { + content: "\e7aa"; +} + +.mdi-file-cloud-circle:before { + content: "\e7ab"; +} + +.mdi-file-cloud-done:before { + content: "\e7ac"; +} + +.mdi-file-cloud-download:before { + content: "\e7ad"; +} + +.mdi-file-cloud-off:before { + content: "\e7ae"; +} + +.mdi-file-cloud-queue:before { + content: "\e7af"; +} + +.mdi-file-cloud-upload:before { + content: "\e7b0"; +} + +.mdi-file-cloud:before { + content: "\e7b1"; +} + +.mdi-file-file-download:before { + content: "\e7b2"; +} + +.mdi-file-file-upload:before { + content: "\e7b3"; +} + +.mdi-file-folder-open:before { + content: "\e7b4"; +} + +.mdi-file-folder-shared:before { + content: "\e7b5"; +} + +.mdi-file-folder:before { + content: "\e7b6"; +} + +.mdi-device-access-alarm:before { + content: "\e720"; +} + +.mdi-device-access-alarms:before { + content: "\e721"; +} + +.mdi-device-access-time:before { + content: "\e722"; +} + +.mdi-device-add-alarm:before { + content: "\e723"; +} + +.mdi-device-airplanemode-off:before { + content: "\e724"; +} + +.mdi-device-airplanemode-on:before { + content: "\e725"; +} + +.mdi-device-battery-20:before { + content: "\e726"; +} + +.mdi-device-battery-30:before { + content: "\e727"; +} + +.mdi-device-battery-50:before { + content: "\e728"; +} + +.mdi-device-battery-60:before { + content: "\e729"; +} + +.mdi-device-battery-80:before { + content: "\e72a"; +} + +.mdi-device-battery-90:before { + content: "\e72b"; +} + +.mdi-device-battery-alert:before { + content: "\e72c"; +} + +.mdi-device-battery-charging-20:before { + content: "\e72d"; +} + +.mdi-device-battery-charging-30:before { + content: "\e72e"; +} + +.mdi-device-battery-charging-50:before { + content: "\e72f"; +} + +.mdi-device-battery-charging-60:before { + content: "\e730"; +} + +.mdi-device-battery-charging-80:before { + content: "\e731"; +} + +.mdi-device-battery-charging-90:before { + content: "\e732"; +} + +.mdi-device-battery-charging-full:before { + content: "\e733"; +} + +.mdi-device-battery-full:before { + content: "\e734"; +} + +.mdi-device-battery-std:before { + content: "\e735"; +} + +.mdi-device-battery-unknown:before { + content: "\e736"; +} + +.mdi-device-bluetooth-connected:before { + content: "\e737"; +} + +.mdi-device-bluetooth-disabled:before { + content: "\e738"; +} + +.mdi-device-bluetooth-searching:before { + content: "\e739"; +} + +.mdi-device-bluetooth:before { + content: "\e73a"; +} + +.mdi-device-brightness-auto:before { + content: "\e73b"; +} + +.mdi-device-brightness-high:before { + content: "\e73c"; +} + +.mdi-device-brightness-low:before { + content: "\e73d"; +} + +.mdi-device-brightness-medium:before { + content: "\e73e"; +} + +.mdi-device-data-usage:before { + content: "\e73f"; +} + +.mdi-device-developer-mode:before { + content: "\e740"; +} + +.mdi-device-devices:before { + content: "\e741"; +} + +.mdi-device-dvr:before { + content: "\e742"; +} + +.mdi-device-gps-fixed:before { + content: "\e743"; +} + +.mdi-device-gps-not-fixed:before { + content: "\e744"; +} + +.mdi-device-gps-off:before { + content: "\e745"; +} + +.mdi-device-location-disabled:before { + content: "\e746"; +} + +.mdi-device-location-searching:before { + content: "\e747"; +} + +.mdi-device-multitrack-audio:before { + content: "\e748"; +} + +.mdi-device-network-cell:before { + content: "\e749"; +} + +.mdi-device-network-wifi:before { + content: "\e74a"; +} + +.mdi-device-nfc:before { + content: "\e74b"; +} + +.mdi-device-now-wallpaper:before { + content: "\e74c"; +} + +.mdi-device-now-widgets:before { + content: "\e74d"; +} + +.mdi-device-screen-lock-landscape:before { + content: "\e74e"; +} + +.mdi-device-screen-lock-portrait:before { + content: "\e74f"; +} + +.mdi-device-screen-lock-rotation:before { + content: "\e750"; +} + +.mdi-device-screen-rotation:before { + content: "\e751"; +} + +.mdi-device-sd-storage:before { + content: "\e752"; +} + +.mdi-device-settings-system-daydream:before { + content: "\e753"; +} + +.mdi-device-signal-cellular-0-bar:before { + content: "\e754"; +} + +.mdi-device-signal-cellular-1-bar:before { + content: "\e755"; +} + +.mdi-device-signal-cellular-2-bar:before { + content: "\e756"; +} + +.mdi-device-signal-cellular-3-bar:before { + content: "\e757"; +} + +.mdi-device-signal-cellular-4-bar:before { + content: "\e758"; +} + +.mdi-signal-wifi-statusbar-connected-no-internet-after:before { + content: "\e8f6"; +} + +.mdi-device-signal-cellular-connected-no-internet-0-bar:before { + content: "\e759"; +} + +.mdi-device-signal-cellular-connected-no-internet-1-bar:before { + content: "\e75a"; +} + +.mdi-device-signal-cellular-connected-no-internet-2-bar:before { + content: "\e75b"; +} + +.mdi-device-signal-cellular-connected-no-internet-3-bar:before { + content: "\e75c"; +} + +.mdi-device-signal-cellular-connected-no-internet-4-bar:before { + content: "\e75d"; +} + +.mdi-device-signal-cellular-no-sim:before { + content: "\e75e"; +} + +.mdi-device-signal-cellular-null:before { + content: "\e75f"; +} + +.mdi-device-signal-cellular-off:before { + content: "\e760"; +} + +.mdi-device-signal-wifi-0-bar:before { + content: "\e761"; +} + +.mdi-device-signal-wifi-1-bar:before { + content: "\e762"; +} + +.mdi-device-signal-wifi-2-bar:before { + content: "\e763"; +} + +.mdi-device-signal-wifi-3-bar:before { + content: "\e764"; +} + +.mdi-device-signal-wifi-4-bar:before { + content: "\e765"; +} + +.mdi-device-signal-wifi-off:before { + content: "\e766"; +} + +.mdi-device-signal-wifi-statusbar-1-bar:before { + content: "\e767"; +} + +.mdi-device-signal-wifi-statusbar-2-bar:before { + content: "\e768"; +} + +.mdi-device-signal-wifi-statusbar-3-bar:before { + content: "\e769"; +} + +.mdi-device-signal-wifi-statusbar-4-bar:before { + content: "\e76a"; +} + +.mdi-device-signal-wifi-statusbar-connected-no-internet-:before { + content: "\e76b"; +} + +.mdi-device-signal-wifi-statusbar-connected-no-internet:before { + content: "\e76f"; +} + +.mdi-device-signal-wifi-statusbar-connected-no-internet-2:before { + content: "\e76c"; +} + +.mdi-device-signal-wifi-statusbar-connected-no-internet-3:before { + content: "\e76d"; +} + +.mdi-device-signal-wifi-statusbar-connected-no-internet-4:before { + content: "\e76e"; +} + +.mdi-signal-wifi-statusbar-not-connected-after:before { + content: "\e8f7"; +} + +.mdi-device-signal-wifi-statusbar-not-connected:before { + content: "\e770"; +} + +.mdi-device-signal-wifi-statusbar-null:before { + content: "\e771"; +} + +.mdi-device-storage:before { + content: "\e772"; +} + +.mdi-device-usb:before { + content: "\e773"; +} + +.mdi-device-wifi-lock:before { + content: "\e774"; +} + +.mdi-device-wifi-tethering:before { + content: "\e775"; +} + +.mdi-hardware-cast-connected:before { + content: "\e7b7"; +} + +.mdi-hardware-cast:before { + content: "\e7b8"; +} + +.mdi-hardware-computer:before { + content: "\e7b9"; +} + +.mdi-hardware-desktop-mac:before { + content: "\e7ba"; +} + +.mdi-hardware-desktop-windows:before { + content: "\e7bb"; +} + +.mdi-hardware-dock:before { + content: "\e7bc"; +} + +.mdi-hardware-gamepad:before { + content: "\e7bd"; +} + +.mdi-hardware-headset-mic:before { + content: "\e7be"; +} + +.mdi-hardware-headset:before { + content: "\e7bf"; +} + +.mdi-hardware-keyboard-alt:before { + content: "\e7c0"; +} + +.mdi-hardware-keyboard-arrow-down:before { + content: "\e7c1"; +} + +.mdi-hardware-keyboard-arrow-left:before { + content: "\e7c2"; +} + +.mdi-hardware-keyboard-arrow-right:before { + content: "\e7c3"; +} + +.mdi-hardware-keyboard-arrow-up:before { + content: "\e7c4"; +} + +.mdi-hardware-keyboard-backspace:before { + content: "\e7c5"; +} + +.mdi-hardware-keyboard-capslock:before { + content: "\e7c6"; +} + +.mdi-hardware-keyboard-control:before { + content: "\e7c7"; +} + +.mdi-hardware-keyboard-hide:before { + content: "\e7c8"; +} + +.mdi-hardware-keyboard-return:before { + content: "\e7c9"; +} + +.mdi-hardware-keyboard-tab:before { + content: "\e7ca"; +} + +.mdi-hardware-keyboard-voice:before { + content: "\e7cb"; +} + +.mdi-hardware-keyboard:before { + content: "\e7cc"; +} + +.mdi-hardware-laptop-chromebook:before { + content: "\e7cd"; +} + +.mdi-hardware-laptop-mac:before { + content: "\e7ce"; +} + +.mdi-hardware-laptop-windows:before { + content: "\e7cf"; +} + +.mdi-hardware-laptop:before { + content: "\e7d0"; +} + +.mdi-hardware-memory:before { + content: "\e7d1"; +} + +.mdi-hardware-mouse:before { + content: "\e7d2"; +} + +.mdi-hardware-phone-android:before { + content: "\e7d3"; +} + +.mdi-hardware-phone-iphone:before { + content: "\e7d4"; +} + +.mdi-hardware-phonelink-off:before { + content: "\e7d5"; +} + +.mdi-hardware-phonelink:before { + content: "\e7d6"; +} + +.mdi-hardware-security:before { + content: "\e7d7"; +} + +.mdi-hardware-sim-card:before { + content: "\e7d8"; +} + +.mdi-hardware-smartphone:before { + content: "\e7d9"; +} + +.mdi-hardware-speaker:before { + content: "\e7da"; +} + +.mdi-hardware-tablet-android:before { + content: "\e7db"; +} + +.mdi-hardware-tablet-mac:before { + content: "\e7dc"; +} + +.mdi-hardware-tablet:before { + content: "\e7dd"; +} + +.mdi-hardware-tv:before { + content: "\e7de"; +} + +.mdi-hardware-watch:before { + content: "\e7df"; +} + +.mdi-image-add-to-photos:before { + content: "\e7e0"; +} + +.mdi-image-adjust:before { + content: "\e7e1"; +} + +.mdi-image-assistant-photo:before { + content: "\e7e2"; +} + +.mdi-image-audiotrack:before { + content: "\e7e3"; +} + +.mdi-image-blur-circular:before { + content: "\e7e4"; +} + +.mdi-image-blur-linear:before { + content: "\e7e5"; +} + +.mdi-image-blur-off:before { + content: "\e7e6"; +} + +.mdi-image-blur-on:before { + content: "\e7e7"; +} + +.mdi-image-brightness-1:before { + content: "\e7e8"; +} + +.mdi-image-brightness-2:before { + content: "\e7e9"; +} + +.mdi-image-brightness-3:before { + content: "\e7ea"; +} + +.mdi-image-brightness-4:before { + content: "\e7eb"; +} + +.mdi-image-brightness-5:before { + content: "\e7ec"; +} + +.mdi-image-brightness-6:before { + content: "\e7ed"; +} + +.mdi-image-brightness-7:before { + content: "\e7ee"; +} + +.mdi-image-brush:before { + content: "\e7ef"; +} + +.mdi-image-camera-alt:before { + content: "\e7f0"; +} + +.mdi-image-camera-front:before { + content: "\e7f1"; +} + +.mdi-image-camera-rear:before { + content: "\e7f2"; +} + +.mdi-image-camera-roll:before { + content: "\e7f3"; +} + +.mdi-image-camera:before { + content: "\e7f4"; +} + +.mdi-image-center-focus-strong:before { + content: "\e7f5"; +} + +.mdi-image-center-focus-weak:before { + content: "\e7f6"; +} + +.mdi-image-collections:before { + content: "\e7f7"; +} + +.mdi-image-color-lens:before { + content: "\e7f8"; +} + +.mdi-image-colorize:before { + content: "\e7f9"; +} + +.mdi-image-compare:before { + content: "\e7fa"; +} + +.mdi-image-control-point-duplicate:before { + content: "\e7fb"; +} + +.mdi-image-control-point:before { + content: "\e7fc"; +} + +.mdi-image-crop-3-2:before { + content: "\e7fd"; +} + +.mdi-image-crop-5-4:before { + content: "\e7fe"; +} + +.mdi-image-crop-7-5:before { + content: "\e7ff"; +} + +.mdi-image-crop-16-9:before { + content: "\e800"; +} + +.mdi-image-crop-din:before { + content: "\e801"; +} + +.mdi-image-crop-free:before { + content: "\e802"; +} + +.mdi-image-crop-landscape:before { + content: "\e803"; +} + +.mdi-image-crop-original:before { + content: "\e804"; +} + +.mdi-image-crop-portrait:before { + content: "\e805"; +} + +.mdi-image-crop-square:before { + content: "\e806"; +} + +.mdi-image-crop:before { + content: "\e807"; +} + +.mdi-image-dehaze:before { + content: "\e808"; +} + +.mdi-image-details:before { + content: "\e809"; +} + +.mdi-image-edit:before { + content: "\e80a"; +} + +.mdi-image-exposure-minus-1:before { + content: "\e80b"; +} + +.mdi-image-exposure-minus-2:before { + content: "\e80c"; +} + +.mdi-image-exposure-plus-1:before { + content: "\e80d"; +} + +.mdi-image-exposure-plus-2:before { + content: "\e80e"; +} + +.mdi-image-exposure-zero:before { + content: "\e80f"; +} + +.mdi-image-exposure:before { + content: "\e810"; +} + +.mdi-image-filter-1:before { + content: "\e811"; +} + +.mdi-image-filter-2:before { + content: "\e812"; +} + +.mdi-image-filter-3:before { + content: "\e813"; +} + +.mdi-image-filter-4:before { + content: "\e814"; +} + +.mdi-image-filter-5:before { + content: "\e815"; +} + +.mdi-image-filter-6:before { + content: "\e816"; +} + +.mdi-image-filter-7:before { + content: "\e817"; +} + +.mdi-image-filter-8:before { + content: "\e818"; +} + +.mdi-image-filter-9-plus:before { + content: "\e819"; +} + +.mdi-image-filter-9:before { + content: "\e81a"; +} + +.mdi-image-filter-b-and-w:before { + content: "\e81b"; +} + +.mdi-image-filter-center-focus:before { + content: "\e81c"; +} + +.mdi-image-filter-drama:before { + content: "\e81d"; +} + +.mdi-image-filter-frames:before { + content: "\e81e"; +} + +.mdi-image-filter-hdr:before { + content: "\e81f"; +} + +.mdi-image-filter-none:before { + content: "\e820"; +} + +.mdi-image-filter-tilt-shift:before { + content: "\e821"; +} + +.mdi-image-filter-vintage:before { + content: "\e822"; +} + +.mdi-image-filter:before { + content: "\e823"; +} + +.mdi-image-flare:before { + content: "\e824"; +} + +.mdi-image-flash-auto:before { + content: "\e825"; +} + +.mdi-image-flash-off:before { + content: "\e826"; +} + +.mdi-image-flash-on:before { + content: "\e827"; +} + +.mdi-image-flip:before { + content: "\e828"; +} + +.mdi-image-gradient:before { + content: "\e829"; +} + +.mdi-image-grain:before { + content: "\e82a"; +} + +.mdi-image-grid-off:before { + content: "\e82b"; +} + +.mdi-image-grid-on:before { + content: "\e82c"; +} + +.mdi-image-hdr-off:before { + content: "\e82d"; +} + +.mdi-image-hdr-on:before { + content: "\e82e"; +} + +.mdi-image-hdr-strong:before { + content: "\e82f"; +} + +.mdi-image-hdr-weak:before { + content: "\e830"; +} + +.mdi-image-healing:before { + content: "\e831"; +} + +.mdi-image-image-aspect-ratio:before { + content: "\e832"; +} + +.mdi-image-image:before { + content: "\e833"; +} + +.mdi-image-iso:before { + content: "\e834"; +} + +.mdi-image-landscape:before { + content: "\e835"; +} + +.mdi-image-leak-add:before { + content: "\e836"; +} + +.mdi-image-leak-remove:before { + content: "\e837"; +} + +.mdi-image-lens:before { + content: "\e838"; +} + +.mdi-image-looks-3:before { + content: "\e839"; +} + +.mdi-image-looks-4:before { + content: "\e83a"; +} + +.mdi-image-looks-5:before { + content: "\e83b"; +} + +.mdi-image-looks-6:before { + content: "\e83c"; +} + +.mdi-image-looks-one:before { + content: "\e83d"; +} + +.mdi-image-looks-two:before { + content: "\e83e"; +} + +.mdi-image-looks:before { + content: "\e83f"; +} + +.mdi-image-loupe:before { + content: "\e840"; +} + +.mdi-image-movie-creation:before { + content: "\e841"; +} + +.mdi-image-nature-people:before { + content: "\e842"; +} + +.mdi-image-nature:before { + content: "\e843"; +} + +.mdi-image-navigate-before:before { + content: "\e844"; +} + +.mdi-image-navigate-next:before { + content: "\e845"; +} + +.mdi-image-palette:before { + content: "\e846"; +} + +.mdi-image-panorama-fisheye:before { + content: "\e847"; +} + +.mdi-image-panorama-horizontal:before { + content: "\e848"; +} + +.mdi-image-panorama-vertical:before { + content: "\e849"; +} + +.mdi-image-panorama-wide-angle:before { + content: "\e84a"; +} + +.mdi-image-panorama:before { + content: "\e84b"; +} + +.mdi-image-photo-album:before { + content: "\e84c"; +} + +.mdi-image-photo-camera:before { + content: "\e84d"; +} + +.mdi-image-photo-library:before { + content: "\e84e"; +} + +.mdi-image-photo:before { + content: "\e84f"; +} + +.mdi-image-portrait:before { + content: "\e850"; +} + +.mdi-image-remove-red-eye:before { + content: "\e851"; +} + +.mdi-image-rotate-left:before { + content: "\e852"; +} + +.mdi-image-rotate-right:before { + content: "\e853"; +} + +.mdi-image-slideshow:before { + content: "\e854"; +} + +.mdi-image-straighten:before { + content: "\e855"; +} + +.mdi-image-style:before { + content: "\e856"; +} + +.mdi-image-switch-camera:before { + content: "\e857"; +} + +.mdi-image-switch-video:before { + content: "\e858"; +} + +.mdi-image-tag-faces:before { + content: "\e859"; +} + +.mdi-image-texture:before { + content: "\e85a"; +} + +.mdi-image-timelapse:before { + content: "\e85b"; +} + +.mdi-image-timer-3:before { + content: "\e85c"; +} + +.mdi-image-timer-10:before { + content: "\e85d"; +} + +.mdi-image-timer-auto:before { + content: "\e85e"; +} + +.mdi-image-timer-off:before { + content: "\e85f"; +} + +.mdi-image-timer:before { + content: "\e860"; +} + +.mdi-image-tonality:before { + content: "\e861"; +} + +.mdi-image-transform:before { + content: "\e862"; +} + +.mdi-image-tune:before { + content: "\e863"; +} + +.mdi-image-wb-auto:before { + content: "\e864"; +} + +.mdi-image-wb-cloudy:before { + content: "\e865"; +} + +.mdi-image-wb-incandescent:before { + content: "\e866"; +} + +.mdi-image-wb-irradescent:before { + content: "\e867"; +} + +.mdi-image-wb-sunny:before { + content: "\e868"; +} + +.mdi-maps-beenhere:before { + content: "\e869"; +} + +.mdi-maps-directions-bike:before { + content: "\e86a"; +} + +.mdi-maps-directions-bus:before { + content: "\e86b"; +} + +.mdi-maps-directions-car:before { + content: "\e86c"; +} + +.mdi-maps-directions-ferry:before { + content: "\e86d"; +} + +.mdi-maps-directions-subway:before { + content: "\e86e"; +} + +.mdi-maps-directions-train:before { + content: "\e86f"; +} + +.mdi-maps-directions-transit:before { + content: "\e870"; +} + +.mdi-maps-directions-walk:before { + content: "\e871"; +} + +.mdi-maps-directions:before { + content: "\e872"; +} + +.mdi-maps-flight:before { + content: "\e873"; +} + +.mdi-maps-hotel:before { + content: "\e874"; +} + +.mdi-maps-layers-clear:before { + content: "\e875"; +} + +.mdi-maps-layers:before { + content: "\e876"; +} + +.mdi-maps-local-airport:before { + content: "\e877"; +} + +.mdi-maps-local-atm:before { + content: "\e878"; +} + +.mdi-maps-local-attraction:before { + content: "\e879"; +} + +.mdi-maps-local-bar:before { + content: "\e87a"; +} + +.mdi-maps-local-cafe:before { + content: "\e87b"; +} + +.mdi-maps-local-car-wash:before { + content: "\e87c"; +} + +.mdi-maps-local-convenience-store:before { + content: "\e87d"; +} + +.mdi-maps-local-drink:before { + content: "\e87e"; +} + +.mdi-maps-local-florist:before { + content: "\e87f"; +} + +.mdi-maps-local-gas-station:before { + content: "\e880"; +} + +.mdi-maps-local-grocery-store:before { + content: "\e881"; +} + +.mdi-maps-local-hospital:before { + content: "\e882"; +} + +.mdi-maps-local-hotel:before { + content: "\e883"; +} + +.mdi-maps-local-laundry-service:before { + content: "\e884"; +} + +.mdi-maps-local-library:before { + content: "\e885"; +} + +.mdi-maps-local-mall:before { + content: "\e886"; +} + +.mdi-maps-local-movies:before { + content: "\e887"; +} + +.mdi-maps-local-offer:before { + content: "\e888"; +} + +.mdi-maps-local-parking:before { + content: "\e889"; +} + +.mdi-maps-local-pharmacy:before { + content: "\e88a"; +} + +.mdi-maps-local-phone:before { + content: "\e88b"; +} + +.mdi-maps-local-pizza:before { + content: "\e88c"; +} + +.mdi-maps-local-play:before { + content: "\e88d"; +} + +.mdi-maps-local-post-office:before { + content: "\e88e"; +} + +.mdi-maps-local-print-shop:before { + content: "\e88f"; +} + +.mdi-maps-local-restaurant:before { + content: "\e890"; +} + +.mdi-maps-local-see:before { + content: "\e891"; +} + +.mdi-maps-local-shipping:before { + content: "\e892"; +} + +.mdi-maps-local-taxi:before { + content: "\e893"; +} + +.mdi-maps-location-history:before { + content: "\e894"; +} + +.mdi-maps-map:before { + content: "\e895"; +} + +.mdi-maps-my-location:before { + content: "\e896"; +} + +.mdi-maps-navigation:before { + content: "\e897"; +} + +.mdi-maps-pin-drop:before { + content: "\e898"; +} + +.mdi-maps-place:before { + content: "\e899"; +} + +.mdi-maps-rate-review:before { + content: "\e89a"; +} + +.mdi-maps-restaurant-menu:before { + content: "\e89b"; +} + +.mdi-maps-satellite:before { + content: "\e89c"; +} + +.mdi-maps-store-mall-directory:before { + content: "\e89d"; +} + +.mdi-maps-terrain:before { + content: "\e89e"; +} + +.mdi-maps-traffic:before { + content: "\e89f"; +} + +.mdi-navigation-apps:before { + content: "\e8a0"; +} + +.mdi-navigation-arrow-back:before { + content: "\e8a1"; +} + +.mdi-navigation-arrow-drop-down-circle:before { + content: "\e8a2"; +} + +.mdi-navigation-arrow-drop-down:before { + content: "\e8a3"; +} + +.mdi-navigation-arrow-drop-up:before { + content: "\e8a4"; +} + +.mdi-navigation-arrow-forward:before { + content: "\e8a5"; +} + +.mdi-navigation-cancel:before { + content: "\e8a6"; +} + +.mdi-navigation-check:before { + content: "\e8a7"; +} + +.mdi-navigation-chevron-left:before { + content: "\e8a8"; +} + +.mdi-navigation-chevron-right:before { + content: "\e8a9"; +} + +.mdi-navigation-close:before { + content: "\e8aa"; +} + +.mdi-navigation-expand-less:before { + content: "\e8ab"; +} + +.mdi-navigation-expand-more:before { + content: "\e8ac"; +} + +.mdi-navigation-fullscreen-exit:before { + content: "\e8ad"; +} + +.mdi-navigation-fullscreen:before { + content: "\e8ae"; +} + +.mdi-navigation-menu:before { + content: "\e8af"; +} + +.mdi-navigation-more-horiz:before { + content: "\e8b0"; +} + +.mdi-navigation-more-vert:before { + content: "\e8b1"; +} + +.mdi-navigation-refresh:before { + content: "\e8b2"; +} + +.mdi-navigation-unfold-less:before { + content: "\e8b3"; +} + +.mdi-navigation-unfold-more:before { + content: "\e8b4"; +} + +.mdi-notification-adb:before { + content: "\e8b5"; +} + +.mdi-notification-bluetooth-audio:before { + content: "\e8b6"; +} + +.mdi-notification-disc-full:before { + content: "\e8b7"; +} + +.mdi-notification-dnd-forwardslash:before { + content: "\e8b8"; +} + +.mdi-notification-do-not-disturb:before { + content: "\e8b9"; +} + +.mdi-notification-drive-eta:before { + content: "\e8ba"; +} + +.mdi-notification-event-available:before { + content: "\e8bb"; +} + +.mdi-notification-event-busy:before { + content: "\e8bc"; +} + +.mdi-notification-event-note:before { + content: "\e8bd"; +} + +.mdi-notification-folder-special:before { + content: "\e8be"; +} + +.mdi-notification-mms:before { + content: "\e8bf"; +} + +.mdi-notification-more:before { + content: "\e8c0"; +} + +.mdi-notification-network-locked:before { + content: "\e8c1"; +} + +.mdi-notification-phone-bluetooth-speaker:before { + content: "\e8c2"; +} + +.mdi-notification-phone-forwarded:before { + content: "\e8c3"; +} + +.mdi-notification-phone-in-talk:before { + content: "\e8c4"; +} + +.mdi-notification-phone-locked:before { + content: "\e8c5"; +} + +.mdi-notification-phone-missed:before { + content: "\e8c6"; +} + +.mdi-notification-phone-paused:before { + content: "\e8c7"; +} + +.mdi-notification-play-download:before { + content: "\e8c8"; +} + +.mdi-notification-play-install:before { + content: "\e8c9"; +} + +.mdi-notification-sd-card:before { + content: "\e8ca"; +} + +.mdi-notification-sim-card-alert:before { + content: "\e8cb"; +} + +.mdi-notification-sms-failed:before { + content: "\e8cc"; +} + +.mdi-notification-sms:before { + content: "\e8cd"; +} + +.mdi-notification-sync-disabled:before { + content: "\e8ce"; +} + +.mdi-notification-sync-problem:before { + content: "\e8cf"; +} + +.mdi-notification-sync:before { + content: "\e8d0"; +} + +.mdi-notification-system-update:before { + content: "\e8d1"; +} + +.mdi-notification-tap-and-play:before { + content: "\e8d2"; +} + +.mdi-notification-time-to-leave:before { + content: "\e8d3"; +} + +.mdi-notification-vibration:before { + content: "\e8d4"; +} + +.mdi-notification-voice-chat:before { + content: "\e8d5"; +} + +.mdi-notification-vpn-lock:before { + content: "\e8d6"; +} + +.mdi-social-cake:before { + content: "\e8d7"; +} + +.mdi-social-domain:before { + content: "\e8d8"; +} + +.mdi-social-group-add:before { + content: "\e8d9"; +} + +.mdi-social-group:before { + content: "\e8da"; +} + +.mdi-social-location-city:before { + content: "\e8db"; +} + +.mdi-social-mood:before { + content: "\e8dc"; +} + +.mdi-social-notifications-none:before { + content: "\e8dd"; +} + +.mdi-social-notifications-off:before { + content: "\e8de"; +} + +.mdi-social-notifications-on:before { + content: "\e8df"; +} + +.mdi-social-notifications-paused:before { + content: "\e8e0"; +} + +.mdi-social-notifications:before { + content: "\e8e1"; +} + +.mdi-social-pages:before { + content: "\e8e2"; +} + +.mdi-social-party-mode:before { + content: "\e8e3"; +} + +.mdi-social-people-outline:before { + content: "\e8e4"; +} + +.mdi-social-people:before { + content: "\e8e5"; +} + +.mdi-social-person-add:before { + content: "\e8e6"; +} + +.mdi-social-person-outline:before { + content: "\e8e7"; +} + +.mdi-social-person:before { + content: "\e8e8"; +} + +.mdi-social-plus-one:before { + content: "\e8e9"; +} + +.mdi-social-poll:before { + content: "\e8ea"; +} + +.mdi-social-public:before { + content: "\e8eb"; +} + +.mdi-social-school:before { + content: "\e8ec"; +} + +.mdi-social-share:before { + content: "\e8ed"; +} + +.mdi-social-whatshot:before { + content: "\e8ee"; +} + +.mdi-toggle-check-box-outline-blank:before { + content: "\e8ef"; +} + +.mdi-toggle-check-box:before { + content: "\e8f0"; +} + +.mdi-toggle-radio-button-off:before { + content: "\e8f1"; +} + +.mdi-toggle-radio-button-on:before { + content: "\e8f2"; +} + +.mdi-toggle-star-half:before { + content: "\e8f3"; +} + +.mdi-toggle-star-outline:before { + content: "\e8f4"; +} + +.mdi-toggle-star:before { + content: "\e8f5"; +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_materialbox.scss b/system/admin/static/editor/sass/components/_materialbox.scss new file mode 100644 index 0000000..9c20176 --- /dev/null +++ b/system/admin/static/editor/sass/components/_materialbox.scss @@ -0,0 +1,41 @@ +.materialboxed { + cursor: zoom-in; + position: relative; + @include transition(opacity .4s); + + &:hover { + &:not(.active) { + opacity: .8; + } + will-change: left, top, width, height; + } +} + +.materialboxed.active { + cursor: zoom-out; +} + +#materialbox-overlay { + position:fixed; + top:0; + left:0; + right: 0; + bottom: 0; + background-color: #292929; + z-index: 999; + + will-change: opacity; +} +.materialbox-caption { + position: fixed; + display: none; + color: #fff; + line-height: 50px; + bottom: 0; + width: 100%; + text-align: center; + padding: 0% 15%; + height: 50px; + z-index: 1000; + -webkit-font-smoothing: antialiased; +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_mixins.scss b/system/admin/static/editor/sass/components/_mixins.scss new file mode 100644 index 0000000..4c3d373 --- /dev/null +++ b/system/admin/static/editor/sass/components/_mixins.scss @@ -0,0 +1,5 @@ +@mixin box-shadow-2($args1, $args2) { + -webkit-box-shadow: $args1, $args2; + -moz-box-shadow: $args1, $args2; + box-shadow: $args1, $args2; +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_modal.scss b/system/admin/static/editor/sass/components/_modal.scss new file mode 100644 index 0000000..0a6dcfb --- /dev/null +++ b/system/admin/static/editor/sass/components/_modal.scss @@ -0,0 +1,90 @@ +.modal { + @extend .z-depth-4; + + display: none; + position: fixed; + left: 0; + right: 0; + background-color: #fafafa; + padding: 0; + max-height: 70%; + width: 55%; + margin: auto; + overflow-y: auto; + + border-radius: 2px; + will-change: top, opacity; + + @media #{$medium-and-down} { + width: 80%; + } + + h1,h2,h3,h4 { + margin-top: 0; + } + + .modal-content { + padding: 24px; + } + .modal-close { + cursor: pointer; + } + + .modal-footer { + border-radius: 0 0 2px 2px; + background-color: #fafafa; + padding: 4px 6px; + height: 56px; + width: 100%; + + .btn, .btn-flat { + float: right; + margin: 6px 0; + } + } +} +.lean-overlay { + position: fixed; + z-index:999; + top: -100px; + left: 0; + bottom: 0; + right: 0; + height: 125%; + width: 100%; + background: #000; + display: none; + + will-change: opacity; +} + +// Modal with fixed action footer +.modal.modal-fixed-footer { + padding: 0; + height: 70%; + + .modal-content { + position: absolute; + height: calc(100% - 56px); + max-height: 100%; + width: 100%; + overflow-y: auto; + } + + .modal-footer { + border-top: 1px solid rgba(0,0,0,.1); + position: absolute; + bottom: 0; + } +} + +// Modal Bottom Sheet Style +.modal.bottom-sheet { + top: auto; + bottom: -100%; + margin: 0; + width: 100%; + max-height: 45%; + border-radius: 0; + will-change: bottom, opacity; +} diff --git a/system/admin/static/editor/sass/components/_navbar.scss b/system/admin/static/editor/sass/components/_navbar.scss new file mode 100644 index 0000000..65cd277 --- /dev/null +++ b/system/admin/static/editor/sass/components/_navbar.scss @@ -0,0 +1,144 @@ +nav { + color: $navbar-font-color; + @extend .z-depth-1; + background-color: $primary-color; + width: 100%; + height: $navbar-height-mobile; + line-height: $navbar-height-mobile; + + a { color: $navbar-font-color; } + + .nav-wrapper { + position: relative; + height: 100%; + + i { + display: block; + font-size: 2rem; + } + } + + @media #{$large-and-up} { + a.button-collapse { display: none; } + } + + + // Collapse button + .button-collapse { + float: left; + position: relative; + z-index: 1; + height: $navbar-height-mobile; + + i { + font-size: 2.7rem; + height: $navbar-height-mobile; + line-height: $navbar-height-mobile; + } + } + + + // Logo + .brand-logo { + position: absolute; + color: $navbar-font-color; + display: inline-block; + font-size: $navbar-brand-font-size; + padding: 0; + white-space: nowrap; + + &.center { + left: 50%; + @include transform(translateX(-50%)); + } + + @media #{$medium-and-down} { + left: 50%; + @include transform(translateX(-50%)); + } + + &.right { + right: 0.5rem; + padding: 0; + } + } + + + // Navbar Links + ul { + margin: 0; + + li { + @include transition(background-color .3s); + float: left; + padding: 0; + + &:hover, &.active { + background-color: rgba(0,0,0,.1); + } + } + a { + font-size: 1rem; + color: $navbar-font-color; + display: block; + padding: 0 15px; + } + + &.left { + float: left; + } + } + + // Navbar Search Form + .input-field { + margin: 0; + + input { + height: 100%; + font-size: 1.2rem; + border: none; + padding-left: 2rem; + + &:focus, &[type=text]:valid, &[type=password]:valid, + &[type=email]:valid, &[type=url]:valid, &[type=date]:valid { + border: none; + box-shadow: none; + } + } + label { + top: 0; + left: 0; + + i { + color: rgba(255,255,255,.7); + @include transition(color .3s); + } + &.active i { color: $navbar-font-color; } + &.active { + @include transform(translateY(0)); + } + } + + } + +} + +// Fixed Navbar +.navbar-fixed { + position: relative; + height: $navbar-height-mobile; + z-index: 998; + + nav { + position: fixed; + } +} +@media #{$medium-and-up} { + nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i { + height: $navbar-height; + line-height: $navbar-height; + } + .navbar-fixed { + height: $navbar-height; + } +} diff --git a/system/admin/static/editor/sass/components/_normalize.scss b/system/admin/static/editor/sass/components/_normalize.scss new file mode 100644 index 0000000..ab626c4 --- /dev/null +++ b/system/admin/static/editor/sass/components/_normalize.scss @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +/* 1 */ html input[type="button"], +button, +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/system/admin/static/editor/sass/components/_prefixer.scss b/system/admin/static/editor/sass/components/_prefixer.scss new file mode 100644 index 0000000..f483eaf --- /dev/null +++ b/system/admin/static/editor/sass/components/_prefixer.scss @@ -0,0 +1,376 @@ +//--------------------------------------------------- +// Sass Prefixer +// ------------------------------------------------- +// TABLE OF CONTENTS +// (*) denotes a syntax-sugar helper +// ------------------------------------------------- +// +// animation($args) +// animation-delay($delay) +// animation-direction($direction) +// animation-duration($duration) +// animation-fill-mode($mode) +// animation-iteration-count($count) +// animation-name($name) +// animation-play-state($state) +// animation-timing-function($function) +// background-size($args) +// inner-shadow($args) * +// box-sizing($args) +// border-box() * +// content-box() * +// columns($args) +// column-count($count) +// column-gap($gap) +// column-rule($args) +// column-width($width) +// flexbox() +// flex($args) +// order($args) +// align($args) +// justify-content($args) +// gradient($default,$start,$stop) * +// linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* +// linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])* +// transform($args) +// transform-origin($args) +// transform-style($style) +// rotate($deg) +// scale($factor) +// translate($x,$y) +// translate3d($x,$y,$z) +// translateHardware($x,$y) * +// text-shadow($args) +// transition($args) +// transition-delay($delay) +// transition-duration($duration) +// transition-property($property) +// transition-timing-function($function) + + +// Animation + +@mixin animation($args) { + -webkit-animation: $args; + -moz-animation: $args; + -ms-animation: $args; + -o-animation: $args; + animation: $args; +} +@mixin animation-delay($delay) { + -webkit-animation-delay: $delay; + -moz-animation-delay: $delay; + -ms-animation-delay: $delay; + -o-animation-delay: $delay; + animation-delay: $delay; +} +@mixin animation-direction($direction) { + -webkit-animation-direction: $direction; + -moz-animation-direction: $direction; + -ms-animation-direction: $direction; + -o-animation-direction: $direction; +} +@mixin animation-duration($duration) { + -webkit-animation-duration: $duration; + -moz-animation-duration: $duration; + -ms-animation-duration: $duration; + -o-animation-duration: $duration; +} +@mixin animation-fill-mode($mode) { + -webkit-animation-fill-mode: $mode; + -moz-animation-fill-mode: $mode; + -ms-animation-fill-mode: $mode; + -o-animation-fill-mode: $mode; + animation-fill-mode: $mode; +} +@mixin animation-iteration-count($count) { + -webkit-animation-iteration-count: $count; + -moz-animation-iteration-count: $count; + -ms-animation-iteration-count: $count; + -o-animation-iteration-count: $count; + animation-iteration-count: $count; +} +@mixin animation-name($name) { + -webkit-animation-name: $name; + -moz-animation-name: $name; + -ms-animation-name: $name; + -o-animation-name: $name; + animation-name: $name; +} +@mixin animation-play-state($state) { + -webkit-animation-play-state: $state; + -moz-animation-play-state: $state; + -ms-animation-play-state: $state; + -o-animation-play-state: $state; + animation-play-state: $state; +} +@mixin animation-timing-function($function) { + -webkit-animation-timing-function: $function; + -moz-animation-timing-function: $function; + -ms-animation-timing-function: $function; + -o-animation-timing-function: $function; + animation-timing-function: $function; +} + +// Keyframes +@mixin keyframes($animation-name) { + @-webkit-keyframes #{$animation-name} { + @content; + } + @-moz-keyframes #{$animation-name} { + @content; + } + @keyframes #{$animation-name} { + @content; + } +} + +// Backface-visibility + +@mixin backface-visibility($args) { + -webkit-backface-visibility: $args; + -moz-backface-visibility: $args; + -ms-backface-visibility: $args; + backface-visibility: $args; +} + + +// Background Size + +@mixin background-size($args) { + -webkit-background-size: $args; + background-size: $args; +} + +// Box Sizing + +@mixin box-sizing($args) { + -webkit-box-sizing: $args; + -moz-box-sizing: $args; + box-sizing: $args; +} +@mixin border-box(){ + @include box-sizing(border-box); +} +@mixin content-box(){ + @include box-sizing(content-box); +} + + +// Columns + +@mixin columns($args) { + -webkit-columns: $args; + -moz-columns: $args; + columns: $args; +} +@mixin column-count($count) { + -webkit-column-count: $count; + -moz-column-count: $count; + column-count: $count; +} +@mixin column-gap($gap) { + -webkit-column-gap: $gap; + -moz-column-gap: $gap; + column-gap: $gap; +} +@mixin column-width($width) { + -webkit-column-width: $width; + -moz-column-width: $width; + column-width: $width; +} +@mixin column-rule($args) { + -webkit-column-rule: $args; + -moz-column-rule: $args; + column-rule: $args; +} + +// Filter +@mixin filter($args) { + -webkit-filter: $args; + -moz-filter: $args; + -o-filter: $args; + -ms-filter: $args; +} + +// Flexbox +@mixin flexbox() { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + @mixin flex($values) { + -webkit-box-flex: $values; + -moz-box-flex: $values; + -webkit-flex: $values; + -ms-flex: $values; + flex: $values; + } + @mixin order($val) { + -webkit-box-ordinal-group: $val; + -moz-box-ordinal-group: $val; + -ms-flex-order: $val; + -webkit-order: $val; + order: $val; + } + @mixin align($align) { + -webkit-flex-align: $align; + -ms-flex-align: $align; + -webkit-align-items: $align; + align-items: $align; + } + @mixin justify-content($val) { + -webkit-justify-content: $val; + justify-content: $val; + } +// Gradients + +@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) { + @include linear-gradient-top($default,$start,0%,$stop,100%); +} +@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2)); + background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2); + background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2); + background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2); + background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2); + background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2); +} +@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); + background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3); +} +@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); + background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); +} +@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2)); + background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2); + background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2); + background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2); + background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2); + background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2); +} +@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3)); + background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); + background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3); +} +@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) { + background-color: $default; + background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4)); + background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); + background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4); +} + +// Text Shadow + +@mixin text-shadow($args) { + text-shadow: $args; +} + + +// Transforms + +@mixin transform($args) { + -webkit-transform: $args; + -moz-transform: $args; + -ms-transform: $args; + -o-transform: $args; + transform: $args; +} +@mixin transform-origin($args) { + -webkit-transform-origin: $args; + -moz-transform-origin: $args; + -ms-transform-origin: $args; + -o-transform-origin: $args; + transform-origin: $args; +} +@mixin transform-style($style) { + -webkit-transform-style: $style; + -moz-transform-style: $style; + -ms-transform-style: $style; + -o-transform-style: $style; + transform-style: $style; +} +@mixin rotate($deg:45deg){ + @include transform(rotate($deg)); +} +@mixin scale($factor:.5){ + @include transform(scale($factor)); +} +@mixin translate($x,$y){ + @include transform(translate($x,$y)); +} +@mixin translate3d($x,$y,$z) { + @include transform(translate3d($x,$y,$z)); +} +@mixin translateHardware($x,$y) { + @include translate($x,$y); + -webkit-transform: translate3d($x,$y,0); + -moz-transform: translate3d($x,$y,0); + -o-transform: translate3d($x,$y,0); + -ms-transform: translate3d($x,$y,0); + transform: translate3d($x,$y,0); +} + + +// Transitions + +@mixin transition($args:200ms) { + -webkit-transition: $args; + -moz-transition: $args; + -o-transition: $args; + -ms-transition: $args; + transition: $args; +} +@mixin transition-delay($delay:0) { + -webkit-transition-delay: $delay; + -moz-transition-delay: $delay; + -o-transition-delay: $delay; + -ms-transition-delay: $delay; + transition-delay: $delay; +} +@mixin transition-duration($duration:200ms) { + -webkit-transition-duration: $duration; + -moz-transition-duration: $duration; + -o-transition-duration: $duration; + -ms-transition-duration: $duration; + transition-duration: $duration; +} +@mixin transition-property($property:all) { + -webkit-transition-property: $property; + -moz-transition-property: $property; + -o-transition-property: $property; + -ms-transition-property: $property; + transition-property: $property; +} +@mixin transition-timing-function($function:ease) { + -webkit-transition-timing-function: $function; + -moz-transition-timing-function: $function; + -o-transition-timing-function: $function; + -ms-transition-timing-function: $function; + transition-timing-function: $function; +} diff --git a/system/admin/static/editor/sass/components/_preloader.scss b/system/admin/static/editor/sass/components/_preloader.scss new file mode 100644 index 0000000..ab5c783 --- /dev/null +++ b/system/admin/static/editor/sass/components/_preloader.scss @@ -0,0 +1,332 @@ +/* + @license + Copyright (c) 2014 The Polymer Project Authors. All rights reserved. + This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt + The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt + The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt + Code distributed by Google as part of the polymer project is also + subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt + */ + +/**************************/ +/* STYLES FOR THE SPINNER */ +/**************************/ + +/* + * Constants: + * STROKEWIDTH = 3px + * ARCSIZE = 270 degrees (amount of circle the arc takes up) + * ARCTIME = 1333ms (time it takes to expand and contract arc) + * ARCSTARTROT = 216 degrees (how much the start location of the arc + * should rotate each time, 216 gives us a + * 5 pointed star shape (it's 360/5 * 3). + * For a 7 pointed star, we might do + * 360/7 * 3 = 154.286) + * CONTAINERWIDTH = 28px + * SHRINK_TIME = 400ms + */ + + +.preloader-wrapper { + display: inline-block; + position: relative; + width: 48px; + height: 48px; + + &.small { + width: 36px; + height: 36px; + } + + &.big { + width: 64px; + height: 64px; + } + + &.active { + /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */ + -webkit-animation: container-rotate 1568ms linear infinite; + animation: container-rotate 1568ms linear infinite; + } +} + +@-webkit-keyframes container-rotate { + to { -webkit-transform: rotate(360deg) } +} + +@keyframes container-rotate { + to { transform: rotate(360deg) } +} + +.spinner-layer { + position: absolute; + width: 100%; + height: 100%; + opacity: 0; +} + +.spinner-blue, +.spinner-blue-only { + border-color: #4285f4; +} + +.spinner-red, +.spinner-red-only { + border-color: #db4437; +} + +.spinner-yellow, +.spinner-yellow-only { + border-color: #f4b400; +} + +.spinner-green, +.spinner-green-only { + border-color: #0f9d58; +} + +/** + * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee): + * + * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't + * guarantee that the animation will start _exactly_ after that value. So we avoid using + * animation-delay and instead set custom keyframes for each color (as redundant as it + * seems). + * + * We write out each animation in full (instead of separating animation-name, + * animation-duration, etc.) because under the polyfill, Safari does not recognize those + * specific properties properly, treats them as -webkit-animation, and overrides the + * other animation rules. See https://github.com/Polymer/platform/issues/53. + */ +.active .spinner-layer.spinner-blue { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-red { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-yellow { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-green { + /* durations: 4 * ARCTIME */ + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .spinner-layer.spinner-blue-only, +.active .spinner-layer.spinner-red-only, +.active .spinner-layer.spinner-yellow-only, +.active .spinner-layer.spinner-green-only { + /* durations: 4 * ARCTIME */ + opacity: 1; + -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +@-webkit-keyframes fill-unfill-rotate { + 12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */ + 25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */ + 37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */ + 50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */ + 62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */ + 75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */ + 87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */ + to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */ +} + +@keyframes fill-unfill-rotate { + 12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */ + 25% { transform: rotate(270deg); } /* 1 * ARCSIZE */ + 37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */ + 50% { transform: rotate(540deg); } /* 2 * ARCSIZE */ + 62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */ + 75% { transform: rotate(810deg); } /* 3 * ARCSIZE */ + 87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */ + to { transform: rotate(1080deg); } /* 4 * ARCSIZE */ +} + +@-webkit-keyframes blue-fade-in-out { + from { opacity: 1; } + 25% { opacity: 1; } + 26% { opacity: 0; } + 89% { opacity: 0; } + 90% { opacity: 1; } + 100% { opacity: 1; } +} + +@keyframes blue-fade-in-out { + from { opacity: 1; } + 25% { opacity: 1; } + 26% { opacity: 0; } + 89% { opacity: 0; } + 90% { opacity: 1; } + 100% { opacity: 1; } +} + +@-webkit-keyframes red-fade-in-out { + from { opacity: 0; } + 15% { opacity: 0; } + 25% { opacity: 1; } + 50% { opacity: 1; } + 51% { opacity: 0; } +} + +@keyframes red-fade-in-out { + from { opacity: 0; } + 15% { opacity: 0; } + 25% { opacity: 1; } + 50% { opacity: 1; } + 51% { opacity: 0; } +} + +@-webkit-keyframes yellow-fade-in-out { + from { opacity: 0; } + 40% { opacity: 0; } + 50% { opacity: 1; } + 75% { opacity: 1; } + 76% { opacity: 0; } +} + +@keyframes yellow-fade-in-out { + from { opacity: 0; } + 40% { opacity: 0; } + 50% { opacity: 1; } + 75% { opacity: 1; } + 76% { opacity: 0; } +} + +@-webkit-keyframes green-fade-in-out { + from { opacity: 0; } + 65% { opacity: 0; } + 75% { opacity: 1; } + 90% { opacity: 1; } + 100% { opacity: 0; } +} + +@keyframes green-fade-in-out { + from { opacity: 0; } + 65% { opacity: 0; } + 75% { opacity: 1; } + 90% { opacity: 1; } + 100% { opacity: 0; } +} + +/** + * Patch the gap that appear between the two adjacent div.circle-clipper while the + * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11). + */ +.gap-patch { + position: absolute; + top: 0; + left: 45%; + width: 10%; + height: 100%; + overflow: hidden; + border-color: inherit; +} + +.gap-patch .circle { + width: 1000%; + left: -450%; +} + +.circle-clipper { + display: inline-block; + position: relative; + width: 50%; + height: 100%; + overflow: hidden; + border-color: inherit; + + .circle { + width: 200%; + height: 100%; + border-width: 3px; /* STROKEWIDTH */ + border-style: solid; + border-color: inherit; + border-bottom-color: transparent !important; + border-radius: 50%; + -webkit-animation: none; + animation: none; + position: absolute; + top: 0; + right: 0; + bottom: 0; + } + + &.left .circle { + left: 0; + border-right-color: transparent !important; + -webkit-transform: rotate(129deg); + transform: rotate(129deg); + } + &.right .circle { + left: -100%; + border-left-color: transparent !important; + -webkit-transform: rotate(-129deg); + transform: rotate(-129deg); + } +} + + + +.active .circle-clipper.left .circle { + /* duration: ARCTIME */ + -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +.active .circle-clipper.right .circle { + /* duration: ARCTIME */ + -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; + animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both; +} + +@-webkit-keyframes left-spin { + from { -webkit-transform: rotate(130deg); } + 50% { -webkit-transform: rotate(-5deg); } + to { -webkit-transform: rotate(130deg); } +} + +@keyframes left-spin { + from { transform: rotate(130deg); } + 50% { transform: rotate(-5deg); } + to { transform: rotate(130deg); } +} + +@-webkit-keyframes right-spin { + from { -webkit-transform: rotate(-130deg); } + 50% { -webkit-transform: rotate(5deg); } + to { -webkit-transform: rotate(-130deg); } +} + +@keyframes right-spin { + from { transform: rotate(-130deg); } + 50% { transform: rotate(5deg); } + to { transform: rotate(-130deg); } +} + +#spinnerContainer.cooldown { + /* duration: SHRINK_TIME */ + -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); + animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1); +} + +@-webkit-keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +} + +@keyframes fade-out { + from { opacity: 1; } + to { opacity: 0; } +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_roboto.scss b/system/admin/static/editor/sass/components/_roboto.scss new file mode 100644 index 0000000..8bfdbd3 --- /dev/null +++ b/system/admin/static/editor/sass/components/_roboto.scss @@ -0,0 +1,38 @@ +@font-face { + font-family: "Roboto"; + src: url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"), + url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype"); + font-weight: 200; +} +@font-face { + font-family: "Roboto"; + src: url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Light.woff") format("woff"), + url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype"); + font-weight: 300; +} + +@font-face { + font-family: "Roboto"; + src: url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"), + url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype"); + font-weight: 400; +} + +@font-face { + font-family: "Roboto"; + src: url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"), + url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype"); + font-weight: 500; +} + +@font-face { + font-family: "Roboto"; + src: url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"), + url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"), + url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype"); + font-weight: 700; +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_sideNav.scss b/system/admin/static/editor/sass/components/_sideNav.scss new file mode 100644 index 0000000..98794a1 --- /dev/null +++ b/system/admin/static/editor/sass/components/_sideNav.scss @@ -0,0 +1,111 @@ +.side-nav { + position: fixed; + width: 240px; + left: -105%; + top: 0; + margin: 0; + height: 100%; + height: calc(100% + 60px); + height: -moz-calc(100%); //Temporary Firefox Fix + padding-bottom: 60px; + background-color: $sidenav-bg-color; + z-index: 999; + overflow-y: auto; + + @extend .z-depth-1; + will-change: left; + + // Right Align + &.right-aligned { + will-change: right; + right: -105%; + left: auto; + } + + .collapsible{ + margin: 0; + } + + + li { + float: none; + padding: 0 $sidenav-padding-right; + &:hover, &.active { background-color: #ddd; } + } + a { + color: #444; + display: block; + font-size: 1rem; + height: 64px; + line-height: 64px; + padding: 0 $sidenav-padding-right; + } +} + + +// Touch interaction +.drag-target { + height: 100%; + width: 10px; + position: fixed; + top: 0; + z-index: 998; +} + + +// Hidden side-nav for all sizes +.side-nav.fixed { + a { + display: block; + padding: 0 $sidenav-padding-right; + color: #444; + } +} + + +// Fixed side-nav shown +.side-nav.fixed { + left: 0; + position: fixed; + + // Right Align + &.right-aligned { + right: 0; + left: auto; + } +} + +// Fixed sideNav hide on smaller +@media #{$medium-and-down} { + .side-nav.fixed { + left: -105%; + + &.right-aligned { + right: -105%; + left: auto; + } + } +} + + +.side-nav .collapsible-body li.active, +.side-nav.fixed .collapsible-body li.active { + background-color: $primary-color; + a { + color: $sidenav-bg-color; + } +} + + +#sidenav-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + + height: 120vh; + background-color: rgba(0,0,0,.5); + z-index: 997; + + will-change: opacity; +} diff --git a/system/admin/static/editor/sass/components/_slider.scss b/system/admin/static/editor/sass/components/_slider.scss new file mode 100644 index 0000000..3d2071a --- /dev/null +++ b/system/admin/static/editor/sass/components/_slider.scss @@ -0,0 +1,92 @@ +.slider { + position: relative; + height: 400px; + width: 100%; + + // Fullscreen slider + &.fullscreen { + height: 100%; + width: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + ul.slides { + height: 100%; + } + + ul.indicators { + z-index: 2; + bottom: 30px; + } + } + + .slides { + background-color: $slider-bg-color; + margin: 0; + height: 400px; + + li { + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: inherit; + overflow: hidden; + + img { + height: 100%; + width: 100%; + background-size: cover; + background-position: center; + } + + .caption { + color: #fff; + position: absolute; + top: 15%; + left: 15%; + width: 70%; + opacity: 0; + + p { color: $slider-bg-color-light; } + } + + &.active { + z-index: 2; + } + } + } + + + .indicators { + position: absolute; + text-align: center; + left: 0; + right: 0; + bottom: 0; + margin: 0; + + .indicator-item { + display: inline-block; + position: relative; + cursor: pointer; + height: 16px; + width: 16px; + margin: 0 12px; + background-color: $slider-bg-color-light; + + @include transition(background-color .3s); + border-radius: 50%; + + &.active { + background-color: $slider-indicator-color; + } + } + } + +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/_table_of_contents.scss b/system/admin/static/editor/sass/components/_table_of_contents.scss new file mode 100644 index 0000000..2872bdb --- /dev/null +++ b/system/admin/static/editor/sass/components/_table_of_contents.scss @@ -0,0 +1,33 @@ +/*************** + Nav List +***************/ +.table-of-contents { + &.fixed { + position: fixed; + } + + li { + padding: 2px 0; + } + a { + display: inline-block; + font-weight: 300; + color: #757575; + padding-left: 20px; + height: 1.5rem; + line-height: 1.5rem; + letter-spacing: .4; + display: inline-block; + + &:hover { + color: lighten(#757575, 20%); + padding-left: 19px; + border-left: 1px solid lighten(color("materialize-red", "base"),10%); + } + &.active { + font-weight: 500; + padding-left: 18px; + border-left: 2px solid lighten(color("materialize-red", "base"),10%); + } + } +} diff --git a/system/admin/static/editor/sass/components/_tabs.scss b/system/admin/static/editor/sass/components/_tabs.scss new file mode 100644 index 0000000..dcf29e1 --- /dev/null +++ b/system/admin/static/editor/sass/components/_tabs.scss @@ -0,0 +1,47 @@ +.tabs { + position: relative; + height: 48px; + background-color: $tabs-bg-color; + margin: 0 auto; + width: 100%; + white-space: nowrap; + + .tab { + display: block; + float: left; + text-align: center; + line-height: 48px; + height: 48px; + padding: 0 20px; + margin: 0; + text-transform: uppercase; + letter-spacing: .8px; + width: 15%; + + a { + color: $tabs-text-color; + display: block; + width: 100%; + height: 100%; + @include transition( color .28s ease); + &:hover { + color: lighten($tabs-text-color, 20%); + } + } + + &.disabled a { + color: lighten($tabs-text-color, 20%); + cursor: default; + } + } + .indicator { + position: absolute; + bottom: 0; + height: 2px; + background-color: $tabs-underline-color; + will-change: left, right; + } +} + +.tabs .tab { padding: 0; } + diff --git a/system/admin/static/editor/sass/components/_toast.scss b/system/admin/static/editor/sass/components/_toast.scss new file mode 100644 index 0000000..87bd7dd --- /dev/null +++ b/system/admin/static/editor/sass/components/_toast.scss @@ -0,0 +1,63 @@ +#toast-container { + display:block; + position: fixed; + z-index: 1001; + + @media #{$small-and-down} { + min-width: 100%; + bottom: 0%; + } + @media #{$medium-only} { + min-width: 30%; + left: 5%; + bottom: 7%; + } + @media #{$large-and-up} { + min-width: 8%; + top: 10%; + right: 7%; + } +} + +.toast { + @extend .z-depth-1; + border-radius: 2px; + top: 0; + width: auto; + clear: both; + margin-top: 10px; + position: relative; + max-width:100%; + height: $toast-height; + line-height: $toast-height; + background-color: $toast-color; + padding: 0 25px; + font-size: 1.1rem; + font-weight: 300; + color: $toast-text-color; + + @include flexbox(); + @include align(center); + @include justify-content(space-between); + + .btn, .btn-flat { + margin: 0; + margin-left: 3rem; + } + + &.rounded{ + border-radius: 24px; + } + + @media #{$small-and-down} { + width:100%; + border-radius: 0; + } + @media #{$medium-only} { + float: left; + } + @media #{$large-and-up} { + float: right; + } + +} diff --git a/system/admin/static/editor/sass/components/_tooltip.scss b/system/admin/static/editor/sass/components/_tooltip.scss new file mode 100644 index 0000000..374ace9 --- /dev/null +++ b/system/admin/static/editor/sass/components/_tooltip.scss @@ -0,0 +1,34 @@ +.material-tooltip { + padding: 10px 8px; + font-size: 1rem; + z-index: 2000; + background-color: transparent; + border-radius: 2px; + color: #fff; + min-height: 36px; + line-height: 1rem; + // max-width: 350px; + opacity: 0; + display: none; + position: absolute; + text-align: center; + overflow: hidden; + left:0; + top:0; + + will-change: top, left; +} + +.backdrop { + position: absolute; + opacity: 0; + display: none; + height: 7px; + width: 14px; + border-radius: 0 0 14px 14px; + background-color: #323232; + z-index: -1; + @include transform-origin( 50% 10%); + + will-change: transform, opacity; +} diff --git a/system/admin/static/editor/sass/components/_typography.scss b/system/admin/static/editor/sass/components/_typography.scss new file mode 100644 index 0000000..3aec273 --- /dev/null +++ b/system/admin/static/editor/sass/components/_typography.scss @@ -0,0 +1,58 @@ +a { + text-decoration: none; +} + +html{ + line-height: 1.5; + + @media only screen and (min-width: 0) { + font-size: 14px; + } + + @media only screen and (min-width: $medium-screen) { + font-size: 14.5px; + } + + @media only screen and (min-width: $large-screen) { + font-size: 15px; + } + + font-family: "Roboto", sans-serif; + font-weight: normal; + color: $off-black; +} +h1, h2, h3, h4, h5, h6 { + font-weight: 400; + line-height: 1.1; +} + +// Header Styles +h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } +h1 { font-size: $h1-fontsize; line-height: 110%; margin: ($h1-fontsize / 2) 0 ($h1-fontsize / 2.5) 0;} +h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 2) 0 ($h2-fontsize / 2.5) 0;} +h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 2) 0 ($h3-fontsize / 2.5) 0;} +h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 2) 0 ($h4-fontsize / 2.5) 0;} +h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 2) 0 ($h5-fontsize / 2.5) 0;} +h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 2) 0 ($h6-fontsize / 2.5) 0;} + +// Text Styles +em { font-style: italic; } +strong { font-weight: 500; } +small { font-size: 75%; } +.light { font-weight: 300; } +.thin { font-weight: 200; } + +.flow-text{ + font-weight: 300; + $i: 0; + @while $i <= $intervals { + @media only screen and (min-width : 360 + ($i * $interval-size)) { + font-size: 1.2rem * (1 + (.02 * $i)); + } + $i: $i + 1; + } + // Handle below 360px screen + @media only screen and (max-width: 360px) { + font-size: 1.2rem; + } +} diff --git a/system/admin/static/editor/sass/components/_variables.scss b/system/admin/static/editor/sass/components/_variables.scss new file mode 100644 index 0000000..833d49f --- /dev/null +++ b/system/admin/static/editor/sass/components/_variables.scss @@ -0,0 +1,152 @@ +/*** Colors ***/ +$primary-color: color("materialize-red", "lighten-2") !default; +$primary-color-light: lighten($primary-color, 15%) !default; +$primary-color-dark: darken($primary-color, 15%) !default; + +$secondary-color: color("teal", "lighten-1") !default; +$success-color: color("green", "base") !default; +$error-color: color("red", "base") !default; +$link-color: color("light-blue", "darken-1") !default; + +/*** Badges ***/ +$badge-bg-color: $secondary-color !default; + +/*** Buttons ***/ +$button-bg-color-disabled: #DFDFDF !default; +$button-color: $secondary-color !default; +$button-color-disabled: #9F9F9F !default; +$button-color-flat: #343434 !default; +$button-color-raised: #fff !default; +$button-floating-size: 37px !default; +$button-height: 36px !default; +$button-font-size-shared: 1.3rem !default; +$button-large-icon-font-size: 1.6rem !default; +$button-line-height: 36px !default; + +/*** Cards ***/ +$card-padding: 20px !default; +$card-bg-color: #fff !default; +$card-link-color: color("orange", "accent-2") !default; +$card-link-color-light: lighten($card-link-color, 20%) !default; + +/*** Collapsible ***/ +$collapsible-height: 3rem !default; +$collapsible-header-color: #fff !default; +$collapsible-border-color: #ddd !default; + +/*** Dropdown ***/ +$dropdown-bg-color: #fff !default; +$dropdown-hover-bg-color: #eee !default; +$dropdown-color: $secondary-color !default; + +/*** Fonts ***/ +$roboto-font-path: "../font/roboto/" !default; +$icons-font-path: "../font/material-design-icons/" !default; + +/*** Forms ***/ +// Text Inputs + Textarea +$input-border-color: color("grey", "base") !default; +$input-bg-color: #fff !default; +$input-error-color: $error-color !default; +$input-success-color: $success-color !default; +$input-focus-color: $secondary-color !default; +$label-font-size: .8rem !default; +$input-disabled-color: rgba(0,0,0, .26) !default; +$input-disabled-solid-color: #BDBDBD !default; + +// Radio Buttons +$radio-fill-color: $secondary-color !default; +$radio-empty-color: #5a5a5a !default; + +// Switches +$switch-bg-color: $secondary-color !default; +$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default; +$switch-unchecked-bg: #F1F1F1 !default; +$switch-unchecked-lever-bg: #818181 !default; + +// Date Picker +$datepicker-weekday-bg: darken($secondary_color, 7%) !default; +$datepicker-date-bg: $secondary_color !default; +$datepicker-year: rgba(255, 255, 255, .4) !default; +$datepicker-focus: rgba(0,0,0, .05) !default; +$datepicker-selected: $secondary-color !default; +$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default; + + +/*** Global ***/ +// Media Query Ranges +$small-screen-up: 601px !default; +$medium-screen-up: 993px !default; +$large-screen-up: 1201px !default; +$small-screen: 600px !default; +$medium-screen: 992px !default; +$large-screen: 1200px !default; + +$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default; +$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default; +$small-and-down: "only screen and (max-width : #{$small-screen})" !default; +$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default; +$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default; + +// Grid Variables +$num-cols: 12 !default; +$gutter-width: 1.5rem !default; +$element-top-margin: $gutter-width/3 !default; +$element-bottom-margin: ($gutter-width*2)/3 !default; + +/*** Navbar ***/ +$navbar-height: 64px !default; +$navbar-height-mobile: 56px !default; +$navbar-font-color: #fff !default; +$navbar-brand-font-size: 2.1rem !default; + +/*** SideNav ***/ +$sidenav-bg-color: #fff !default; +$sidenav-padding-right: 15px !default; + +/*** Photo Slider ***/ +$slider-bg-color: color('grey', 'base') !default; +$slider-bg-color-light: color('grey', 'lighten-2') !default; +$slider-indicator-color: color('green', 'base') !default; + +/*** Tabs ***/ +$tabs-underline-color: $primary-color-light !default; +$tabs-text-color: $primary-color !default; +$tabs-bg-color: #fff !default; + +/*** Tables ***/ +$table-border-color: #d0d0d0 !default; +$table-striped-color: #f2f2f2 !default; + +/*** Toasts ***/ +$toast-height: 48px !default; +$toast-color: #323232 !default; +$toast-text-color: #fff !default; + +/*** Typography ***/ +$off-black: rgba(0, 0, 0, 0.87) !default; +// Header Styles +$h1-fontsize: 4.2rem !default; +$h2-fontsize: 3.56rem !default; +$h3-fontsize: 2.92rem !default; +$h4-fontsize: 2.28rem !default; +$h5-fontsize: 1.64rem !default; +$h6-fontsize: 1rem !default; + +// Footer +$footer-bg-color: $primary-color !default; + +// Flowtext +$range : $large-screen - $small-screen !default; +$intervals: 20 !default; +$interval-size: $range / $intervals !default; + +/*** Collections ***/ +$collection-border-color: #e0e0e0 !default; +$collection-bg-color: #fff !default; +$collection-active-bg-color: $secondary-color !default; +$collection-active-color: lighten($secondary-color, 55%) !default; +$collection-hover-bg-color: #ddd !default; + +/* Progress Bar */ +$progress-bar-color: $secondary-color !default; diff --git a/system/admin/static/editor/sass/components/_waves.scss b/system/admin/static/editor/sass/components/_waves.scss new file mode 100644 index 0000000..7a8e8c0 --- /dev/null +++ b/system/admin/static/editor/sass/components/_waves.scss @@ -0,0 +1,167 @@ + +/*! + * Waves v0.6.0 + * http://fian.my.id/Waves + * + * Copyright 2014 Alfiana E. Sibuea and other contributors + * Released under the MIT license + * https://github.com/fians/Waves/blob/master/LICENSE + */ + + +.waves-effect { + position: relative; + cursor: pointer; + display: inline-block; + overflow: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: transparent; + // white-space: nowrap; + // outline: 0; + + vertical-align: middle; + // cursor: pointer; + // border: none; + // outline: none; + // color: inherit; + // background-color: rgba(0, 0, 0, 0); + // font-size: 1em; + // line-height:1em; + // text-align: center; + // text-decoration: none; + z-index: 1; + will-change: opacity, transform; + @include transition(all .3s ease-out); + + .waves-ripple { + position: absolute; + border-radius: 50%; + width: 20px; + height: 20px; + margin-top:-10px; + margin-left:-10px; + opacity: 0; + + background: rgba(0,0,0,0.2); + // $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%; + // background: -webkit-radial-gradient($gradient); + // background: -o-radial-gradient($gradient); + // background: -moz-radial-gradient($gradient); + // background: radial-gradient($gradient); + @include transition(all 0.7s ease-out); + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; + -o-transition-property: -o-transform, opacity; + transition-property: transform, opacity; + @include transform(scale(0)); + pointer-events: none; + } + + // Waves Colors + &.waves-light .waves-ripple { + background-color: rgba(255, 255, 255, 0.45); + } + + &.waves-red .waves-ripple { + background-color: rgba(244, 67, 54, .70); + } + &.waves-yellow .waves-ripple { + background-color: rgba(255, 235, 59, .70); + } + &.waves-orange .waves-ripple { + background-color: rgba(255, 152, 0, .70); + } + &.waves-purple .waves-ripple { + background-color: rgba(156, 39, 176, 0.70); + } + &.waves-green .waves-ripple { + background-color: rgba(76, 175, 80, 0.70); + } + &.waves-teal .waves-ripple { + background-color: rgba(0, 150, 136, 0.70); + } + +} + +.waves-notransition { + @include transition(none #{"!important"}); +} + +.waves-circle { + @include transform(translateZ(0)); + -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); +} + +// .waves-button, +// .waves-button:hover, +// .waves-button:visited, +// .waves-button-input { +// white-space: nowrap; +// vertical-align: middle; +// cursor: pointer; +// border: none; +// outline: none; +// color: inherit; +// background-color: rgba(0, 0, 0, 0); +// font-size: 1em; +// line-height:1em; +// text-align: center; +// text-decoration: none; +// z-index: 1; +// } + +// .waves-button { +// padding: 0.85em 1.1em; +// border-radius: 0.2em; +// } + +// .waves-button-input { +// margin: 0; +// padding: 0.85em 1.1em; +// } + +.waves-input-wrapper { + border-radius: 0.2em; + vertical-align: bottom; + + // &.waves-button { + // padding: 0; + // } + + .waves-button-input { + position: relative; + top: 0; + left: 0; + z-index: 1; + } +} + +.waves-circle { + text-align: center; + width: 2.5em; + height: 2.5em; + line-height: 2.5em; + border-radius: 50%; + -webkit-mask-image: none; +} + +// .waves-float { + // -webkit-mask-image: none; + // @include box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12)); + + // &:active { + // @include box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30)); +// } +// } + +.waves-block { + display: block; +} + +/* Firefox Bug: link not triggered */ +a.waves-effect .waves-ripple { + z-index: -1; +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/date_picker/_default.date.scss b/system/admin/static/editor/sass/components/date_picker/_default.date.scss new file mode 100644 index 0000000..1cd0f93 --- /dev/null +++ b/system/admin/static/editor/sass/components/date_picker/_default.date.scss @@ -0,0 +1,435 @@ +/* ========================================================================== + $BASE-DATE-PICKER + ========================================================================== */ +/** + * The picker box. + */ +.picker__box { + padding: 0 1em; +} +/** + * The header containing the month and year stuff. + */ +.picker__header { + text-align: center; + position: relative; + margin-top: .75em; +} +/** + * The month and year labels. + */ +.picker__month, +.picker__year { +// font-weight: 500; + display: inline-block; + margin-left: .25em; + margin-right: .25em; +} +/** + * The month and year selectors. + */ +.picker__select--month, +.picker__select--year { + + height: 2em; + padding: 0; + margin-left: .25em; + margin-right: .25em; +} + +// Modified +.picker__select--month.browser-default { + display: inline; + background-color: #FFFFFF; + width: 40%; +} +.picker__select--year.browser-default { + display: inline; + background-color: #FFFFFF; + width: 25%; +} +.picker__select--month:focus, +.picker__select--year:focus { + border-color: $datepicker-focus; +} +/** + * The month navigation buttons. + */ +.picker__nav--prev, +.picker__nav--next { + position: absolute; + padding: .5em 1.25em; + width: 1em; + height: 1em; + box-sizing: content-box; + top: -0.25em; +} +//@media (min-width: 24.5em) { +// .picker__nav--prev, +// .picker__nav--next { +// top: -0.33em; +// } +//} +.picker__nav--prev { + left: -1em; + padding-right: 1.25em; +} +//@media (min-width: 24.5em) { +// .picker__nav--prev { +// padding-right: 1.5em; +// } +//} +.picker__nav--next { + right: -1em; + padding-left: 1.25em; +} +//@media (min-width: 24.5em) { +// .picker__nav--next { +// padding-left: 1.5em; +// } +//} + +.picker__nav--disabled, +.picker__nav--disabled:hover, +.picker__nav--disabled:before, +.picker__nav--disabled:before:hover { + cursor: default; + background: none; + border-right-color: #f5f5f5; + border-left-color: #f5f5f5; +} +/** + * The calendar table of dates + */ +.picker__table { + text-align: center; + border-collapse: collapse; + border-spacing: 0; + table-layout: fixed; + font-size: 1rem; + width: 100%; + margin-top: .75em; + margin-bottom: .5em; +} + + + +.picker__table th, .picker__table td { + text-align: center; +} + + + + + + +.picker__table td { + margin: 0; + padding: 0; +} +/** + * The weekday labels + */ +.picker__weekday { + width: 14.285714286%; + font-size: .75em; + padding-bottom: .25em; + color: #999999; + font-weight: 500; + /* Increase the spacing a tad */ +} +@media (min-height: 33.875em) { + .picker__weekday { + padding-bottom: .5em; + } +} +/** + * The days on the calendar + */ + +.picker__day--today { + position: relative; + color: #595959; + letter-spacing: -.3; + padding: .75rem 0; + font-weight: 400; + border: 1px solid transparent; + +} + +//.picker__day--today:before { +// content: " "; +// position: absolute; +// top: 2px; +// right: 2px; +// width: 0; +// height: 0; +// border-top: 0.5em solid #0059bc; +// border-left: .5em solid transparent; +//} +.picker__day--disabled:before { + border-top-color: #aaaaaa; +} + + +.picker__day--infocus:hover{ + cursor: pointer; + color: #000; + font-weight: 500; +} + +.picker__day--outfocus { + display: none; + padding: .75rem 0; + color: #fff; + +} +.picker__day--outfocus:hover { + cursor: pointer; + color: #dddddd; +// background: #b1dcfb; + font-weight: 500; +} + + +.picker__day--highlighted { +// border-color: #0089ec; +} +.picker__day--highlighted:hover, +.picker--focused .picker__day--highlighted { + cursor: pointer; +// color: #000000; +// background: #b1dcfb; +// font-weight: 500; +} +.picker__day--selected, +.picker__day--selected:hover, +.picker--focused .picker__day--selected { + + +// Circle background + border-radius: 50%; + @include transform(scale(.75)); + background: #0089ec; + color: #ffffff; +} +.picker__day--disabled, +.picker__day--disabled:hover, +.picker--focused .picker__day--disabled { + background: #f5f5f5; + border-color: #f5f5f5; + color: #dddddd; + cursor: default; +} +.picker__day--highlighted.picker__day--disabled, +.picker__day--highlighted.picker__day--disabled:hover { + background: #bbbbbb; +} +/** + * The footer containing the "today", "clear", and "close" buttons. + */ +.picker__footer { + text-align: center; + display: flex; + align-items: center; + justify-content: space-between; +} +.picker__button--today, +.picker__button--clear, +.picker__button--close { + border: 1px solid #ffffff; + background: #ffffff; + font-size: .8em; + padding: .66em 0; + font-weight: bold; + width: 33%; + display: inline-block; + vertical-align: bottom; +} +.picker__button--today:hover, +.picker__button--clear:hover, +.picker__button--close:hover { + cursor: pointer; + color: #000000; + background: #b1dcfb; + border-bottom-color: #b1dcfb; +} +.picker__button--today:focus, +.picker__button--clear:focus, +.picker__button--close:focus { + background: #b1dcfb; + border-color: $datepicker-focus; + outline: none; +} +.picker__button--today:before, +.picker__button--clear:before, +.picker__button--close:before { + position: relative; + display: inline-block; + height: 0; +} +.picker__button--today:before, +.picker__button--clear:before { + content: " "; + margin-right: .45em; +} +.picker__button--today:before { + top: -0.05em; + width: 0; + border-top: 0.66em solid #0059bc; + border-left: .66em solid transparent; +} +.picker__button--clear:before { + top: -0.25em; + width: .66em; + border-top: 3px solid #ee2200; +} +.picker__button--close:before { + content: "\D7"; + top: -0.1em; + vertical-align: top; + font-size: 1.1em; + margin-right: .35em; + color: #777777; +} +.picker__button--today[disabled], +.picker__button--today[disabled]:hover { + background: #f5f5f5; + border-color: #f5f5f5; + color: #dddddd; + cursor: default; +} +.picker__button--today[disabled]:before { + border-top-color: #aaaaaa; +} + +/* ========================================================================== + CUSTOM MATERIALIZE STYLES + ========================================================================== */ +.picker__box { + border-radius: 2px; + overflow: hidden; +} + +.picker__date-display { + text-align: center; + background-color: $datepicker-date-bg; + color: #fff; + padding-bottom: 15px; + font-weight: 300; +} + +.picker__nav--prev:hover, +.picker__nav--next:hover { + cursor: pointer; + color: #000000; + background: $datepicker-selected-outfocus; +} + +.picker__weekday-display { + background-color: $datepicker-weekday-bg; + padding: 10px; + font-weight: 200; + letter-spacing: .5; + font-size: 1rem; + margin-bottom: 15px; +} + +.picker__month-display { + text-transform: uppercase; + font-size: 2rem; +} +.picker__day-display { + + font-size: 4.5rem; + font-weight: 400; +} +.picker__year-display { + font-size: 1.8rem; + color: $datepicker-year; +} + +.picker__box { + padding: 0; +} +.picker__calendar-container { + padding: 0 1rem; + + thead { + border: none; + } +} + +// Calendar +.picker__table { + margin-top: 0; + margin-bottom: .5em; +} + +.picker__day--infocus { + color: #595959; + letter-spacing: -.3; + padding: .75rem 0; + font-weight: 400; + border: 1px solid transparent; +} + +//Today style +.picker__day.picker__day--today { + color: $datepicker-selected; +} + +.picker__day.picker__day--today.picker__day--selected { + color: #fff; +} + +// Table Header +.picker__weekday { + font-size: .9rem; +} + + +.picker__day--selected, +.picker__day--selected:hover, +.picker--focused .picker__day--selected { + // Circle background + border-radius: 50%; + @include transform(scale(.9)); + background-color: $datepicker-selected; + &.picker__day--outfocus { + background-color: $datepicker-selected-outfocus; + } + color: #ffffff; +} + +.picker__footer { + text-align: right; + padding: 5px 10px; +} + +// Materialize modified +.picker__close, .picker__today { + font-size: 1.1rem; + padding: 0 1rem; + color: $datepicker-selected; +} + +//month nav buttons +.picker__nav--prev:before, +.picker__nav--next:before { + content: " "; + border-top: .5em solid transparent; + border-bottom: .5em solid transparent; + border-right: 0.75em solid #676767; + width: 0; + height: 0; + display: block; + margin: 0 auto; +} +.picker__nav--next:before { + border-right: 0; + border-left: 0.75em solid #676767; +} +button.picker__today:focus, button.picker__clear:focus, button.picker__close:focus { + background-color: $datepicker-selected-outfocus; +} diff --git a/system/admin/static/editor/sass/components/date_picker/_default.scss b/system/admin/static/editor/sass/components/date_picker/_default.scss new file mode 100644 index 0000000..d96395f --- /dev/null +++ b/system/admin/static/editor/sass/components/date_picker/_default.scss @@ -0,0 +1,201 @@ +/* ========================================================================== + $BASE-PICKER + ========================================================================== */ +/** + * Note: the root picker element should *NOT* be styled more than what's here. + */ +.picker { + font-size: 16px; + text-align: left; + line-height: 1.2; + color: #000000; + position: absolute; + z-index: 10000; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +/** + * The picker input element. + */ +.picker__input { + cursor: default; +} +/** + * When the picker is opened, the input element is "activated". + */ +.picker__input.picker__input--active { + border-color: #0089ec; +} +/** + * The holder is the only "scrollable" top-level container element. + */ +.picker__holder { + width: 100%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} + +/*! + * Default mobile-first, responsive styling for pickadate.js + * Demo: http://amsul.github.io/pickadate.js + */ +/** + * Note: the root picker element should *NOT* be styled more than what's here. + */ +/** + * Make the holder and frame fullscreen. + */ +.picker__holder, +.picker__frame { + bottom: 0; + left: 0; + right: 0; + top: 100%; +} +/** + * The holder should overlay the entire screen. + */ +.picker__holder { + position: fixed; + -webkit-transition: background 0.15s ease-out, top 0s 0.15s; + -moz-transition: background 0.15s ease-out, top 0s 0.15s; + transition: background 0.15s ease-out, top 0s 0.15s; + -webkit-backface-visibility: hidden; +} +/** + * The frame that bounds the box contents of the picker. + */ +.picker__frame { + position: absolute; + margin: 0 auto; + min-width: 256px; + +// picker width + width: 300px; + max-height: 350px; + + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -moz-opacity: 0; + opacity: 0; + -webkit-transition: all 0.15s ease-out; + -moz-transition: all 0.15s ease-out; + transition: all 0.15s ease-out; +} +@media (min-height: 28.875em) { + .picker__frame { + overflow: visible; + top: auto; + bottom: -100%; + max-height: 80%; + } +} +@media (min-height: 40.125em) { + .picker__frame { + margin-bottom: 7.5%; + } +} +/** + * The wrapper sets the stage to vertically align the box contents. + */ +.picker__wrap { + display: table; + width: 100%; + height: 100%; +} +@media (min-height: 28.875em) { + .picker__wrap { + display: block; + } +} +/** + * The box contains all the picker contents. + */ +.picker__box { + background: #ffffff; + display: table-cell; + vertical-align: middle; +} +//@media (min-height: 26.5em) { +// .picker__box { +//// font-size: 1.25em; +// } +//} +@media (min-height: 28.875em) { + .picker__box { + display: block; + +// picker header font-size +// font-size: 1rem; + + border: 1px solid #777777; + border-top-color: #898989; + border-bottom-width: 0; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; + -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24); + -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24); + box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24); + } +} +//@media (min-height: 40.125em) { +// .picker__box { +// font-size: 1.1rem; +// border-bottom-width: 1px; +// -webkit-border-radius: 5px; +// -moz-border-radius: 5px; +// border-radius: 5px; +// } +//} +/** + * When the picker opens... + */ +.picker--opened .picker__holder { + top: 0; + background: transparent; + -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)"; + zoom: 1; + background: rgba(0, 0, 0, 0.32); + -webkit-transition: background 0.15s ease-out; + -moz-transition: background 0.15s ease-out; + transition: background 0.15s ease-out; +} +.picker--opened .picker__frame { + top: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + filter: alpha(opacity=100); + -moz-opacity: 1; + opacity: 1; +} +@media (min-height: 35.875em) { + .picker--opened .picker__frame { + top: 10%; + bottom: 20%auto; + } +} +/** + * For `large` screens, transform into an inline picker. + */ + +/* ========================================================================== + CUSTOM MATERIALIZE STYLES + ========================================================================== */ + +.picker__input.picker__input--active { + border-color: color("blue", "lighten-5"); +} + +.picker__frame { + margin: 0 auto; + max-width: 325px; +} + +@media (min-height: 38.875em) { + .picker--opened .picker__frame { + top: 10%; + bottom: auto; + } +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/components/date_picker/_default.time.scss b/system/admin/static/editor/sass/components/date_picker/_default.time.scss new file mode 100644 index 0000000..0b159c8 --- /dev/null +++ b/system/admin/static/editor/sass/components/date_picker/_default.time.scss @@ -0,0 +1,125 @@ +/* ========================================================================== + $BASE-TIME-PICKER + ========================================================================== */ +/** + * The list of times. + */ +.picker__list { + list-style: none; + padding: 0.75em 0 4.2em; + margin: 0; +} +/** + * The times on the clock. + */ +.picker__list-item { + border-bottom: 1px solid #dddddd; + border-top: 1px solid #dddddd; + margin-bottom: -1px; + position: relative; + background: #ffffff; + padding: .75em 1.25em; +} +@media (min-height: 46.75em) { + .picker__list-item { + padding: .5em 1em; + } +} +/* Hovered time */ +.picker__list-item:hover { + cursor: pointer; + color: #000000; + background: #b1dcfb; + border-color: #0089ec; + z-index: 10; +} +/* Highlighted and hovered/focused time */ +.picker__list-item--highlighted { + border-color: #0089ec; + z-index: 10; +} +.picker__list-item--highlighted:hover, +.picker--focused .picker__list-item--highlighted { + cursor: pointer; + color: #000000; + background: #b1dcfb; +} +/* Selected and hovered/focused time */ +.picker__list-item--selected, +.picker__list-item--selected:hover, +.picker--focused .picker__list-item--selected { + background: #0089ec; + color: #ffffff; + z-index: 10; +} +/* Disabled time */ +.picker__list-item--disabled, +.picker__list-item--disabled:hover, +.picker--focused .picker__list-item--disabled { + background: #f5f5f5; + border-color: #f5f5f5; + color: #dddddd; + cursor: default; + border-color: #dddddd; + z-index: auto; +} +/** + * The clear button + */ +.picker--time .picker__button--clear { + display: block; + width: 80%; + margin: 1em auto 0; + padding: 1em 1.25em; + background: none; + border: 0; + font-weight: 500; + font-size: .67em; + text-align: center; + text-transform: uppercase; + color: #666; +} +.picker--time .picker__button--clear:hover, +.picker--time .picker__button--clear:focus { + color: #000000; + background: #b1dcfb; + background: #ee2200; + border-color: #ee2200; + cursor: pointer; + color: #ffffff; + outline: none; +} +.picker--time .picker__button--clear:before { + top: -0.25em; + color: #666; + font-size: 1.25em; + font-weight: bold; +} +.picker--time .picker__button--clear:hover:before, +.picker--time .picker__button--clear:focus:before { + color: #ffffff; +} + +/* ========================================================================== + $DEFAULT-TIME-PICKER + ========================================================================== */ +/** + * The frame the bounds the time picker. + */ +.picker--time .picker__frame { + min-width: 256px; + max-width: 320px; +} +/** + * The picker box. + */ +.picker--time .picker__box { + font-size: 1em; + background: #f2f2f2; + padding: 0; +} +@media (min-height: 40.125em) { + .picker--time .picker__box { + margin-bottom: 5em; + } +} diff --git a/system/admin/static/editor/sass/materialNote.scss b/system/admin/static/editor/sass/materialNote.scss new file mode 100644 index 0000000..5faca9e --- /dev/null +++ b/system/admin/static/editor/sass/materialNote.scss @@ -0,0 +1,734 @@ +@import "components/color"; +@import "components/variables"; + +/* variables +=================================================================================*/ +$toolbarColor: color("grey", "lighten-2") !default; +$toolbarTextColor: color("grey", "darken-3") !default; + +$borderColor: color("grey", "base") !default; + +$firstButtonColor: color("grey", "lighten-2") !default; +$firstButtonHoverColor: color("grey", "base") !default; +$secondButtonColor: color("blue", "darken-4") !default; +$secondButtonHoverColor: color("blue", "base") !default; +$thirdButtonColor: color("red", "darken-4") !default; +$thirdButtonHoverColor: color("blue", "base") !default; + +$firstFocusColor: color("blue", "base") !default; +$secondFocusColor: color("grey", "base") !default; + +$selectionColor: color("grey", "darken-1") !default; + +$helpBackgroundColor: color("grey", "lighten-2") !default; + +// base unit for table dimension picker +$gridUnit: 26px; + + +.editorDialogs .modal, .note-editor .modal { + background-color: lighten($toolbarColor, 100%); + color: $toolbarTextColor; + z-index: 1057 !important; + backface-visibility: hidden; + + .input-field input:not([readonly]), .input-field input.datepicker { + border-color: $toolbarTextColor !important; + } + .input-field input:focus:not([readonly]), .input-field input.datepicker:focus, textarea.materialize-textarea:focus:not([readonly]) { + box-shadow: 0 1px 0 0 $firstFocusColor !important; + border-color: $firstFocusColor !important; + } + label, .input-field input:not([readonly]) + label, .input-field input.datepicker + label, .input-field .prefix, .note-editor + label { + color: $toolbarTextColor !important; + } + .input-field input:focus:not([readonly]) + label, .input-field input.datepicker:focus + label, .input-field .prefix.active, textarea.materialize-textarea:focus:not([readonly]) + label { + color: $firstFocusColor !important; + } + + .btn { + background-color: $secondButtonColor; + color: lighten($toolbarTextColor, 100%) !important; + } + .btn:hover { + background-color: lighten($secondButtonColor, 10%) !important; + } + + .btn.disabled { + background-color: darken($secondButtonColor, 15%) !important; + } + + .modal-footer { + background-color: darken($toolbarColor, 10%); + + .btnClose { + margin-right: 15px; + background-color: $thirdButtonColor; + } + + .btnClose:hover { + background-color: lighten($thirdButtonColor, 10%) !important; + } + } + + .canvasContainerEmpty { + border: solid 5px $firstFocusColor; + } +} + +//scrollbars +.note-editor .note-editable, .editorDialogs .modal-content, .note-editor .note-color-palette, .note-editor .note-codable, .modal.modal-fixed-footer .modal-content { + &::-webkit-scrollbar { + width: 17px !important; + } + &::-webkit-scrollbar-track { + background-color: $toolbarColor !important; + } + &::-webkit-scrollbar-thumb { + background-color: lighten($toolbarColor, 20%) !important; + } + &::-webkit-scrollbar-thumb:hover { + background-color: lighten($toolbarColor, 30%) !important; + } +} + +.note-editor { + position: relative; + border: { + left: 1px solid $toolbarColor; + bottom: 1px solid $toolbarColor; + right: 1px solid $toolbarColor; + } + + .img-circle { + border-radius: 50%; + } + + .img-rounded { + border-radius: 5%; + } + + .img-thumbnail { + border: solid 2px $toolbarColor; + height: 200px; + } + + .img-bordered { + border: solid 5px $toolbarColor; + } + + .btn:hover { + background-color: lighten($firstButtonColor, 10%) !important; + } + + .btn.active { + background-color: $firstFocusColor; + } + + .note-editable { + ul li { + list-style-type: square !important; + display: list-item; + list-style-position: inside; + } + } + + .note-dialog { + & > div { + display: none + } + .form-group { + margin-right: 0; + margin-left: 0 + } + .note-modal-form { + margin: 0 + } + .note-image-dialog .note-dropzone { + min-height: 100px; + margin-bottom: 10px; + font-size: 30px; + line-height: 4; + color: lightgray; + text-align: center; + border: 4px dashed lightgray + } + } + + .transparent { + opacity: 0; + } + + .note-resizebar { + background-color: $toolbarColor; + width: 100%; + height: 13px; + cursor: ns-resize; + padding-top: 1px; + + .note-icon-bar { + width: 20px; + margin: 2px auto; + border-top: 2px solid lighten($toolbarColor, 20%); + } + } + + .note-toolbar { + position: relative; + color: $toolbarTextColor; + background-color: $toolbarColor; + margin: 0; + z-index: 1052; + + ul { + padding: 0; + } + + .btn.disabled, button.disabled { + display: none; + } + + .dropdown { + cursor: pointer; + } + + .note-current-fontname { + min-width: 134px; + display: inline-block; + text-align: left; + } + } + + .note-handle { + .note-control-selection { + position: absolute; + display: none; + border: 2px solid $firstButtonColor; + + .note-control-selection-bg { + width: 100%; + height: 100%; + z-index: 3; + background-color: transparentize($selectionColor, 0.7); + } + + & > div { + position: absolute + } + .note-control-handle { + width: 7px; + height: 7px; + border: 1px solid black; + } + .note-control-holder { + width: 7px; + height: 7px; + border: 1px solid black; + } + .note-control-sizing { + width: 15px; + height: 15px; + background-color: $firstButtonColor; + z-index: 5; + cursor: se-resize; + } + .note-control-nw { + top: -5px; + left: -5px; + border-right: 0; + border-bottom: 0; + } + .note-control-ne { + top: -5px; + right: -5px; + border-bottom: 0; + border-left: none; + } + .note-control-sw { + bottom: -5px; + left: -5px; + border-top: 0; + border-right: 0; + } + .note-control-se { + right: -5px; + bottom: -5px; + } + .note-control-selection-info { + right: 0; + bottom: 0; + padding: 5px; + margin: 17px; + font-size: 15px; + color: $toolbarTextColor; + background-color: $firstButtonColor; + z-index: 5; + } + } + } +} + +.note-dialog .note-help-dialog { + color: $toolbarColor; + + h4 { + color: $toolbarTextColor; + } + + thead { + background-color: $firstFocusColor; + } + + tbody { + background-color: $helpBackgroundColor; + } +} + +.note-editor, .popover { + .btn-group { + display: inline-block; + margin-right: 10px; + position: relative; + + ul { + padding: 0; + } + + .closeLeft { + padding-right: 0 !important; + margin-right: 0 !important; + + i { + margin-right: 0 !important; + } + } + + i.left { + margin-right: 5px; + } + } + + .note-toolbar .btn { + border-radius: 0 !important; + box-shadow: none !important; + padding: 0 9px !important; + background-color: $firstButtonColor; + } + + .btnSecond { + background-color: $secondButtonColor !important; + } + + .btnThird { + background-color: $thirdButtonColor !important; + } + + note-toolbar button, button, .note-toolbar .btn { + background-color: $firstButtonColor; + border: none; + height: 36px; + text-transform: uppercase; + color: $toolbarTextColor !important; + } + + [type="checkbox"]:checked + label:before, [type="checkbox"]:checked + label:before { + border-right-color: $secondButtonColor !important; + border-bottom-color: $secondButtonColor !important; + } + + .note-palette-title { + padding: 0 !important; + } + + .colorName { + display: inline-block; + color: $toolbarTextColor; + + @media #{$small-and-down} { + display: none; + } + } + + .note-color-palette { + line-height: 10px; + border: solid 3px $toolbarColor; + padding: 0 !important; + overflow-x: scroll; + overflow-y: hidden; + + .note-color-row { + padding: 0 !important; + min-width: 300px; + } + + button.note-color-btn { + width: 20px; + height: 20px; + padding: 0; + margin: 0; + } + + .note-color-btn:hover { + &:after { + position: absolute; + width: 30px; + height: 30px; + content: ""; + background-color: inherit; + margin-top: -15px; + margin-left: -15px; + } + } + } + + .note-dimension-picker { + overflow: hidden; + } + + .largeDropdown { + width: 290px; + } + + .dropdown-menu { + z-index: 1033; + + &.note-check { + min-width: 80px; + } + + label { + color: $toolbarTextColor !important; + } + } + + ul.dropdown-menu { + position: absolute; + top: 20px; + background-color: lighten($toolbarColor, 10%); + border: { + left: 3px solid $toolbarColor; + bottom: 3px solid $toolbarColor; + right: 3px solid $toolbarColor; + } + + &#colors { + width: 342px; + + .indicator { + width: 50%; + left: 0; + } + } + + .colorTable { + padding: 3px 0; + } + + .tabs { + background-color: $toolbarColor; + + &:hover { + background-color: $toolbarColor; + } + + .tab a, .tab a:hover { + color: $secondFocusColor; + } + + .indicator { + background-color: $secondFocusColor; + } + } + + li { + list-style-type: none; + padding: 0 !important; + + div { + padding: 3px 15px; + cursor: pointer; + } + } + } +} + +.note-popover .popover { + position: absolute; + max-width: none; + color: $toolbarTextColor; + + .arrow { + width: 0; + height: 0; + border-style: solid; + border-width: 0 10px 10px 10px; + border-color: transparent transparent $firstButtonColor transparent; + } + + .popover-content { + background-color: $firstButtonColor; + + & > a { + margin-left: 12px; + } + + a { + display: inline-block; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: middle + } + + .arrow { + left: 20px + } + + .btn-group { + display: inline-block; + + .btn { + border-radius: 0 !important; + box-shadow: none !important; + padding: 0 9px !important; + background-color: $firstButtonColor; + color: $toolbarTextColor !important; + } + } + } +} + +.note-popover .popover .popover-content .note-para .dropdown-menu, .note-toolbar .note-para .dropdown-menu { + min-width: 172px; + padding: 5px +} +.note-popover .popover .popover-content .note-para .dropdown-menu > div:first-child, .note-toolbar .note-para .dropdown-menu > div:first-child { + margin-right: 5px +} + + + + + + + +// the following is unchanged from original summernote css +.note-editor .note-dropzone { + position: absolute; + z-index: 100; + display: none; + color: #87cefa; + background-color: white; + border: 2px dashed #87cefa; + opacity: .95; + pointer-event: none +} +.note-editor .note-dropzone .note-dropzone-message { + display: table-cell; + font-size: 28px; + font-weight: bold; + text-align: center; + vertical-align: middle +} +.note-editor .note-dropzone.hover { + color: #098ddf; + border: 2px dashed #098ddf +} +.note-editor.dragover .note-dropzone { + display: table +} + +.note-editor.fullscreen { + position: fixed; + top: 0; + left: 0; + z-index: 2021; + width: 100% +} +.note-editor.fullscreen .note-editable { + background-color: white +} +.note-editor.fullscreen .note-resizebar { + display: none +} +.note-editor.codeview .note-editable { + display: none +} +.note-editor.codeview .note-codable { + display: block +} +.note-editor .note-statusbar { + background-color: #f5f5f5 +} +.note-editor .note-editable[contenteditable=true]:empty:not(:focus):before { + color: #a9a9a9; + content: attr(data-placeholder) +} +.note-editor .note-editable { + padding: 10px; + overflow: auto; + outline: 0 +} +.note-editor .note-editable[contenteditable="false"] { + background-color: #e5e5e5 +} +.note-editor .note-codable { + display: none; + width: 100%; + padding: 10px; + margin-bottom: 0; + font-family: Menlo, Monaco, monospace, sans-serif; + font-size: 14px; + color: #ccc; + background-color: #222; + border: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + box-shadow: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + resize: none +} +.note-air-editor { + outline: 0 +} + +.note-popover .popover .popover-content, +.note-toolbar { + padding: 0; + margin: 0 +} +.note-popover .popover .popover-content > .btn-group, +.note-toolbar > .btn-group { + margin-top: 0; + margin-right: 5px; + margin-left: 0 +} +.note-popover .popover .popover-content .btn-group .note-table, +.note-toolbar .btn-group .note-table { + min-width: 0; + padding: 5px +} +.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker, +.note-toolbar .btn-group .note-table .note-dimension-picker { + font-size: 18px +} +.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher, +.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher { + position: absolute!important; + z-index: 3; + width: $gridUnit * 10; + height:$gridUnit * 10; + cursor: pointer +} +.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted, +.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted { + position: relative !important; + z-index: 1; + width: $gridUnit * 12; + height: $gridUnit * 5; + background-size: 26px 26px; + background-image:repeating-linear-gradient(0deg, #3b3b3b, #3b3b3b 4px, transparent 4px, transparent 26px), + repeating-linear-gradient(-90deg, transparent, transparent 4px, #fff 4px, #fff 26px); +} +.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted, +.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted { + position: absolute !important; + z-index: 2; + width: $gridUnit; + height: $gridUnit; + background-size: 26px 26px; + background-image:repeating-linear-gradient(0deg, #3b3b3b, #3b3b3b 4px, transparent 4px, transparent 26px), + repeating-linear-gradient(-90deg, transparent, transparent 4px, $firstFocusColor 4px, $firstFocusColor 26px); +} + +.note-popover .popover .popover-content .note-style h1, +.note-toolbar .note-style h1, +.note-popover .popover .popover-content .note-style h2, +.note-toolbar .note-style h2, +.note-popover .popover .popover-content .note-style h3, +.note-toolbar .note-style h3, +.note-popover .popover .popover-content .note-style h4, +.note-toolbar .note-style h4, +.note-popover .popover .popover-content .note-style h5, +.note-toolbar .note-style h5, +.note-popover .popover .popover-content .note-style h6, +.note-toolbar .note-style h6, +.note-popover .popover .popover-content .note-style blockquote, +.note-toolbar .note-style blockquote { + margin: 0 +} +.note-popover .popover .popover-content .note-color .dropdown-toggle, +.note-toolbar .note-color .dropdown-toggle { + width: 20px; + padding-left: 5px +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group, +.note-toolbar .note-color .dropdown-menu .btn-group { + margin: 0 +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group:first-child, +.note-toolbar .note-color .dropdown-menu .btn-group:first-child { + margin: 0 5px +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-palette-title, +.note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title { + margin: 2px 7px; + font-size: 12px; + text-align: center; + border-bottom: 1px solid #eee +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset, +.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset { + padding: 0 3px; + margin: 3px; + font-size: 11px; + cursor: pointer; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-row, +.note-toolbar .note-color .dropdown-menu .btn-group .note-color-row { + height: 20px +} +.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset:hover, +.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover { + background: #eee +} +/*.note-popover .popover .popover-content .dropdown-menu, +.note-toolbar .dropdown-menu { + min-width: 90px +}*/ +.note-popover .popover .popover-content .dropdown-menu.right, +.note-toolbar .dropdown-menu.right { + right: 0; + left: auto +} +.note-popover .popover .popover-content .dropdown-menu.right::before, +.note-toolbar .dropdown-menu.right::before { + right: 9px; + left: auto!important +} +.note-popover .popover .popover-content .dropdown-menu.right::after, +.note-toolbar .dropdown-menu.right::after { + right: 10px; + left: auto!important +} +.note-popover .popover .popover-content .dropdown-menu.note-check li a i, +.note-toolbar .dropdown-menu.note-check li a i { + color: deepskyblue; + visibility: hidden +} +.note-popover .popover .popover-content .dropdown-menu.note-check li a.checked i, +.note-toolbar .dropdown-menu.note-check li a.checked i { + visibility: visible +} +.note-popover .popover .popover-content .note-fontsize-10, +.note-toolbar .note-fontsize-10 { + font-size: 10px +}
\ No newline at end of file diff --git a/system/admin/static/editor/sass/materialize.scss b/system/admin/static/editor/sass/materialize.scss new file mode 100644 index 0000000..4421631 --- /dev/null +++ b/system/admin/static/editor/sass/materialize.scss @@ -0,0 +1,38 @@ +@charset "UTF-8"; + +// Mixins +@import "components/prefixer"; +@import "components/mixins"; +@import "components/color"; + +// Variables; +@import "components/variables"; + +// Reset +@import "components/normalize"; + +// components +@import "components/global"; +@import "components/icons-material-design"; +@import "components/grid"; +@import "components/navbar"; +@import "components/roboto"; +@import "components/typography"; +@import "components/cards"; +@import "components/toast"; +@import "components/tabs"; +@import "components/tooltip"; +@import "components/buttons"; +@import "components/dropdown"; +@import "components/waves"; +@import "components/modal"; +@import "components/collapsible"; +@import "components/materialbox"; +@import "components/form"; +@import "components/table_of_contents"; +@import "components/sideNav"; +@import "components/preloader"; +@import "components/slider"; +@import "components/date_picker/default.scss"; +@import "components/date_picker/default.date.scss"; +@import "components/date_picker/default.time.scss";
\ No newline at end of file |