diff --git a/scss/_cards.scss b/scss/_cards.scss new file mode 100644 index 0000000..6d85ce7 --- /dev/null +++ b/scss/_cards.scss @@ -0,0 +1,25 @@ +// Styling for custom cards +// Custom class for the background icon in card blocks +.card-body-icon { + position: absolute; + z-index: 0; + top: -1.25rem; + right: -1rem; + opacity: 0.4; + + font-size: 5rem; + @include rotate; +} + +// Override breakpoints for card columns to work well with sidebar layout +.card-columns { + @media (min-width: 576px) { + column-count: 1; + } + @media (min-width: 768px) { + column-count: 2; + } + @media (min-width: 1200px) { + column-count: 2; + } +} diff --git a/scss/_footer.scss b/scss/_footer.scss new file mode 100644 index 0000000..ed83d43 --- /dev/null +++ b/scss/_footer.scss @@ -0,0 +1,27 @@ +footer.sticky-footer { + display: flex; + position: absolute; + right: 0; + bottom: 0; + width: calc(100% - #{$sidebar-collapsed-width}); + height: $sticky-footer-height; + background-color: $gray-200; + .copyright { + line-height: 1; + font-size: 0.8rem; + } + @media (min-width: 768px) { + width: calc(100% - #{$sidebar-base-width}); + } +} + +body.sidebar-toggled { + footer.sticky-footer { + width: 100%; + } + @media (min-width: 768px) { + footer.sticky-footer { + width: calc(100% - #{$sidebar-collapsed-width}); + } + } +} diff --git a/scss/_global.scss b/scss/_global.scss new file mode 100644 index 0000000..755bffb --- /dev/null +++ b/scss/_global.scss @@ -0,0 +1,66 @@ +// Global styling for this template + +html { + position: relative; + min-height: 100%; +} + +body { + height: 100%; +} + +#wrapper { + display: flex; + #content-wrapper { + overflow-x: hidden; + width: 100%; + padding-top: 1rem; + padding-bottom: $sticky-footer-height; + } +} +// Fixed Nav Option +body.fixed-nav { + #content-wrapper { + margin-top: $navbar-base-height; + padding-left: $sidebar-collapsed-width; + } + &.sidebar-toggled { + #content-wrapper { + padding-left: 0; + } + } + @media(min-width: 768px) { + #content-wrapper { + padding-left: $sidebar-base-width; + } + &.sidebar-toggled { + #content-wrapper { + padding-left: $sidebar-collapsed-width; + } + } + } +} + +// Scroll to top button +.scroll-to-top { + position: fixed; + right: 15px; + bottom: 15px; + display: none; + width: 50px; + height: 50px; + text-align: center; + color: $white; + background: fade-out($gray-800, .5); + line-height: 46px; + &:focus, + &:hover { + color: white; + } + &:hover { + background: $gray-800; + } + i { + font-weight: 800; + } +} diff --git a/scss/_login.scss b/scss/_login.scss new file mode 100644 index 0000000..c476333 --- /dev/null +++ b/scss/_login.scss @@ -0,0 +1,69 @@ +:root { + --input-padding-x: 0.75rem; + --input-padding-y: 0.75rem; +} + +.card-login { + max-width: 25rem; +} + +.card-register { + max-width: 40rem; +} + +.form-label-group { + position: relative; +} + +.form-label-group > input, +.form-label-group > label { + padding: var(--input-padding-y) var(--input-padding-x); + height: auto; +} + +.form-label-group > label { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + margin-bottom: 0; + /* Override default `