diff --git a/public/cambios.yaml b/public/cambios.yaml new file mode 100644 index 0000000..e69de29 diff --git a/public/img/pseudo-logo.svg b/public/img/pseudo-logo.svg new file mode 100644 index 0000000..95bc9df --- /dev/null +++ b/public/img/pseudo-logo.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/src/components/AnimeView/BarraLateral.vue b/src/components/AnimeView/BarraLateral.vue new file mode 100644 index 0000000..7deeccb --- /dev/null +++ b/src/components/AnimeView/BarraLateral.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/components/ListaDeCambios/Cambio.vue b/src/components/ListaDeCambios/Cambio.vue new file mode 100644 index 0000000..b7a2be8 --- /dev/null +++ b/src/components/ListaDeCambios/Cambio.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/src/materialize/sass/components/_badges.scss b/src/materialize/sass/components/_badges.scss deleted file mode 100644 index ffed87d..0000000 --- a/src/materialize/sass/components/_badges.scss +++ /dev/null @@ -1,55 +0,0 @@ -// Badges -span.badge { - min-width: 3rem; - padding: 0 6px; - margin-left: 14px; - text-align: center; - font-size: 1rem; - line-height: $badge-height; - height: $badge-height; - color: color('grey', 'darken-1'); - float: right; - 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"; - } - - &[data-badge-caption]::after { - content: " " attr(data-badge-caption); - } -} - -// Special cases -nav ul a span.badge { - display: inline-block; - float: none; - margin-left: 4px; - line-height: $badge-height; - height: $badge-height; - -webkit-font-smoothing: auto; -} - -// Line height centering -.collection-item span.badge { - margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2}); -} -.collapsible span.badge { - margin-left: auto; -} -.sidenav span.badge { - margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2}); -} - -table span.badge { - display: inline-block; - float: none; - margin-left: auto; -} diff --git a/src/materialize/sass/components/_buttons.scss b/src/materialize/sass/components/_buttons.scss deleted file mode 100644 index 44b80c8..0000000 --- a/src/materialize/sass/components/_buttons.scss +++ /dev/null @@ -1,322 +0,0 @@ -// shared styles -.btn, -.btn-flat { - border: $button-border; - border-radius: $button-radius; - display: inline-block; - height: $button-height; - line-height: $button-height; - padding: $button-padding; - text-transform: uppercase; - vertical-align: middle; - -webkit-tap-highlight-color: transparent; // Gets rid of tap active state -} - -// Disabled shared style -.btn.disabled, -.btn-floating.disabled, -.btn-large.disabled, -.btn-small.disabled, -.btn-flat.disabled, -.btn:disabled, -.btn-floating:disabled, -.btn-large:disabled, -.btn-small:disabled, -.btn-flat:disabled, -.btn[disabled], -.btn-floating[disabled], -.btn-large[disabled], -.btn-small[disabled], -.btn-flat[disabled] { - pointer-events: none; - background-color: $button-disabled-background !important; - box-shadow: none; - color: $button-disabled-color !important; - cursor: default; - &:hover { - background-color: $button-disabled-background !important; - color: $button-disabled-color !important; - } -} - -// Shared icon styles -.btn, -.btn-floating, -.btn-large, -.btn-small, -.btn-flat { - font-size: $button-font-size; - outline: 0; - i { - font-size: $button-icon-font-size; - line-height: inherit; - } -} - -// Shared focus button style -.btn, -.btn-floating { - &:focus { - background-color: darken($button-raised-background, 10%); - } -} - -// Raised Button -.btn { - text-decoration: none; - color: $button-raised-color; - background-color: $button-raised-background; - text-align: center; - letter-spacing: .5px; - @extend .z-depth-1; - transition: background-color .2s ease-out; - cursor: pointer; - &:hover { - background-color: $button-raised-background-hover; - @extend .z-depth-1-half; - } -} - -// Floating button -.btn-floating { - &:hover { - background-color: $button-floating-background-hover; - @extend .z-depth-1-half; - } - &:before { - border-radius: 0; - } - &.btn-large { - &.halfway-fab { - bottom: -$button-floating-large-size / 2; - } - width: $button-floating-large-size; - height: $button-floating-large-size; - padding: 0; - i { - line-height: $button-floating-large-size; - } - } - - &.btn-small { - &.halfway-fab { - bottom: -$button-floating-small-size / 2; - } - width: $button-floating-small-size; - height: $button-floating-small-size; - i { - line-height: $button-floating-small-size; - } - } - - &.halfway-fab { - &.left { - right: auto; - left: 24px; - } - position: absolute; - right: 24px; - bottom: -$button-floating-size / 2; - } - display: inline-block; - color: $button-floating-color; - 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-floating-background; - border-radius: $button-floating-radius; - @extend .z-depth-1; - transition: background-color .3s; - cursor: pointer; - vertical-align: middle; - i { - width: inherit; - display: inline-block; - text-align: center; - color: $button-floating-color; - font-size: $button-large-icon-font-size; - line-height: $button-floating-size; - } -} - -// button fix -button.btn-floating { - border: $button-border; -} - -// Fixed Action Button -.fixed-action-btn { - &.active { - ul { - visibility: visible; - } - } - - // Directions - &.direction-left, - &.direction-right { - padding: 0 0 0 15px; - ul { - text-align: right; - right: 64px; - top: 50%; - transform: translateY(-50%); - height: 100%; - left: auto; - /*width 100% only goes to width of button container */ - width: 500px; - li { - display: inline-block; - margin: 7.5px 15px 0 0; - } - } - } - &.direction-right { - padding: 0 15px 0 0; - ul { - text-align: left; - direction: rtl; - left: 64px; - right: auto; - li { - margin: 7.5px 0 0 15px; - } - } - } - &.direction-bottom { - padding: 0 0 15px 0; - ul { - top: 64px; - bottom: auto; - display: flex; - flex-direction: column-reverse; - li { - margin: 15px 0 0 0; - } - } - } - &.toolbar { - &.active { - &>a i { - opacity: 0; - } - } - padding: 0; - height: $button-floating-large-size; - ul { - display: flex; - top: 0; - bottom: 0; - z-index: 1; - li { - flex: 1; - display: inline-block; - margin: 0; - height: 100%; - transition: none; - a { - display: block; - overflow: hidden; - position: relative; - width: 100%; - height: 100%; - background-color: transparent; - box-shadow: none; - color: #fff; - line-height: $button-floating-large-size; - z-index: 1; - i { - line-height: inherit; - } - } - } - } - } - position: fixed; - right: 23px; - bottom: 23px; - padding-top: 15px; - margin-bottom: 0; - z-index: 997; - ul { - left: 0; - right: 0; - text-align: center; - position: absolute; - bottom: 64px; - margin: 0; - visibility: hidden; - li { - margin-bottom: 15px; - } - a.btn-floating { - opacity: 0; - } - } - .fab-backdrop { - position: absolute; - top: 0; - left: 0; - z-index: -1; - width: $button-floating-size; - height: $button-floating-size; - background-color: $button-floating-background; - border-radius: $button-floating-radius; - transform: scale(0); - } -} - -// Flat button -.btn-flat { - box-shadow: none; - background-color: transparent; - color: $button-flat-color; - cursor: pointer; - transition: background-color .2s; - &:focus, - &:hover { - box-shadow: none; - } - &:focus { - background-color: rgba(0, 0, 0, .1); - } - &.disabled, - &.btn-flat[disabled] { - background-color: transparent !important; - color: $button-flat-disabled-color !important; - cursor: default; - } -} - -// Large button -.btn-large { - @extend .btn; - height: $button-large-height; - line-height: $button-large-height; - font-size: $button-large-font-size; - padding: 0 28px; - - i { - font-size: $button-large-icon-font-size; - } -} - -// Small button -.btn-small { - @extend .btn; - height: $button-small-height; - line-height: $button-small-height; - font-size: $button-small-font-size; - i { - font-size: $button-small-icon-font-size; - } -} - -// Block button -.btn-block { - display: block; -} diff --git a/src/materialize/sass/components/_cards.scss b/src/materialize/sass/components/_cards.scss deleted file mode 100644 index fcbf28e..0000000 --- a/src/materialize/sass/components/_cards.scss +++ /dev/null @@ -1,195 +0,0 @@ - - -.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; - 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 { - font-size: 24px; - font-weight: 300; - &.activator { - cursor: pointer; - } - } - - // Card Sizes - &.small, &.medium, &.large { - position: relative; - - .card-image { - max-height: 60%; - overflow: hidden; - } - .card-image + .card-content { - max-height: 40%; - } - .card-content { - max-height: 100%; - overflow: hidden; - } - .card-action { - position: absolute; - bottom: 0; - left: 0; - right: 0; - } - } - - &.small { - height: 300px; - } - - &.medium { - height: 400px; - } - - &.large { - height: 500px; - } - - // Horizontal Cards - &.horizontal { - &.small, &.medium, &.large { - .card-image { - height: 100%; - max-height: none; - overflow: visible; - - img { - height: 100%; - } - } - } - - display: flex; - - .card-image { - max-width: 50%; - img { - border-radius: 2px 0 0 2px; - max-width: 100%; - width: auto; - } - } - - .card-stacked { - display: flex; - flex-direction: column; - flex: 1; - position: relative; - - .card-content { - flex-grow: 1; - } - } - } - - // Sticky Action Section - &.sticky-action { - .card-action { - z-index: 2; - } - - .card-reveal { - z-index: 1; - padding-bottom: 64px; - } - } - - - - - .card-image { - position: relative; - - // Image background for content - img { - display: block; - border-radius: 2px 2px 0 0; - position: relative; - left: 0; - right: 0; - top: 0; - bottom: 0; - width: 100%; - } - - .card-title { - color: $card-bg-color; - position: absolute; - bottom: 0; - left: 0; - max-width: 100%; - padding: $card-padding; - } - } - - .card-content { - padding: $card-padding; - border-radius: 0 0 2px 2px; - - p { - margin: 0; - } - .card-title { - display: block; - line-height: 32px; - margin-bottom: 8px; - - i { - line-height: 32px; - } - } - } - - .card-action { - &:last-child { - border-radius: 0 0 2px 2px; - } - background-color: inherit; // Use inherit to inherit color classes - border-top: 1px solid rgba(160,160,160,.2); - position: relative; - padding: 16px $card-padding; - - a:not(.btn):not(.btn-large):not(.btn-floating) { - color: $card-link-color; - margin-right: $card-padding; - 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; - left: 0; - top: 100%; - height: 100%; - z-index: 3; - display: none; - - .card-title { - cursor: pointer; - display: block; - } - } -} diff --git a/src/materialize/sass/components/_carousel.scss b/src/materialize/sass/components/_carousel.scss deleted file mode 100644 index cc36d4b..0000000 --- a/src/materialize/sass/components/_carousel.scss +++ /dev/null @@ -1,90 +0,0 @@ -.carousel { - &.carousel-slider { - top: 0; - left: 0; - - .carousel-fixed-item { - &.with-indicators { - bottom: 68px; - } - - position: absolute; - left: 0; - right: 0; - bottom: 20px; - z-index: 1; - } - - .carousel-item { - width: 100%; - height: 100%; - min-height: $carousel-height; - position: absolute; - top: 0; - left: 0; - - h2 { - font-size: 24px; - font-weight: 500; - line-height: 32px; - } - - p { - font-size: 15px; - } - } - } - - overflow: hidden; - position: relative; - width: 100%; - height: $carousel-height; - perspective: 500px; - transform-style: preserve-3d; - transform-origin: 0% 50%; - - .carousel-item { - visibility: hidden; - width: $carousel-item-width; - height: $carousel-item-height; - position: absolute; - top: 0; - left: 0; - - & > img { - width: 100%; - } - } - - .indicators { - position: absolute; - text-align: center; - left: 0; - right: 0; - bottom: 0; - margin: 0; - - .indicator-item { - &.active { - background-color: #fff; - } - - display: inline-block; - position: relative; - cursor: pointer; - height: 8px; - width: 8px; - margin: 24px 4px; - background-color: rgba(255,255,255,.5); - - transition: background-color .3s; - border-radius: 50%; - } - } - - // Materialbox compatibility - &.scrolling .carousel-item .materialboxed, - .carousel-item:not(.active) .materialboxed { - pointer-events: none; - } -} diff --git a/src/materialize/sass/components/_chips.scss b/src/materialize/sass/components/_chips.scss deleted file mode 100644 index 27744a8..0000000 --- a/src/materialize/sass/components/_chips.scss +++ /dev/null @@ -1,90 +0,0 @@ -.chip { - &:focus { - outline: none; - background-color: $chip-selected-color; - color: #fff; - } - - display: inline-block; - height: 32px; - font-size: 13px; - font-weight: 500; - color: rgba(0,0,0,.6); - line-height: 32px; - padding: 0 12px; - border-radius: 16px; - background-color: $chip-bg-color; - margin-bottom: $chip-margin; - margin-right: $chip-margin; - - > img { - float: left; - margin: 0 8px 0 -12px; - height: 32px; - width: 32px; - border-radius: 50%; - } - - .close { - cursor: pointer; - float: right; - font-size: 16px; - line-height: 32px; - padding-left: 8px; - } -} - -.chips { - border: none; - border-bottom: 1px solid $chip-border-color; - box-shadow: none; - margin: $input-margin; - min-height: 45px; - outline: none; - transition: all .3s; - - &.focus { - border-bottom: 1px solid $chip-selected-color; - box-shadow: 0 1px 0 0 $chip-selected-color; - } - - &:hover { - cursor: text; - } - - .input { - background: none; - border: 0; - color: rgba(0,0,0,.6); - display: inline-block; - font-size: $input-font-size; - height: $input-height; - line-height: 32px; - outline: 0; - margin: 0; - padding: 0 !important; - width: 120px !important; - } - - .input:focus { - border: 0 !important; - box-shadow: none !important; - } - - // Autocomplete - .autocomplete-content { - margin-top: 0; - margin-bottom: 0; - } -} - -// Form prefix -.prefix ~ .chips { - margin-left: 3rem; - width: 92%; - width: calc(100% - 3rem); -} -.chips:empty ~ label { - font-size: 0.8rem; - transform: translateY(-140%); -} diff --git a/src/materialize/sass/components/_collapsible.scss b/src/materialize/sass/components/_collapsible.scss deleted file mode 100644 index 024324f..0000000 --- a/src/materialize/sass/components/_collapsible.scss +++ /dev/null @@ -1,91 +0,0 @@ -.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 { - &:focus { - outline: 0 - } - - display: flex; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - line-height: 1.5; - padding: 1rem; - background-color: $collapsible-header-color; - border-bottom: 1px solid $collapsible-border-color; - - i { - width: 2rem; - font-size: 1.6rem; - display: inline-block; - text-align: center; - margin-right: 1rem; - } -} -.keyboard-focused .collapsible-header:focus { - background-color: #eee; -} - -.collapsible-body { - display: none; - border-bottom: 1px solid $collapsible-border-color; - box-sizing: border-box; - padding: 2rem; -} - -// Sidenav collapsible styling -.sidenav, -.sidenav.fixed { - - .collapsible { - border: none; - box-shadow: none; - - li { padding: 0; } - } - - .collapsible-header { - background-color: transparent; - border: none; - line-height: inherit; - height: inherit; - padding: 0 $sidenav-padding; - - &:hover { background-color: rgba(0,0,0,.05); } - i { line-height: inherit; } - } - - .collapsible-body { - border: 0; - background-color: $collapsible-header-color; - - li a { - padding: 0 (7.5px + $sidenav-padding) - 0 (15px + $sidenav-padding); - } - } - -} - -// 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/src/materialize/sass/components/_color-classes.scss b/src/materialize/sass/components/_color-classes.scss deleted file mode 100644 index 155cecd..0000000 --- a/src/materialize/sass/components/_color-classes.scss +++ /dev/null @@ -1,32 +0,0 @@ -// 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 if $color_name != "shades" { - .#{$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; - } -} diff --git a/src/materialize/sass/components/_color-variables.scss b/src/materialize/sass/components/_color-variables.scss deleted file mode 100644 index 062f6a5..0000000 --- a/src/materialize/sass/components/_color-variables.scss +++ /dev/null @@ -1,370 +0,0 @@ -// Google Color Palette defined: http://www.google.com/design/spec/style/color.html - -$materialize-red: ( - "base": #e51c23, - "lighten-5": #fdeaeb, - "lighten-4": #f8c1c3, - "lighten-3": #f3989b, - "lighten-2": #ee6e73, - "lighten-1": #ea454b, - "darken-1": #d0181e, - "darken-2": #b9151b, - "darken-3": #a21318, - "darken-4": #8b1014, -); - -$red: ( - "base": #F44336, - "lighten-5": #FFEBEE, - "lighten-4": #FFCDD2, - "lighten-3": #EF9A9A, - "lighten-2": #E57373, - "lighten-1": #EF5350, - "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: ( - "base": #e91e63, - "lighten-5": #fce4ec, - "lighten-4": #f8bbd0, - "lighten-3": #f48fb1, - "lighten-2": #f06292, - "lighten-1": #ec407a, - "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: ( - "base": #9c27b0, - "lighten-5": #f3e5f5, - "lighten-4": #e1bee7, - "lighten-3": #ce93d8, - "lighten-2": #ba68c8, - "lighten-1": #ab47bc, - "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: ( - "base": #673ab7, - "lighten-5": #ede7f6, - "lighten-4": #d1c4e9, - "lighten-3": #b39ddb, - "lighten-2": #9575cd, - "lighten-1": #7e57c2, - "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: ( - "base": #3f51b5, - "lighten-5": #e8eaf6, - "lighten-4": #c5cae9, - "lighten-3": #9fa8da, - "lighten-2": #7986cb, - "lighten-1": #5c6bc0, - "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: ( - "base": #2196F3, - "lighten-5": #E3F2FD, - "lighten-4": #BBDEFB, - "lighten-3": #90CAF9, - "lighten-2": #64B5F6, - "lighten-1": #42A5F5, - "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: ( - "base": #03a9f4, - "lighten-5": #e1f5fe, - "lighten-4": #b3e5fc, - "lighten-3": #81d4fa, - "lighten-2": #4fc3f7, - "lighten-1": #29b6f6, - "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: ( - "base": #00bcd4, - "lighten-5": #e0f7fa, - "lighten-4": #b2ebf2, - "lighten-3": #80deea, - "lighten-2": #4dd0e1, - "lighten-1": #26c6da, - "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: ( - "base": #009688, - "lighten-5": #e0f2f1, - "lighten-4": #b2dfdb, - "lighten-3": #80cbc4, - "lighten-2": #4db6ac, - "lighten-1": #26a69a, - "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: ( - "base": #4CAF50, - "lighten-5": #E8F5E9, - "lighten-4": #C8E6C9, - "lighten-3": #A5D6A7, - "lighten-2": #81C784, - "lighten-1": #66BB6A, - "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: ( - "base": #8bc34a, - "lighten-5": #f1f8e9, - "lighten-4": #dcedc8, - "lighten-3": #c5e1a5, - "lighten-2": #aed581, - "lighten-1": #9ccc65, - "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: ( - "base": #cddc39, - "lighten-5": #f9fbe7, - "lighten-4": #f0f4c3, - "lighten-3": #e6ee9c, - "lighten-2": #dce775, - "lighten-1": #d4e157, - "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: ( - "base": #ffeb3b, - "lighten-5": #fffde7, - "lighten-4": #fff9c4, - "lighten-3": #fff59d, - "lighten-2": #fff176, - "lighten-1": #ffee58, - "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: ( - "base": #ffc107, - "lighten-5": #fff8e1, - "lighten-4": #ffecb3, - "lighten-3": #ffe082, - "lighten-2": #ffd54f, - "lighten-1": #ffca28, - "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: ( - "base": #ff9800, - "lighten-5": #fff3e0, - "lighten-4": #ffe0b2, - "lighten-3": #ffcc80, - "lighten-2": #ffb74d, - "lighten-1": #ffa726, - "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: ( - "base": #ff5722, - "lighten-5": #fbe9e7, - "lighten-4": #ffccbc, - "lighten-3": #ffab91, - "lighten-2": #ff8a65, - "lighten-1": #ff7043, - "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: ( - "base": #795548, - "lighten-5": #efebe9, - "lighten-4": #d7ccc8, - "lighten-3": #bcaaa4, - "lighten-2": #a1887f, - "lighten-1": #8d6e63, - "darken-1": #6d4c41, - "darken-2": #5d4037, - "darken-3": #4e342e, - "darken-4": #3e2723 -); - -$blue-grey: ( - "base": #607d8b, - "lighten-5": #eceff1, - "lighten-4": #cfd8dc, - "lighten-3": #b0bec5, - "lighten-2": #90a4ae, - "lighten-1": #78909c, - "darken-1": #546e7a, - "darken-2": #455a64, - "darken-3": #37474f, - "darken-4": #263238 -); - -$grey: ( - "base": #9e9e9e, - "lighten-5": #fafafa, - "lighten-4": #f5f5f5, - "lighten-3": #eeeeee, - "lighten-2": #e0e0e0, - "lighten-1": #bdbdbd, - "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 -) !default; - - -// 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 `#{$color}` - `#{$type}` in $colors."; - @return null; -} diff --git a/src/materialize/sass/components/_datepicker.scss b/src/materialize/sass/components/_datepicker.scss deleted file mode 100644 index d2c920b..0000000 --- a/src/materialize/sass/components/_datepicker.scss +++ /dev/null @@ -1,191 +0,0 @@ -/* Modal */ -.datepicker-modal { - max-width: 325px; - min-width: 300px; - max-height: none; -} - -.datepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; -} - -.datepicker-controls { - display: flex; - justify-content: space-between; - width: 280px; - margin: 0 auto; - - .selects-container { - display: flex; - } - - .select-wrapper { - input { - &:focus { - border-bottom: none; - } - border-bottom: none; - text-align: center; - margin: 0; - } - - .caret { - display: none; - } - } - - .select-year input { - width: 50px; - } - - .select-month input { - width: 70px; - } -} - -.month-prev, .month-next { - margin-top: 4px; - cursor: pointer; - background-color: transparent; - border: none; -} - - -/* Date Display */ -.datepicker-date-display { - flex: 1 auto; - background-color: $secondary-color; - color: #fff; - padding: 20px 22px; - font-weight: 500; - - .year-text { - display: block; - font-size: 1.5rem; - line-height: 25px; - color: $datepicker-year; - } - - .date-text { - display: block; - font-size: 2.8rem; - line-height: 47px; - font-weight: 500; - } -} - - -/* Calendar */ -.datepicker-calendar-container { - flex: 2.5 auto; -} - -.datepicker-table { - width: 280px; - font-size: 1rem; - margin: 0 auto; - - thead { - border-bottom: none; - } - - th { - padding: 10px 5px; - text-align: center; - } - - tr { - border: none; - } - - abbr { - text-decoration: none; - color: $datepicker-calendar-header-color; - } - - td { - &.is-today { - color: $secondary-color; - } - - &.is-selected { - background-color: $secondary-color; - color: #fff; - } - - &.is-outside-current-month, - &.is-disabled { - color: $datepicker-disabled-day-color; - pointer-events: none; - } - - border-radius: 50%; - padding: 0; - } -} - -.datepicker-day-button { - &:focus { - background-color: $datepicker-day-focus; - } - - background-color: transparent; - border: none; - line-height: 38px; - display: block; - width: 100%; - border-radius: 50%; - padding: 0 5px; - cursor: pointer; - color: inherit; -} - - -/* Footer */ -.datepicker-footer { - width: 280px; - margin: 0 auto; - padding-bottom: 5px; - display: flex; - justify-content: space-between; -} - -.datepicker-cancel, -.datepicker-clear, -.datepicker-today, -.datepicker-done { - color: $secondary-color; - padding: 0 1rem; -} - -.datepicker-clear { - color: $error-color; -} - - -/* Media Queries */ -@media #{$medium-and-up} { - .datepicker-modal { - max-width: 625px; - } - - .datepicker-container.modal-content { - flex-direction: row; - } - - .datepicker-date-display { - flex: 0 1 270px; - } - - .datepicker-controls, - .datepicker-table, - .datepicker-footer { - width: 320px; - } - - .datepicker-day-button { - line-height: 44px; - } -} diff --git a/src/materialize/sass/components/_dropdown.scss b/src/materialize/sass/components/_dropdown.scss deleted file mode 100644 index 0caae65..0000000 --- a/src/materialize/sass/components/_dropdown.scss +++ /dev/null @@ -1,85 +0,0 @@ -.dropdown-content { - &:focus { - outline: 0; - } - - - @extend .z-depth-1; - background-color: $dropdown-bg-color; - margin: 0; - display: none; - min-width: 100px; - overflow-y: auto; - opacity: 0; - position: absolute; - left: 0; - top: 0; - z-index: 9999; // TODO: Check if this doesn't break other things - transform-origin: 0 0; - - - li { - &:hover, &.active { - background-color: $dropdown-hover-bg-color; - } - - &:focus { - outline: none; - } - - &.divider { - min-height: 0; - height: 1px; - } - - & > a, & > span { - font-size: 16px; - color: $dropdown-color; - display: block; - line-height: 22px; - padding: (($dropdown-item-height - 22) / 2) 16px; - } - - & > span > label { - top: 1px; - left: 0; - height: 18px; - } - - // Icon alignment override - & > a > i { - height: inherit; - line-height: inherit; - float: left; - margin: 0 24px 0 0; - width: 24px; - } - - - clear: both; - color: $off-black; - cursor: pointer; - min-height: $dropdown-item-height; - line-height: 1.5rem; - width: 100%; - text-align: left; - } -} - -body.keyboard-focused { - .dropdown-content li:focus { - background-color: darken($dropdown-hover-bg-color, 8%); - } -} - -// Input field specificity bugfix -.input-field.col .dropdown-content [type="checkbox"] + label { - top: 1px; - left: 0; - height: 18px; - transform: none; -} - -.dropdown-trigger { - cursor: pointer; -} \ No newline at end of file diff --git a/src/materialize/sass/components/_global.scss b/src/materialize/sass/components/_global.scss deleted file mode 100644 index 39f33db..0000000 --- a/src/materialize/sass/components/_global.scss +++ /dev/null @@ -1,769 +0,0 @@ -//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; -} - -button, -input, -optgroup, -select, -textarea { - font-family: $font-stack; -} - -ul { - &:not(.browser-default) { - padding-left: 0; - list-style-type: none; - - & > li { - 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 { - display: flex; - align-items: center; -} - - -// classic clearfix -.clearfix { - clear: both; -} - - -// Z-levels -.z-depth-0 { - box-shadow: none !important; -} - -/* 2dp elevation modified*/ -.z-depth-1 { - box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), - 0 3px 1px -2px rgba(0,0,0,0.12), - 0 1px 5px 0 rgba(0,0,0,0.2); -} -.z-depth-1-half { - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); -} - -/* 6dp elevation modified*/ -.z-depth-2 { - box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), - 0 1px 10px 0 rgba(0,0,0,0.12), - 0 2px 4px -1px rgba(0,0,0,0.3); -} - -/* 12dp elevation modified*/ -.z-depth-3 { - box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), - 0 3px 14px 2px rgba(0,0,0,0.12), - 0 5px 5px -3px rgba(0, 0, 0, 0.2); -} - -/* 16dp elevation */ -.z-depth-4 { - box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), - 0 6px 30px 5px rgba(0,0,0,0.12), - 0 8px 10px -7px rgba(0,0,0,0.2); -} - -/* 24dp elevation */ -.z-depth-5 { - box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), - 0 9px 46px 8px rgba(0,0,0,0.12), - 0 11px 15px -7px rgba(0,0,0,0.2); -} - -.hoverable { - transition: box-shadow .25s; - - &:hover { - 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 { - display: inline-block; - border-radius: 2px; - text-align: center; - vertical-align: top; - height: 30px; - - a { - color: #444; - display: inline-block; - font-size: 1.2rem; - padding: 0 10px; - line-height: 30px; - } - - &.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; - } - } -} - -// Breadcrumbs -.breadcrumb { - font-size: 18px; - color: rgba(255,255,255, .7); - - i, - [class^="mdi-"], [class*="mdi-"], - i.material-icons { - display: inline-block; - float: left; - font-size: 24px; - } - - &:before { - content: '\E5CC'; - color: rgba(255,255,255, .7); - vertical-align: top; - display: inline-block; - font-family: 'Material Icons'; - font-weight: normal; - font-style: normal; - font-size: 25px; - margin: 0 10px 0 8px; - -webkit-font-smoothing: antialiased; - } - - &:first-child:before { - display: none; - } - - &:last-child { - color: #fff; - } -} - -// Parallax -.parallax-container { - position: relative; - overflow: hidden; - height: 500px; - - .parallax { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: -1; - - img { - opacity: 0; - position: absolute; - left: 50%; - bottom: 0; - min-width: 100%; - min-height: 100%; - 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; - } -} -.hide-on-extra-large-only { - @media #{$extra-large-and-up} { - display: none !important; - } -} -.show-on-extra-large { - @media #{$extra-large-and-up} { - display: block !important; - } -} -.show-on-large { - @media #{$large-and-up} { - display: block !important; - } -} -.show-on-medium { - @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) { - display: block !important; - } -} -.show-on-small { - @media #{$small-and-down} { - display: block !important; - } -} -.show-on-medium-and-up { - @media #{$medium-and-up} { - display: block !important; - } -} -.show-on-medium-and-down { - @media #{$medium-and-down} { - display: block !important; - } -} - - -// Center text on mobile -.center-on-small-only { - @media #{$small-and-down} { - text-align: center; - } -} - -// Footer -.page-footer { - padding-top: 20px; - color: $footer-font-color; - background-color: $footer-bg-color; - - .footer-copyright { - overflow: hidden; - min-height: 50px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 10px 0px; - color: $footer-copyright-font-color; - background-color: $footer-copyright-bg-color; - } -} - -// Tables -table, th, td { - border: none; -} - -table { - width:100%; - display: table; - border-collapse: collapse; - border-spacing: 0; - - &.striped { - tr { - border-bottom: none; - } - - > tbody { - > tr:nth-child(odd) { - background-color: $table-striped-color; - } - - > tr > td { - border-radius: 0; - } - } - } - - &.highlight > tbody > tr { - transition: background-color .25s ease; - &:hover { - background-color: $table-striped-color; - } - } - - &.centered { - thead tr th, tbody tr td { - text-align: center; - } - } -} - -tr { - 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; - - td:empty:before { - content: '\00a0'; - } - - 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 { - border-bottom: none; - padding: 0 10px; - } - - /* sort out borders */ - thead { - border: 0; - 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: $collection-line-height; - padding: 10px 20px; - margin: 0; - border-bottom: 1px solid $collection-border-color; - - // Avatar Collection - &.avatar { - min-height: 84px; - padding-left: 72px; - position: relative; - - // Don't style circles inside preloader classes. - &:not(.circle-clipper) > .circle, - :not(.circle-clipper) > .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; - - .secondary-content { - color: #fff; - } - } - } - a.collection-item{ - display: block; - transition: .25s; - color: $collection-link-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; -} -.collapsible .collection { - margin: 0; - border: none; -} - - - -// Responsive Videos -.video-container { - position: relative; - padding-bottom: 56.25%; - height: 0; - overflow: hidden; - - 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; - top: 0; - left: 0; - bottom: 0; - background-color: $progress-bar-color; - 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 - 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 - animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite; - animation-delay: 1.15s; - } - } -} -@keyframes indeterminate { - 0% { - left: -35%; - right:100%; - } - 60% { - left: 100%; - right: -90%; - } - 100% { - left: 100%; - right: -90%; - } -} - -@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 { - 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/src/materialize/sass/components/_grid.scss b/src/materialize/sass/components/_grid.scss deleted file mode 100644 index 8892f05..0000000 --- a/src/materialize/sass/components/_grid.scss +++ /dev/null @@ -1,156 +0,0 @@ -.container { - margin: 0 auto; - max-width: 1280px; - width: 90%; -} -@media #{$medium-and-up} { - .container { - width: 85%; - } -} -@media #{$large-and-up} { - .container { - width: 70%; - } -} -.col .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; - } -} - - -// Mixins to eliminate code repitition -@mixin reset-offset { - margin-left: auto; - left: auto; - right: auto; -} -@mixin grid-classes($size, $i, $perc) { - &.offset-#{$size}#{$i} { - margin-left: $perc; - } - &.pull-#{$size}#{$i} { - right: $perc; - } - &.push-#{$size}#{$i} { - left: $perc; - } -} - - -.row { - margin-left: auto; - margin-right: auto; - margin-bottom: 20px; - - // Clear floating children - &:after { - content: ""; - display: table; - clear: both; - } - - .col { - float: left; - box-sizing: border-box; - padding: 0 $gutter-width / 2; - min-height: 1px; - - &[class*="push-"], - &[class*="pull-"] { - position: relative; - } - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - &.s#{$i} { - width: $perc; - @include reset-offset; - } - $i: $i + 1; - } - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - @include grid-classes("s", $i, $perc); - $i: $i + 1; - } - - @media #{$medium-and-up} { - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - &.m#{$i} { - width: $perc; - @include reset-offset; - } - $i: $i + 1 - } - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - @include grid-classes("m", $i, $perc); - $i: $i + 1; - } - } - - @media #{$large-and-up} { - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - &.l#{$i} { - width: $perc; - @include reset-offset; - } - $i: $i + 1; - } - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - @include grid-classes("l", $i, $perc); - $i: $i + 1; - } - } - - @media #{$extra-large-and-up} { - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - &.xl#{$i} { - width: $perc; - @include reset-offset; - } - $i: $i + 1; - } - - $i: 1; - @while $i <= $num-cols { - $perc: unquote((100 / ($num-cols / $i)) + "%"); - @include grid-classes("xl", $i, $perc); - $i: $i + 1; - } - } - } -} diff --git a/src/materialize/sass/components/_icons-material-design.scss b/src/materialize/sass/components/_icons-material-design.scss deleted file mode 100644 index d8d91c1..0000000 --- a/src/materialize/sass/components/_icons-material-design.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* This is needed for some mobile phones to display the Google Icon font properly */ -.material-icons { - text-rendering: optimizeLegibility; - font-feature-settings: 'liga'; -} diff --git a/src/materialize/sass/components/_materialbox.scss b/src/materialize/sass/components/_materialbox.scss deleted file mode 100644 index 0ebd63f..0000000 --- a/src/materialize/sass/components/_materialbox.scss +++ /dev/null @@ -1,43 +0,0 @@ -.materialboxed { - &:hover { - &:not(.active) { - opacity: .8; - } - } - - display: block; - cursor: zoom-in; - position: relative; - transition: opacity .4s; - -webkit-backface-visibility: hidden; - - &.active { - cursor: zoom-out; - } -} - -#materialbox-overlay { - position:fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: #292929; - z-index: 1000; - will-change: opacity; -} - -.materialbox-caption { - position: fixed; - display: none; - color: #fff; - line-height: 50px; - bottom: 0; - left: 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/src/materialize/sass/components/_modal.scss b/src/materialize/sass/components/_modal.scss deleted file mode 100644 index 38cf3ce..0000000 --- a/src/materialize/sass/components/_modal.scss +++ /dev/null @@ -1,94 +0,0 @@ -.modal { - &:focus { - outline: none; - } - - @extend .z-depth-5; - - 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%; - text-align: right; - - .btn, .btn-flat { - margin: 6px 0; - } - } -} -.modal-overlay { - position: fixed; - z-index: 999; - top: -25%; - 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/src/materialize/sass/components/_navbar.scss b/src/materialize/sass/components/_navbar.scss deleted file mode 100644 index 0317bb2..0000000 --- a/src/materialize/sass/components/_navbar.scss +++ /dev/null @@ -1,208 +0,0 @@ -nav { - &.nav-extended { - height: auto; - - .nav-wrapper { - min-height: $navbar-height-mobile; - height: auto; - } - - .nav-content { - position: relative; - line-height: normal; - } - } - - color: $navbar-font-color; - @extend .z-depth-1; - background-color: $primary-color; - width: 100%; - height: $navbar-height-mobile; - line-height: $navbar-line-height-mobile; - - a { color: $navbar-font-color; } - - i, - [class^="mdi-"], [class*="mdi-"], - i.material-icons { - display: block; - font-size: 24px; - height: $navbar-height-mobile; - line-height: $navbar-line-height-mobile; - } - - .nav-wrapper { - position: relative; - height: 100%; - } - - @media #{$large-and-up} { - a.sidenav-trigger { display: none; } - } - - - // Collapse button - .sidenav-trigger { - float: left; - position: relative; - z-index: 1; - height: $navbar-height-mobile; - margin: 0 18px; - - i { - height: $navbar-height-mobile; - line-height: $navbar-line-height-mobile; - } - } - - - // Logo - .brand-logo { - position: absolute; - color: $navbar-font-color; - display: inline-block; - font-size: $navbar-brand-font-size; - padding: 0; - - &.center { - left: 50%; - transform: translateX(-50%); - } - - @media #{$medium-and-down} { - left: 50%; - transform: translateX(-50%); - - &.left, &.right { - padding: 0; - transform: none; - } - - &.left { left: 0.5rem; } - &.right { - right: 0.5rem; - left: auto; - } - } - - &.right { - right: 0.5rem; - padding: 0; - } - - i, - [class^="mdi-"], [class*="mdi-"], - i.material-icons { - float: left; - margin-right: 15px; - } - } - - - // Title - .nav-title { - display: inline-block; - font-size: 32px; - padding: 28px 0; - } - - - // Navbar Links - ul { - margin: 0; - - li { - transition: background-color .3s; - float: left; - padding: 0; - - &.active { - background-color: rgba(0,0,0,.1); - } - } - a { - transition: background-color .3s; - font-size: $navbar-font-size; - color: $navbar-font-color; - display: block; - padding: 0 15px; - cursor: pointer; - - &.btn, &.btn-large, &.btn-flat, &.btn-floating { - margin-top: -2px; - margin-left: 15px; - margin-right: 15px; - - & > .material-icons { - height: inherit; - line-height: inherit; - } - } - - &:hover { - background-color: rgba(0,0,0,.1); - } - } - - &.left { - float: left; - } - } - - // Navbar Search Form - form { - height: 100%; - } - - .input-field { - margin: 0; - height: 100%; - - 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); - transition: color .3s; - } - &.active i { color: $navbar-font-color; } - } - } -} - -// Fixed Navbar -.navbar-fixed { - position: relative; - height: $navbar-height-mobile; - z-index: 997; - - nav { - position: fixed; - } -} -@media #{$medium-and-up} { - nav.nav-extended .nav-wrapper { - min-height: $navbar-height; - } - nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i { - height: $navbar-height; - line-height: $navbar-line-height; - } - .navbar-fixed { - height: $navbar-height; - } -} diff --git a/src/materialize/sass/components/_normalize.scss b/src/materialize/sass/components/_normalize.scss deleted file mode 100644 index fa4e73d..0000000 --- a/src/materialize/sass/components/_normalize.scss +++ /dev/null @@ -1,447 +0,0 @@ -/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/** - * Add the correct display in IE 9-. - */ - -article, -aside, -footer, -header, -nav, -section { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in IE. - */ - -figcaption, -figure, -main { /* 1 */ - display: block; -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ - -a { - background-color: transparent; /* 1 */ - -webkit-text-decoration-skip: objects; /* 2 */ -} - -/** - * 1. Remove the bottom border in Chrome 57- and Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -audio, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - */ - -details, /* 1 */ -menu { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Scripting - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - */ - -canvas { - display: inline-block; -} - -/** - * Add the correct display in IE. - */ - -template { - display: none; -} - -/* Hidden - ========================================================================== */ - -/** - * Add the correct display in IE 10-. - */ - -[hidden] { - display: none; -} diff --git a/src/materialize/sass/components/_preloader.scss b/src/materialize/sass/components/_preloader.scss deleted file mode 100644 index fbe862d..0000000 --- a/src/materialize/sass/components/_preloader.scss +++ /dev/null @@ -1,334 +0,0 @@ -/* - @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: 50px; - height: 50px; - - &.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; - border-color: $spinner-default-color; -} - -.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, -.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; } -} diff --git a/src/materialize/sass/components/_pulse.scss b/src/materialize/sass/components/_pulse.scss deleted file mode 100644 index a690f36..0000000 --- a/src/materialize/sass/components/_pulse.scss +++ /dev/null @@ -1,34 +0,0 @@ -.pulse { - &::before { - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: inherit; - border-radius: inherit; - transition: opacity .3s, transform .3s; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - z-index: -1; - } - - overflow: visible; - position: relative; -} - -@keyframes pulse-animation { - 0% { - opacity: 1; - transform: scale(1); - } - 50% { - opacity: 0; - transform: scale(1.5); - } - 100% { - opacity: 0; - transform: scale(1.5); - } -} diff --git a/src/materialize/sass/components/_sidenav.scss b/src/materialize/sass/components/_sidenav.scss deleted file mode 100644 index 98a71d8..0000000 --- a/src/materialize/sass/components/_sidenav.scss +++ /dev/null @@ -1,216 +0,0 @@ -.sidenav { - position: fixed; - width: $sidenav-width; - left: 0; - top: 0; - margin: 0; - transform: translateX(-100%); - 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; - will-change: transform; - backface-visibility: hidden; - transform: translateX(-105%); - - @extend .z-depth-1; - - // Right Align - &.right-aligned { - right: 0; - transform: translateX(105%); - left: auto; - transform: translateX(100%); - } - - .collapsible { - margin: 0; - } - - - li { - float: none; - line-height: $sidenav-line-height; - - &.active { background-color: rgba(0,0,0,.05); } - } - - li > a { - color: $sidenav-font-color; - display: block; - font-size: $sidenav-font-size; - font-weight: 500; - height: $sidenav-item-height; - line-height: $sidenav-line-height; - padding: 0 ($sidenav-padding * 2); - - &:hover { background-color: rgba(0,0,0,.05);} - - &.btn, &.btn-large, &.btn-flat, &.btn-floating { - margin: 10px 15px; - } - - &.btn, - &.btn-large, - &.btn-floating { color: $button-raised-color; } - &.btn-flat { color: $button-flat-color; } - - &.btn:hover, - &.btn-large:hover { background-color: lighten($button-raised-background, 5%); } - &.btn-floating:hover { background-color: $button-raised-background; } - - & > i, - & > [class^="mdi-"], li > a > [class*="mdi-"], - & > i.material-icons { - float: left; - height: $sidenav-item-height; - line-height: $sidenav-line-height; - margin: 0 ($sidenav-padding * 2) 0 0; - width: $sidenav-item-height / 2; - color: rgba(0,0,0,.54); - } - } - - - .divider { - margin: ($sidenav-padding / 2) 0 0 0; - } - - .subheader { - &:hover { - background-color: transparent; - } - - cursor: initial; - pointer-events: none; - color: rgba(0,0,0,.54); - font-size: $sidenav-font-size; - font-weight: 500; - line-height: $sidenav-line-height; - } - - .user-view { - position: relative; - padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0; - margin-bottom: $sidenav-padding / 2; - - & > a { - &:hover { background-color: transparent; } - height: auto; - padding: 0; - } - - .background { - overflow: hidden; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - } - - .circle, .name, .email { - display: block; - } - - .circle { - height: 64px; - width: 64px; - } - - .name, - .email { - font-size: $sidenav-font-size; - line-height: $sidenav-line-height / 2; - } - - .name { - margin-top: 16px; - font-weight: 500; - } - - .email { - padding-bottom: 16px; - font-weight: 400; - } - } -} - - -// Touch interaction -.drag-target { - // Right Align - &.right-aligned { - right: 0; - } - - height: 100%; - width: 10px; - position: fixed; - top: 0; - z-index: 998; -} - - -// Fixed Sidenav shown -.sidenav.sidenav-fixed { - // Right Align - &.right-aligned { - right: 0; - left: auto; - } - - left: 0; - transform: translateX(0); - position: fixed; -} - -// Fixed Sidenav hide on smaller -@media #{$medium-and-down} { - .sidenav { - &.sidenav-fixed { - transform: translateX(-105%); - - &.right-aligned { - transform: translateX(105%); - } - } - - > a { - padding: 0 $sidenav-padding; - } - - .user-view { - padding: $sidenav-padding $sidenav-padding 0; - } - } -} - - -.sidenav .collapsible-body > ul:not(.collapsible) > li.active, -.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active { - background-color: $primary-color; - a { - color: $sidenav-bg-color; - } -} -.sidenav .collapsible-body { - padding: 0; -} - - -.sidenav-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - opacity: 0; - height: 120vh; - background-color: rgba(0,0,0,.5); - z-index: 997; - display: none; -} diff --git a/src/materialize/sass/components/_slider.scss b/src/materialize/sass/components/_slider.scss deleted file mode 100644 index 2265cdb..0000000 --- a/src/materialize/sass/components/_slider.scss +++ /dev/null @@ -1,92 +0,0 @@ -.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; - - transition: background-color .3s; - border-radius: 50%; - - &.active { - background-color: $slider-indicator-color; - } - } - } - -} \ No newline at end of file diff --git a/src/materialize/sass/components/_table_of_contents.scss b/src/materialize/sass/components/_table_of_contents.scss deleted file mode 100644 index 638009d..0000000 --- a/src/materialize/sass/components/_table_of_contents.scss +++ /dev/null @@ -1,33 +0,0 @@ -/*************** - Nav List -***************/ -.table-of-contents { - &.fixed { - position: fixed; - } - - li { - padding: 2px 0; - } - a { - display: inline-block; - font-weight: 300; - color: #757575; - padding-left: 16px; - height: 1.5rem; - line-height: 1.5rem; - letter-spacing: .4; - display: inline-block; - - &:hover { - color: lighten(#757575, 20%); - padding-left: 15px; - border-left: 1px solid $primary-color; - } - &.active { - font-weight: 500; - padding-left: 14px; - border-left: 2px solid $primary-color; - } - } -} diff --git a/src/materialize/sass/components/_tabs.scss b/src/materialize/sass/components/_tabs.scss deleted file mode 100644 index 072d4b6..0000000 --- a/src/materialize/sass/components/_tabs.scss +++ /dev/null @@ -1,99 +0,0 @@ -.tabs { - &.tabs-transparent { - background-color: transparent; - - .tab a, - .tab.disabled a, - .tab.disabled a:hover { - color: rgba(255,255,255,0.7); - } - - .tab a:hover, - .tab a.active { - color: #fff; - } - - .indicator { - background-color: #fff; - } - } - - &.tabs-fixed-width { - display: flex; - - .tab { - flex-grow: 1; - } - } - - position: relative; - overflow-x: auto; - overflow-y: hidden; - height: 48px; - width: 100%; - background-color: $tabs-bg-color; - margin: 0 auto; - white-space: nowrap; - - .tab { - display: inline-block; - text-align: center; - line-height: 48px; - height: 48px; - padding: 0; - margin: 0; - text-transform: uppercase; - - a { - &:focus, - &:focus.active { - background-color: transparentize($tabs-underline-color, .8); - outline: none; - } - - &:hover, - &.active { - background-color: transparent; - color: $tabs-text-color; - } - - color: rgba($tabs-text-color, .7); - display: block; - width: 100%; - height: 100%; - padding: 0 24px; - font-size: 14px; - text-overflow: ellipsis; - overflow: hidden; - transition: color .28s ease, background-color .28s ease; - } - - &.disabled a, - &.disabled a:hover { - color: rgba($tabs-text-color, .4); - cursor: default; - } - } - .indicator { - position: absolute; - bottom: 0; - height: 2px; - background-color: $tabs-underline-color; - will-change: left, right; - } -} - -// Fixed Sidenav hide on smaller -@media #{$medium-and-down} { - .tabs { - display: flex; - - .tab { - flex-grow: 1; - - a { - padding: 0 12px; - } - } - } -} diff --git a/src/materialize/sass/components/_tapTarget.scss b/src/materialize/sass/components/_tapTarget.scss deleted file mode 100644 index c015f34..0000000 --- a/src/materialize/sass/components/_tapTarget.scss +++ /dev/null @@ -1,103 +0,0 @@ -.tap-target-wrapper { - width: 800px; - height: 800px; - position: fixed; - z-index: 1000; - visibility: hidden; - transition: visibility 0s .3s; -} - -.tap-target-wrapper.open { - visibility: visible; - transition: visibility 0s; - - .tap-target { - transform: scale(1); - opacity: .95; - transition: - transform .3s cubic-bezier(.42,0,.58,1), - opacity .3s cubic-bezier(.42,0,.58,1); - } - - .tap-target-wave::before { - transform: scale(1); - } - .tap-target-wave::after { - visibility: visible; - animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; - transition: - opacity .3s, - transform .3s, - visibility 0s 1s; - } -} - -.tap-target { - position: absolute; - font-size: 1rem; - border-radius: 50%; - background-color: $primary-color; - box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2); - width: 100%; - height: 100%; - opacity: 0; - transform: scale(0); - transition: - transform .3s cubic-bezier(.42,0,.58,1), - opacity .3s cubic-bezier(.42,0,.58,1); -} - -.tap-target-content { - position: relative; - display: table-cell; -} - -.tap-target-wave { - &::before, - &::after { - content: ''; - display: block; - position: absolute; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: #ffffff; - } - &::before { - transform: scale(0); - transition: transform .3s; - } - &::after { - visibility: hidden; - transition: - opacity .3s, - transform .3s, - visibility 0s; - z-index: -1; - } - - position: absolute; - border-radius: 50%; - z-index: 10001; -} - -.tap-target-origin { - &:not(.btn), - &:not(.btn):hover { - background: none; - } - - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - - z-index: 10002; - position: absolute !important; -} - -@media only screen and (max-width: 600px) { - .tap-target, .tap-target-wrapper { - width: 600px; - height: 600px; - } -} diff --git a/src/materialize/sass/components/_timepicker.scss b/src/materialize/sass/components/_timepicker.scss deleted file mode 100644 index fa602fb..0000000 --- a/src/materialize/sass/components/_timepicker.scss +++ /dev/null @@ -1,183 +0,0 @@ -/* Timepicker Containers */ -.timepicker-modal { - max-width: 325px; - max-height: none; -} - -.timepicker-container.modal-content { - display: flex; - flex-direction: column; - padding: 0; -} - -.text-primary { - color: rgba(255, 255, 255, 1); -} - - -/* Clock Digital Display */ -.timepicker-digital-display { - flex: 1 auto; - background-color: $secondary-color; - padding: 10px; - font-weight: 300; -} - -.timepicker-text-container { - font-size: 4rem; - font-weight: bold; - text-align: center; - color: rgba(255, 255, 255, 0.6); - font-weight: 400; - position: relative; - user-select: none; -} - -.timepicker-span-hours, -.timepicker-span-minutes, -.timepicker-span-am-pm div { - cursor: pointer; -} - -.timepicker-span-hours { - margin-right: 3px; -} - -.timepicker-span-minutes { - margin-left: 3px; -} - -.timepicker-display-am-pm { - font-size: 1.3rem; - position: absolute; - right: 1rem; - bottom: 1rem; - font-weight: 400; -} - - -/* Analog Clock Display */ -.timepicker-analog-display { - flex: 2.5 auto; -} - -.timepicker-plate { - background-color: $timepicker-clock-plate-bg; - border-radius: 50%; - width: 270px; - height: 270px; - overflow: visible; - position: relative; - margin: auto; - margin-top: 25px; - margin-bottom: 5px; - user-select: none; -} - -.timepicker-canvas, -.timepicker-dial { - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; -} -.timepicker-minutes { - visibility: hidden; -} - -.timepicker-tick { - border-radius: 50%; - color: $timepicker-clock-color; - line-height: 40px; - text-align: center; - width: 40px; - height: 40px; - position: absolute; - cursor: pointer; - font-size: 15px; -} - -.timepicker-tick.active, -.timepicker-tick:hover { - background-color: transparentize($secondary-color, .75); -} -.timepicker-dial { - transition: transform 350ms, opacity 350ms; -} -.timepicker-dial-out { - &.timepicker-hours { - transform: scale(1.1, 1.1); - } - - &.timepicker-minutes { - transform: scale(.8, .8); - } - - opacity: 0; -} -.timepicker-canvas { - transition: opacity 175ms; - - line { - stroke: $secondary-color; - stroke-width: 4; - stroke-linecap: round; - } -} -.timepicker-canvas-out { - opacity: 0.25; -} -.timepicker-canvas-bearing { - stroke: none; - fill: $secondary-color; -} -.timepicker-canvas-bg { - stroke: none; - fill: $secondary-color; -} - - -/* Footer */ -.timepicker-footer { - margin: 0 auto; - padding: 5px 1rem; - display: flex; - justify-content: space-between; -} - -.timepicker-clear { - color: $error-color; -} - -.timepicker-close { - color: $secondary-color; -} - -.timepicker-clear, -.timepicker-close { - padding: 0 20px; -} - -/* Media Queries */ -@media #{$medium-and-up} { - .timepicker-modal { - max-width: 600px; - } - - .timepicker-container.modal-content { - flex-direction: row; - } - - .timepicker-text-container { - top: 32%; - } - - .timepicker-display-am-pm { - position: relative; - right: auto; - bottom: auto; - text-align: center; - margin-top: 1.2rem; - } -} diff --git a/src/materialize/sass/components/_toast.scss b/src/materialize/sass/components/_toast.scss deleted file mode 100644 index 412400f..0000000 --- a/src/materialize/sass/components/_toast.scss +++ /dev/null @@ -1,58 +0,0 @@ -#toast-container { - display:block; - position: fixed; - z-index: 10000; - - @media #{$small-and-down} { - min-width: 100%; - bottom: 0%; - } - @media #{$medium-only} { - left: 5%; - bottom: 7%; - max-width: 90%; - } - @media #{$large-and-up} { - top: 10%; - right: 7%; - max-width: 86%; - } -} - -.toast { - @extend .z-depth-1; - border-radius: 2px; - top: 35px; - width: auto; - margin-top: 10px; - position: relative; - max-width:100%; - height: auto; - min-height: $toast-height; - line-height: 1.5em; - background-color: $toast-color; - padding: 10px 25px; - font-size: 1.1rem; - font-weight: 300; - color: $toast-text-color; - display: flex; - align-items: center; - justify-content: space-between; - cursor: default; - - .toast-action { - color: $toast-action-color; - font-weight: 500; - margin-right: -25px; - margin-left: 3rem; - } - - &.rounded{ - border-radius: 24px; - } - - @media #{$small-and-down} { - width: 100%; - border-radius: 0; - } -} diff --git a/src/materialize/sass/components/_tooltip.scss b/src/materialize/sass/components/_tooltip.scss deleted file mode 100644 index 5ec4299..0000000 --- a/src/materialize/sass/components/_tooltip.scss +++ /dev/null @@ -1,32 +0,0 @@ -.material-tooltip { - padding: 10px 8px; - font-size: 1rem; - z-index: 2000; - background-color: transparent; - border-radius: 2px; - color: #fff; - min-height: 36px; - line-height: 120%; - opacity: 0; - position: absolute; - text-align: center; - max-width: calc(100% - 4px); - overflow: hidden; - left: 0; - top: 0; - pointer-events: none; - visibility: hidden; - background-color: #323232; -} - -.backdrop { - position: absolute; - opacity: 0; - height: 7px; - width: 14px; - border-radius: 0 0 50% 50%; - background-color: #323232; - z-index: -1; - transform-origin: 50% 0%; - visibility: hidden; -} diff --git a/src/materialize/sass/components/_transitions.scss b/src/materialize/sass/components/_transitions.scss deleted file mode 100644 index 9c3660a..0000000 --- a/src/materialize/sass/components/_transitions.scss +++ /dev/null @@ -1,13 +0,0 @@ -// Scale transition -.scale-transition { - &.scale-out { - transform: scale(0); - transition: transform .2s !important; - } - - &.scale-in { - transform: scale(1); - } - - transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important; -} \ No newline at end of file diff --git a/src/materialize/sass/components/_typography.scss b/src/materialize/sass/components/_typography.scss deleted file mode 100644 index b9b93b3..0000000 --- a/src/materialize/sass/components/_typography.scss +++ /dev/null @@ -1,60 +0,0 @@ - -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: $font-stack; - font-weight: normal; - color: $off-black; -} -h1, h2, h3, h4, h5, h6 { - font-weight: 400; - line-height: 1.3; -} - -// 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 / 1.5) 0 ($h1-fontsize / 2.5) 0;} -h2 { font-size: $h2-fontsize; line-height: 110%; margin: ($h2-fontsize / 1.5) 0 ($h2-fontsize / 2.5) 0;} -h3 { font-size: $h3-fontsize; line-height: 110%; margin: ($h3-fontsize / 1.5) 0 ($h3-fontsize / 2.5) 0;} -h4 { font-size: $h4-fontsize; line-height: 110%; margin: ($h4-fontsize / 1.5) 0 ($h4-fontsize / 2.5) 0;} -h5 { font-size: $h5-fontsize; line-height: 110%; margin: ($h5-fontsize / 1.5) 0 ($h5-fontsize / 2.5) 0;} -h6 { font-size: $h6-fontsize; line-height: 110%; margin: ($h6-fontsize / 1.5) 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{ - $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/src/materialize/sass/components/_variables.scss b/src/materialize/sass/components/_variables.scss deleted file mode 100644 index 4c59c12..0000000 --- a/src/materialize/sass/components/_variables.scss +++ /dev/null @@ -1,349 +0,0 @@ -// ========================================================================== -// Materialize variables -// ========================================================================== -// -// Table of Contents: -// -// 1. Colors -// 2. Badges -// 3. Buttons -// 4. Cards -// 5. Carousel -// 6. Collapsible -// 7. Chips -// 8. Date + Time Picker -// 9. Dropdown -// 10. Forms -// 11. Global -// 12. Grid -// 13. Navigation Bar -// 14. Side Navigation -// 15. Photo Slider -// 16. Spinners | Loaders -// 17. Tabs -// 18. Tables -// 19. Toasts -// 20. Typography -// 21. Footer -// 22. Flow Text -// 23. Collections -// 24. Progress Bar - - - -// 1. 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; - - -// 2. Badges -// ========================================================================== - -$badge-bg-color: $secondary-color !default; -$badge-height: 22px !default; - - -// 3. Buttons -// ========================================================================== - -// Shared styles -$button-border: none !default; -$button-background-focus: lighten($secondary-color, 4%) !default; -$button-font-size: 14px !default; -$button-icon-font-size: 1.3rem !default; -$button-height: 36px !default; -$button-padding: 0 16px !default; -$button-radius: 2px !default; - -// Disabled styles -$button-disabled-background: #DFDFDF !default; -$button-disabled-color: #9F9F9F !default; - -// Raised buttons -$button-raised-background: $secondary-color !default; -$button-raised-background-hover: lighten($button-raised-background, 5%) !default; -$button-raised-color: #fff !default; - -// Large buttons -$button-large-font-size: 15px !default; -$button-large-icon-font-size: 1.6rem !default; -$button-large-height: $button-height * 1.5 !default; -$button-floating-large-size: 56px !default; - -// Small buttons -$button-small-font-size: 13px !default; -$button-small-icon-font-size: 1.2rem !default; -$button-small-height: $button-height * .9 !default; -$button-floating-small-size: $button-height * .9 !default; - -// Flat buttons -$button-flat-color: #343434 !default; -$button-flat-disabled-color: lighten(#999, 10%) !default; - -// Floating buttons -$button-floating-background: $secondary-color !default; -$button-floating-background-hover: $button-floating-background !default; -$button-floating-color: #fff !default; -$button-floating-size: 40px !default; -$button-floating-radius: 50% !default; - - -// 4. Cards -// ========================================================================== - -$card-padding: 24px !default; -$card-bg-color: #fff !default; -$card-link-color: color("orange", "accent-2") !default; -$card-link-color-light: lighten($card-link-color, 20%) !default; - - -// 5. Carousel -// ========================================================================== - -$carousel-height: 400px !default; -$carousel-item-height: $carousel-height / 2 !default; -$carousel-item-width: $carousel-item-height !default; - - -// 6. Collapsible -// ========================================================================== - -$collapsible-height: 3rem !default; -$collapsible-line-height: $collapsible-height !default; -$collapsible-header-color: #fff !default; -$collapsible-border-color: #ddd !default; - - -// 7. Chips -// ========================================================================== - -$chip-bg-color: #e4e4e4 !default; -$chip-border-color: #9e9e9e !default; -$chip-selected-color: #26a69a !default; -$chip-margin: 5px !default; - - -// 8. Date + Time Picker -// ========================================================================== - -$datepicker-display-font-size: 2.8rem; -$datepicker-calendar-header-color: #999; -$datepicker-weekday-color: rgba(0, 0, 0, .87) !default; -$datepicker-weekday-bg: darken($secondary-color, 7%) !default; -$datepicker-date-bg: $secondary-color !default; -$datepicker-year: rgba(255, 255, 255, .7) !default; -$datepicker-focus: rgba(0,0,0, .05) !default; -$datepicker-selected: $secondary-color !default; -$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%) !default; -$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75) !default; -$datepicker-disabled-day-color: rgba(0, 0, 0, .3) !default; - -$timepicker-clock-color: rgba(0, 0, 0, .87) !default; -$timepicker-clock-plate-bg: #eee !default; - - -// 9. Dropdown -// ========================================================================== - -$dropdown-bg-color: #fff !default; -$dropdown-hover-bg-color: #eee !default; -$dropdown-color: $secondary-color !default; -$dropdown-item-height: 50px !default; - - -// 10. Forms -// ========================================================================== - -// Text Inputs + Textarea -$input-height: 3rem !default; -$input-border-color: color("grey", "base") !default; -$input-border: 1px solid $input-border-color !default; -$input-background: #fff !default; -$input-error-color: $error-color !default; -$input-success-color: $success-color !default; -$input-focus-color: $secondary-color !default; -$input-font-size: 16px !default; -$input-margin-bottom: 8px; -$input-margin: 0 0 $input-margin-bottom 0 !default; -$input-padding: 0 !default; -$label-font-size: .8rem !default; -$input-disabled-color: rgba(0,0,0, .42) !default; -$input-disabled-solid-color: #949494 !default; -$input-disabled-border: 1px dotted $input-disabled-color !default; -$input-invalid-border: 1px solid $input-error-color !default; -$input-icon-size: 2rem; -$placeholder-text-color: lighten($input-border-color, 20%) !default; - -// Radio Buttons -$radio-fill-color: $secondary-color !default; -$radio-empty-color: #5a5a5a !default; -$radio-border: 2px solid $radio-fill-color !default; - -// Range -$range-height: 14px !default; -$range-width: 14px !default; -$track-height: 3px !default; - -// Select -$select-border: 1px solid #f2f2f2 !default; -$select-background: rgba(255, 255, 255, 0.90) !default; -$select-focus: 1px solid lighten($secondary-color, 47%) !default; -$select-option-hover: rgba(0,0,0,.08) !default; -$select-option-focus: rgba(0,0,0,.08) !default; -$select-option-selected: rgba(0,0,0,.03) !default; -$select-padding: 5px !default; -$select-radius: 2px !default; -$select-disabled-color: rgba(0,0,0,.3) !default; - -// Switches -$switch-bg-color: $secondary-color !default; -$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default; -$switch-unchecked-bg: #F1F1F1 !default; -$switch-unchecked-lever-bg: rgba(0,0,0,.38) !default; -$switch-radius: 15px !default; - - -// 11. 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; -$extra-large-and-up: "only screen and (min-width : #{$large-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; - - -// 12. Grid -// ========================================================================== - -$num-cols: 12 !default; -$gutter-width: 1.5rem !default; -$element-top-margin: $gutter-width/3 !default; -$element-bottom-margin: ($gutter-width*2)/3 !default; - - -// 13. Navigation Bar -// ========================================================================== - -$navbar-height: 64px !default; -$navbar-line-height: $navbar-height !default; -$navbar-height-mobile: 56px !default; -$navbar-line-height-mobile: $navbar-height-mobile !default; -$navbar-font-size: 1rem !default; -$navbar-font-color: #fff !default; -$navbar-brand-font-size: 2.1rem !default; - -// 14. Side Navigation -// ========================================================================== - -$sidenav-width: 300px !default; -$sidenav-font-size: 14px !default; -$sidenav-font-color: rgba(0,0,0,.87) !default; -$sidenav-bg-color: #fff !default; -$sidenav-padding: 16px !default; -$sidenav-item-height: 48px !default; -$sidenav-line-height: $sidenav-item-height !default; - - -// 15. 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; - - -// 16. Spinners | Loaders -// ========================================================================== - -$spinner-default-color: $secondary-color !default; - - -// 17. Tabs -// ========================================================================== - -$tabs-underline-color: $primary-color-light !default; -$tabs-text-color: $primary-color !default; -$tabs-bg-color: #fff !default; - - -// 18. Tables -// ========================================================================== - -$table-border-color: rgba(0,0,0,.12) !default; -$table-striped-color: rgba(242, 242, 242, 0.5) !default; - - -// 19. Toasts -// ========================================================================== - -$toast-height: 48px !default; -$toast-color: #323232 !default; -$toast-text-color: #fff !default; -$toast-action-color: #eeff41; - - -// 20. Typography -// ========================================================================== - -$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; -$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: 1.15rem !default; - - -// 21. Footer -// ========================================================================== - -$footer-font-color: #fff !default; -$footer-bg-color: $primary-color !default; -$footer-copyright-font-color: rgba(255,255,255,.8) !default; -$footer-copyright-bg-color: rgba(51,51,51,.08) !default; - - -// 22. Flow Text -// ========================================================================== - -$range : $large-screen - $small-screen !default; -$intervals: 20 !default; -$interval-size: $range / $intervals !default; - - -// 23. 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; -$collection-link-color: $secondary-color !default; -$collection-line-height: 1.5rem !default; - - -// 24. Progress Bar -// ========================================================================== - -$progress-bar-color: $secondary-color !default; diff --git a/src/materialize/sass/components/_waves.scss b/src/materialize/sass/components/_waves.scss deleted file mode 100644 index 5a3229b..0000000 --- a/src/materialize/sass/components/_waves.scss +++ /dev/null @@ -1,114 +0,0 @@ - -/*! - * 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; - user-select: none; - -webkit-tap-highlight-color: transparent; - vertical-align: middle; - z-index: 1; - transition: .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); - transition: all 0.7s ease-out; - transition-property: transform, opacity; - 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); - } - - // Style input button bug. - input[type="button"], input[type="reset"], input[type="submit"] { - border: 0; - font-style: normal; - font-size: inherit; - text-transform: inherit; - background: none; - } - - img { - position: relative; - z-index: -1; - } -} - -.waves-notransition { - transition: none #{"!important"}; -} - -.waves-circle { - transform: translateZ(0); - -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); -} - -.waves-input-wrapper { - border-radius: 0.2em; - vertical-align: bottom; - - .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-block { - display: block; -} - -/* Firefox Bug: link not triggered */ -.waves-effect .waves-ripple { - z-index: -1; -} \ No newline at end of file diff --git a/src/materialize/sass/components/forms/_checkboxes.scss b/src/materialize/sass/components/forms/_checkboxes.scss deleted file mode 100644 index ddc7d96..0000000 --- a/src/materialize/sass/components/forms/_checkboxes.scss +++ /dev/null @@ -1,200 +0,0 @@ -/* Checkboxes - ========================================================================== */ - -/* Remove default checkbox */ -[type="checkbox"]:not(:checked), -[type="checkbox"]:checked { - position: absolute; - opacity: 0; - pointer-events: none; -} - -// Checkbox Styles -[type="checkbox"] { - // Text Label Style - + span:not(.lever) { - position: relative; - padding-left: 35px; - cursor: pointer; - display: inline-block; - height: 25px; - line-height: 25px; - font-size: 1rem; - user-select: none; - } - - /* checkbox aspect */ - + span:not(.lever):before, - &:not(.filled-in) + span:not(.lever):after { - 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: 3px; - transition: .2s; - } - - &:not(.filled-in) + span:not(.lever):after { - border: 0; - transform: scale(0); - } - - &:not(:checked):disabled + span:not(.lever):before { - border: none; - background-color: $input-disabled-color; - } - - // Focused styles - &.tabbed:focus + span:not(.lever):after { - transform: scale(1); - border: 0; - border-radius: 50%; - box-shadow: 0 0 0 10px rgba(0,0,0,.1); - background-color: rgba(0,0,0,.1); - } -} - -[type="checkbox"]:checked { - + span:not(.lever):before { - top: -4px; - left: -5px; - width: 12px; - height: 22px; - border-top: 2px solid transparent; - border-left: 2px solid transparent; - border-right: $radio-border; - border-bottom: $radio-border; - transform: rotate(40deg); - backface-visibility: hidden; - transform-origin: 100% 100%; - } - - &:disabled + span:before { - border-right: 2px solid $input-disabled-color; - border-bottom: 2px solid $input-disabled-color; - } -} - -/* Indeterminate checkbox */ -[type="checkbox"]:indeterminate { - + span:not(.lever):before { - top: -11px; - left: -12px; - width: 10px; - height: 22px; - border-top: none; - border-left: none; - border-right: $radio-border; - border-bottom: none; - transform: rotate(90deg); - backface-visibility: hidden; - transform-origin: 100% 100%; - } - - // Disabled indeterminate - &:disabled + span:not(.lever):before { - border-right: 2px solid $input-disabled-color; - background-color: transparent; - } -} - -// Filled in Style -[type="checkbox"].filled-in { - // General - + span:not(.lever):after { - border-radius: 2px; - } - - + span:not(.lever):before, - + span:not(.lever):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) + span:not(.lever):before { - width: 0; - height: 0; - border: 3px solid transparent; - left: 6px; - top: 10px; - transform: rotateZ(37deg); - transform-origin: 100% 100%; - } - - &:not(:checked) + span:not(.lever):after { - height: 20px; - width: 20px; - background-color: transparent; - border: 2px solid $radio-empty-color; - top: 0px; - z-index: 0; - } - - // Checked style - &:checked { - + span:not(.lever):before { - top: 0; - left: 1px; - width: 8px; - height: 13px; - border-top: 2px solid transparent; - border-left: 2px solid transparent; - border-right: 2px solid $input-background; - border-bottom: 2px solid $input-background; - transform: rotateZ(37deg); - transform-origin: 100% 100%; - } - - + span:not(.lever):after { - top: 0; - width: 20px; - height: 20px; - border: 2px solid $secondary-color; - background-color: $secondary-color; - z-index: 0; - } - } - - // Focused styles - &.tabbed:focus + span:not(.lever):after { - border-radius: 2px; - border-color: $radio-empty-color; - background-color: rgba(0,0,0,.1); - } - - &.tabbed:checked:focus + span:not(.lever):after { - border-radius: 2px; - background-color: $secondary-color; - border-color: $secondary-color; - } - - // Disabled style - &:disabled:not(:checked) + span:not(.lever):before { - background-color: transparent; - border: 2px solid transparent; - } - - &:disabled:not(:checked) + span:not(.lever):after { - border-color: transparent; - background-color: $input-disabled-solid-color; - } - - &:disabled:checked + span:not(.lever):before { - background-color: transparent; - } - - &:disabled:checked + span:not(.lever):after { - background-color: $input-disabled-solid-color; - border-color: $input-disabled-solid-color; - } -} diff --git a/src/materialize/sass/components/forms/_file-input.scss b/src/materialize/sass/components/forms/_file-input.scss deleted file mode 100644 index e2becc9..0000000 --- a/src/materialize/sass/components/forms/_file-input.scss +++ /dev/null @@ -1,44 +0,0 @@ -/* File Input - ========================================================================== */ - -.file-field { - position: relative; - - .file-path-wrapper { - overflow: hidden; - padding-left: 10px; - } - - input.file-path { width: 100%; } - - .btn { - float: left; - height: $input-height; - line-height: $input-height; - } - - span { - cursor: pointer; - } - - input[type=file] { - - // Needed to override webkit button - &::-webkit-file-upload-button { - display: none; - } - - 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); - } -} diff --git a/src/materialize/sass/components/forms/_forms.scss b/src/materialize/sass/components/forms/_forms.scss deleted file mode 100644 index e9b65b4..0000000 --- a/src/materialize/sass/components/forms/_forms.scss +++ /dev/null @@ -1,22 +0,0 @@ -// Remove Focus Boxes -select:focus { - outline: $select-focus; -} - -button:focus { - outline: none; - background-color: $button-background-focus; -} - -label { - font-size: $label-font-size; - color: $input-border-color; -} - -@import 'input-fields'; -@import 'radio-buttons'; -@import 'checkboxes'; -@import 'switches'; -@import 'select'; -@import 'file-input'; -@import 'range'; diff --git a/src/materialize/sass/components/forms/_input-fields.scss b/src/materialize/sass/components/forms/_input-fields.scss deleted file mode 100644 index f18c2f8..0000000 --- a/src/materialize/sass/components/forms/_input-fields.scss +++ /dev/null @@ -1,354 +0,0 @@ -/* Text Inputs + Textarea - ========================================================================== */ - -/* Style Placeholders */ - -::placeholder { - color: $placeholder-text-color; -} - -/* Text inputs */ - -input:not([type]), -input[type=text]:not(.browser-default), -input[type=password]:not(.browser-default), -input[type=email]:not(.browser-default), -input[type=url]:not(.browser-default), -input[type=time]:not(.browser-default), -input[type=date]:not(.browser-default), -input[type=datetime]:not(.browser-default), -input[type=datetime-local]:not(.browser-default), -input[type=tel]:not(.browser-default), -input[type=number]:not(.browser-default), -input[type=search]:not(.browser-default), -textarea.materialize-textarea { - - // General Styles - background-color: transparent; - border: none; - border-bottom: $input-border; - border-radius: 0; - outline: none; - height: $input-height; - width: 100%; - font-size: $input-font-size; - margin: $input-margin; - padding: $input-padding; - box-shadow: none; - box-sizing: content-box; - transition: box-shadow .3s, border .3s; - - // Disabled input style - &:disabled, - &[readonly="readonly"] { - color: $input-disabled-color; - border-bottom: $input-disabled-border; - } - - // 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; - } - - // Hide helper text on data message - &.valid ~ .helper-text[data-success], - &:focus.valid ~ .helper-text[data-success], - &.invalid ~ .helper-text[data-error], - &:focus.invalid ~ .helper-text[data-error] { - @extend %hidden-text; - } - - // Valid Input Style - &.valid, - &:focus.valid { - @extend %valid-input-style; - } - - // Custom Success Message - &.valid ~ .helper-text:after, - &:focus.valid ~ .helper-text:after { - @extend %custom-success-message; - } - &:focus.valid ~ label { - color: $input-success-color; - } - - // Invalid Input Style - &.invalid, - &:focus.invalid { - @extend %invalid-input-style; - } - - // Custom Error message - &.invalid ~ .helper-text:after, - &:focus.invalid ~ .helper-text:after { - @extend %custom-error-message; - } - &:focus.invalid ~ label { - color: $input-error-color; - } - - // Full width label when using validate for error messages - &.validate + label { - width: 100%; - } - - // Form Message Shared Styles - & + label:after { - @extend %input-after-style; - } -} - - -/* Validation Sass Placeholders */ -%valid-input-style { - border-bottom: 1px solid $input-success-color; - box-shadow: 0 1px 0 0 $input-success-color; -} -%invalid-input-style { - border-bottom: $input-invalid-border; - box-shadow: 0 1px 0 0 $input-error-color; -} -%hidden-text { - color: transparent; - user-select: none; - pointer-events: none; -} -%custom-success-message { - content: attr(data-success); - color: $input-success-color; -} -%custom-error-message { - content: attr(data-error); - color: $input-error-color; -} -%input-after-style { - display: block; - content: ""; - position: absolute; - top: 100%; - left: 0; - opacity: 0; - transition: .2s opacity ease-out, .2s color ease-out; -} - - -// Styling for input field wrapper -.input-field { - // Inline styles - &.inline { - display: inline-block; - vertical-align: middle; - margin-left: 5px; - - input, - .select-dropdown { - margin-bottom: 1rem; - } - } - - // Gutter spacing - &.col { - label { - left: $gutter-width / 2; - } - - .prefix ~ label, - .prefix ~ .validate ~ label { - width: calc(100% - 3rem - #{$gutter-width}); - } - } - - position: relative; - margin-top: 1rem; - margin-bottom: 1rem; - - & > label { - color: $input-border-color; - position: absolute; - top: 0; - left: 0; - font-size: 1rem; - cursor: text; - transition: transform .2s ease-out, color .2s ease-out; - transform-origin: 0% 100%; - text-align: initial; - transform: translateY(12px); - - &:not(.label-icon).active { - transform: translateY(-14px) scale(.8); - transform-origin: 0 0; - } - } - - // Autofill + date + time inputs - & > input[type]:-webkit-autofill:not(.browser-default):not([type="search"]) + label, - & > input[type=date]:not(.browser-default) + label, - & > input[type=time]:not(.browser-default) + label { - transform: translateY(-14px) scale(.8); - transform-origin: 0 0; - } - - .helper-text { - &::after { - opacity: 1; - position: absolute; - top: 0; - left: 0; - } - - position: relative; - min-height: 18px; - display: block; - font-size: 12px; - color: rgba(0,0,0,.54); - } - - // Prefix Icons - .prefix { - position: absolute; - width: $input-height; - font-size: $input-icon-size; - transition: color .2s; - top: ($input-height - $input-icon-size) / 2; - - &.active { color: $input-focus-color; } - } - - .prefix ~ input, - .prefix ~ textarea, - .prefix ~ label, - .prefix ~ .validate ~ label, - .prefix ~ .helper-text, - .prefix ~ .autocomplete-content { - margin-left: 3rem; - width: 92%; - width: calc(100% - 3rem); - } - - .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; - transition: .3s background-color; - - .nav-wrapper & { - height: inherit; - padding-left: 4rem; - width: calc(100% - 4rem); - border: 0; - box-shadow: none; - } - - &:focus:not(.browser-default) { - background-color: $input-background; - border: 0; - box-shadow: none; - color: #444; - - & + label i, - & ~ .mdi-navigation-close, - & ~ .material-icons { - color: #444; - } - } - - & + .label-icon { - transform: none; - left: 1rem; - } - - & ~ .mdi-navigation-close, - & ~ .material-icons { - position: absolute; - top: 0; - right: 1rem; - color: transparent; - cursor: pointer; - font-size: $input-icon-size; - transition: .3s color; - } -} - - -/* Textarea */ - -// Default textarea -textarea { - width: 100%; - height: $input-height; - background-color: transparent; - - &.materialize-textarea { - line-height: normal; - overflow-y: hidden; /* prevents scroll bar flash */ - padding: .8rem 0 .8rem 0; /* prevents text jump on Enter keypress */ - resize: none; - min-height: $input-height; - box-sizing: border-box; - } -} - -// For textarea autoresize -.hiddendiv { - visibility: hidden; - 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 */ - - // Reduces repaints - position: absolute; - top: 0; - z-index: -1; -} - - -/* Autocomplete */ -.autocomplete-content { - li { - .highlight { color: #444; } - - img { - height: $dropdown-item-height - 10; - width: $dropdown-item-height - 10; - margin: 5px 15px; - } - } -} - -/* Character Counter */ -.character-counter { - min-height: 18px; -} diff --git a/src/materialize/sass/components/forms/_radio-buttons.scss b/src/materialize/sass/components/forms/_radio-buttons.scss deleted file mode 100644 index c9f7296..0000000 --- a/src/materialize/sass/components/forms/_radio-buttons.scss +++ /dev/null @@ -1,115 +0,0 @@ -/* Radio Buttons - ========================================================================== */ - -// Remove default Radio Buttons -[type="radio"]:not(:checked), -[type="radio"]:checked { - position: absolute; - opacity: 0; - pointer-events: none; -} - -[type="radio"]:not(:checked) + span, -[type="radio"]:checked + span { - position: relative; - padding-left: 35px; - cursor: pointer; - display: inline-block; - height: 25px; - line-height: 25px; - font-size: 1rem; - transition: .28s ease; - user-select: none; -} - -[type="radio"] + span:before, -[type="radio"] + span:after { - content: ''; - position: absolute; - left: 0; - top: 0; - margin: 4px; - width: 16px; - height: 16px; - z-index: 0; - transition: .28s ease; -} - -/* Unchecked styles */ -[type="radio"]:not(:checked) + span:before, -[type="radio"]:not(:checked) + span:after, -[type="radio"]:checked + span:before, -[type="radio"]:checked + span:after, -[type="radio"].with-gap:checked + span:before, -[type="radio"].with-gap:checked + span:after { - border-radius: 50%; -} - -[type="radio"]:not(:checked) + span:before, -[type="radio"]:not(:checked) + span:after { - border: 2px solid $radio-empty-color; -} - -[type="radio"]:not(:checked) + span:after { - transform: scale(0); -} - -/* Checked styles */ -[type="radio"]:checked + span:before { - border: 2px solid transparent; -} - -[type="radio"]:checked + span:after, -[type="radio"].with-gap:checked + span:before, -[type="radio"].with-gap:checked + span:after { - border: $radio-border; -} - -[type="radio"]:checked + span:after, -[type="radio"].with-gap:checked + span:after { - background-color: $radio-fill-color; -} - -[type="radio"]:checked + span:after { - transform: scale(1.02); -} - -/* Radio With gap */ -[type="radio"].with-gap:checked + span:after { - transform: scale(.5); -} - -/* Focused styles */ -[type="radio"].tabbed:focus + span:before { - box-shadow: 0 0 0 10px rgba(0,0,0,.1); -} - -/* Disabled Radio With gap */ -[type="radio"].with-gap:disabled:checked + span:before { - border: 2px solid $input-disabled-color; -} - -[type="radio"].with-gap:disabled:checked + span:after { - border: none; - background-color: $input-disabled-color; -} - -/* Disabled style */ -[type="radio"]:disabled:not(:checked) + span:before, -[type="radio"]:disabled:checked + span:before { - background-color: transparent; - border-color: $input-disabled-color; -} - -[type="radio"]:disabled + span { - color: $input-disabled-color; -} - -[type="radio"]:disabled:not(:checked) + span:before { - border-color: $input-disabled-color; -} - -[type="radio"]:disabled:checked + span:after { - background-color: $input-disabled-color; - border-color: $input-disabled-solid-color; -} diff --git a/src/materialize/sass/components/forms/_range.scss b/src/materialize/sass/components/forms/_range.scss deleted file mode 100644 index 18607f5..0000000 --- a/src/materialize/sass/components/forms/_range.scss +++ /dev/null @@ -1,161 +0,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 0; - padding: 0; - - &:focus { - outline: none; - } -} - -input[type=range] + .thumb { - position: absolute; - top: 10px; - left: 0; - border: none; - height: 0; - width: 0; - border-radius: 50%; - background-color: $radio-fill-color; - margin-left: 7px; - - transform-origin: 50% 50%; - transform: rotate(-45deg); - - .value { - display: block; - width: 30px; - text-align: center; - color: $radio-fill-color; - font-size: 0; - transform: rotate(45deg); - } - - &.active { - border-radius: 50% 50% 50% 0; - - .value { - color: $input-background; - margin-left: -1px; - margin-top: 8px; - font-size: 10px; - } - } -} - -// Shared -@mixin range-track { - height: $track-height; - background: #c2c0c2; - border: none; -} - -@mixin range-thumb { - border: none; - height: $range-height; - width: $range-width; - border-radius: 50%; - background: $radio-fill-color; - transition: box-shadow .3s; -} - -// WebKit -input[type=range] { - -webkit-appearance: none; -} - -input[type=range]::-webkit-slider-runnable-track { - @include range-track; -} - -input[type=range]::-webkit-slider-thumb { - @include range-thumb; - -webkit-appearance: none; - background-color: $radio-fill-color; - transform-origin: 50% 50%; - margin: -5px 0 0 0; - -} - -.keyboard-focused input[type=range]:focus:not(.active)::-webkit-slider-thumb { - box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); -} - -// 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 { - @include range-track; -} - -input[type=range]::-moz-focus-inner { - border: 0; -} - -input[type=range]::-moz-range-thumb { - @include range-thumb; - margin-top: -5px; -} - -// hide the outline behind the border -input[type=range]:-moz-focusring { - outline: 1px solid #fff; - outline-offset: -1px; -} - -.keyboard-focused input[type=range]:focus:not(.active)::-moz-range-thumb { - box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); -} - -// IE 10+ -input[type=range]::-ms-track { - height: $track-height; - - // 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 { - @include range-thumb; -} - -.keyboard-focused input[type=range]:focus:not(.active)::-ms-thumb { - box-shadow: 0 0 0 10px rgba($radio-fill-color, .26); -} diff --git a/src/materialize/sass/components/forms/_select.scss b/src/materialize/sass/components/forms/_select.scss deleted file mode 100644 index 2fd04d3..0000000 --- a/src/materialize/sass/components/forms/_select.scss +++ /dev/null @@ -1,180 +0,0 @@ -/* Select Field - ========================================================================== */ - -select { display: none; } -select.browser-default { display: block; } - -select { - background-color: $select-background; - width: 100%; - padding: $select-padding; - border: $select-border; - border-radius: $select-radius; - height: $input-height; -} - -.select-label { - position: absolute; -} - -.select-wrapper { - &.valid .helper-text[data-success], - &.invalid ~ .helper-text[data-error] { - @extend %hidden-text; - } - - &.valid { - & > input.select-dropdown { - @extend %valid-input-style; - } - - & ~ .helper-text:after { - @extend %custom-success-message; - } - } - - &.invalid { - & > input.select-dropdown, - & > input.select-dropdown:focus { - @extend %invalid-input-style; - } - - & ~ .helper-text:after { - @extend %custom-error-message; - } - } - - &.valid + label, - &.invalid + label { - width: 100%; - pointer-events: none; - } - - & + label:after { - @extend %input-after-style; - } - - position: relative; - - input.select-dropdown { - &:focus { - border-bottom: 1px solid $input-focus-color; - } - position: relative; - cursor: pointer; - background-color: transparent; - border: none; - border-bottom: $input-border; - outline: none; - height: $input-height; - line-height: $input-height; - width: 100%; - font-size: $input-font-size; - margin: $input-margin; - padding: 0; - display: block; - user-select:none; - z-index: 1; - } - - .caret { - position: absolute; - right: 0; - top: 0; - bottom: 0; - margin: auto 0; - z-index: 0; - fill: rgba(0,0,0,.87); - } - - & + label { - position: absolute; - top: -26px; - font-size: $label-font-size; - } -} - -// Disabled styles -select:disabled { - color: $input-disabled-color; -} - -.select-wrapper.disabled { - + label { - color: $input-disabled-color; - } - .caret { - fill: $input-disabled-color; - } -} - -.select-wrapper input.select-dropdown:disabled { - color: $input-disabled-color; - cursor: default; - user-select: none; -} - -.select-wrapper i { - color: $select-disabled-color; -} - -.select-dropdown li.disabled, -.select-dropdown li.disabled > span, -.select-dropdown li.optgroup { - color: $select-disabled-color; - background-color: transparent; -} - -body.keyboard-focused { - .select-dropdown.dropdown-content li:focus { - background-color: $select-option-focus; - } -} - -.select-dropdown.dropdown-content { - li { - &:hover { - background-color: $select-option-hover; - } - - &.selected { - background-color: $select-option-selected; - } - } -} - -// Prefix Icons -.prefix ~ .select-wrapper { - margin-left: 3rem; - width: 92%; - width: calc(100% - 3rem); -} - -.prefix ~ label { margin-left: 3rem; } - -// Icons -.select-dropdown li { - img { - height: $dropdown-item-height - 10; - width: $dropdown-item-height - 10; - margin: 5px 15px; - float: right; - } -} - -// Optgroup styles -.select-dropdown li.optgroup { - border-top: 1px solid $dropdown-hover-bg-color; - - &.selected > span { - color: rgba(0, 0, 0, .7); - } - - & > span { - color: rgba(0, 0, 0, .4); - } - - & ~ li.optgroup-option { - padding-left: 1rem; - } -} diff --git a/src/materialize/sass/components/forms/_switches.scss b/src/materialize/sass/components/forms/_switches.scss deleted file mode 100644 index 5976779..0000000 --- a/src/materialize/sass/components/forms/_switches.scss +++ /dev/null @@ -1,89 +0,0 @@ -/* Switch - ========================================================================== */ - -.switch, -.switch * { - -webkit-tap-highlight-color: transparent; - user-select: none; -} - -.switch label { - cursor: pointer; -} - -.switch label input[type=checkbox] { - opacity: 0; - width: 0; - height: 0; - - &:checked + .lever { - background-color: $switch-checked-lever-bg; - - &:before, &:after { - left: 18px; - } - - &:after { - background-color: $switch-bg-color; - } - } -} - -.switch label .lever { - content: ""; - display: inline-block; - position: relative; - width: 36px; - height: 14px; - background-color: $switch-unchecked-lever-bg; - border-radius: $switch-radius; - margin-right: 10px; - transition: background 0.3s ease; - vertical-align: middle; - margin: 0 16px; - - &:before, &:after { - content: ""; - position: absolute; - display: inline-block; - width: 20px; - height: 20px; - border-radius: 50%; - left: 0; - top: -3px; - transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease; - } - - &:before { - background-color: transparentize($switch-bg-color, .85); - } - - &:after { - background-color: $switch-unchecked-bg; - box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); - } -} - -// Switch active style -input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before, -input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before { - transform: scale(2.4); - background-color: transparentize($switch-bg-color, .85); -} - -input[type=checkbox]:not(:disabled) ~ .lever:active:before, -input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before { - transform: scale(2.4); - background-color: rgba(0,0,0,.08); -} - -// Disabled Styles -.switch input[type=checkbox][disabled] + .lever { - cursor: default; - background-color: rgba(0,0,0,.12); -} - -.switch label input[type=checkbox][disabled] + .lever:after, -.switch label input[type=checkbox][disabled]:checked + .lever:after { - background-color: $input-disabled-solid-color; -} diff --git a/src/materialize/sass/materialize.scss b/src/materialize/sass/materialize.scss deleted file mode 100644 index 6a51657..0000000 --- a/src/materialize/sass/materialize.scss +++ /dev/null @@ -1,41 +0,0 @@ -@charset "UTF-8"; - -// Color -@import "components/color-variables"; -@import "components/color-classes"; - -// Variables; -@import "components/variables"; - -// Reset -@import "components/normalize"; - -// components -@import "components/global"; -@import "components/badges"; -@import "components/icons-material-design"; -@import "components/grid"; -@import "components/navbar"; -@import "components/typography"; -@import "components/transitions"; -@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/chips"; -@import "components/materialbox"; -@import "components/forms/forms"; -@import "components/table_of_contents"; -@import "components/sidenav"; -@import "components/preloader"; -@import "components/slider"; -@import "components/carousel"; -@import "components/tapTarget"; -@import "components/pulse"; -@import "components/datepicker"; -@import "components/timepicker";