diff --git a/app/client/src/img/.gitkeep b/app/client/src/img/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/app/client/src/img/icon-cfpb.png b/app/client/src/img/icon-cfpb.png deleted file mode 100644 index eddc461..0000000 Binary files a/app/client/src/img/icon-cfpb.png and /dev/null differ diff --git a/app/client/src/img/icon-lender.png b/app/client/src/img/icon-lender.png deleted file mode 100644 index ea52e0c..0000000 Binary files a/app/client/src/img/icon-lender.png and /dev/null differ diff --git a/app/client/src/img/logo.png b/app/client/src/img/logo.png deleted file mode 100644 index d8bbf58..0000000 Binary files a/app/client/src/img/logo.png and /dev/null differ diff --git a/app/client/src/scss/_components/_ui.bootstrap.scss b/app/client/src/scss/_components/_ui.bootstrap.scss new file mode 100644 index 0000000..c5b4dd3 --- /dev/null +++ b/app/client/src/scss/_components/_ui.bootstrap.scss @@ -0,0 +1,35 @@ +// Bootstrap +@import "~bootstrap/scss/root"; +@import "~bootstrap/scss/reboot"; +@import "~bootstrap/scss/type"; +@import "~bootstrap/scss/images"; +@import "~bootstrap/scss/code"; +@import "~bootstrap/scss/grid"; +@import "~bootstrap/scss/tables"; +@import "~bootstrap/scss/forms"; +@import "~bootstrap/scss/buttons"; +@import "~bootstrap/scss/transitions"; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/button-group"; +@import "~bootstrap/scss/input-group"; +@import "~bootstrap/scss/custom-forms"; +@import "~bootstrap/scss/nav"; +@import "~bootstrap/scss/navbar"; +@import "~bootstrap/scss/card"; +@import "~bootstrap/scss/breadcrumb"; +@import "~bootstrap/scss/pagination"; +@import "~bootstrap/scss/badge"; +@import "~bootstrap/scss/jumbotron"; +@import "~bootstrap/scss/alert"; +@import "~bootstrap/scss/progress"; +@import "~bootstrap/scss/media"; +@import "~bootstrap/scss/list-group"; +@import "~bootstrap/scss/close"; +@import "~bootstrap/scss/modal"; +@import "~bootstrap/scss/tooltip"; +@import "~bootstrap/scss/popover"; +@import "~bootstrap/scss/carousel"; +@import "~bootstrap/scss/utilities"; +@import "~bootstrap/scss/print"; + +@import "_ui.carousel"; diff --git a/app/client/src/scss/_components/_ui.carousel.scss b/app/client/src/scss/_components/_ui.carousel.scss index 085366d..3d3c1f2 100644 --- a/app/client/src/scss/_components/_ui.carousel.scss +++ b/app/client/src/scss/_components/_ui.carousel.scss @@ -1,19 +1,24 @@ +/* + * Bootstrap carousel improvement + */ + .carousel-control-prev, .carousel-control-next { - z-index: 2; - font-size: 3rem; - text-shadow: 1px 1px #000; - &:hover, - &:focus { - background: rgba(0, 0, 0, 0.6); - } + z-index: 2; + font-size: 3rem; + text-shadow: 1px 1px #000; + + &:hover, + &:focus { + background: rgba(0, 0, 0, 0.6); + } } .carousel-indicators li { - box-shadow: 1px 1px #000; + box-shadow: 1px 1px #000; } .carousel-title, .carousel-content { - text-shadow: 1px 1px #000; -} \ No newline at end of file + text-shadow: 1px 1px #000; +} diff --git a/app/client/src/scss/_components/_ui.elemental.scss b/app/client/src/scss/_components/_ui.elemental.scss new file mode 100644 index 0000000..5bec13f --- /dev/null +++ b/app/client/src/scss/_components/_ui.elemental.scss @@ -0,0 +1,28 @@ +/* + * Basic styles for silverstripe-elemental + */ + +// hide default page title cuz elemental object will be used to display titles +h1 { + display: none; +} + +// add top/bottom paddings for basic elements +.page-content > .element { + position: relative; + padding: ($grid-gutter-height / 2) 0; + + // remove paddings of the slideshow + &.dynamic__elements__image__elements__elementimage, + &.dynamic__elements__flexslider__elements__elementslideshow { + padding: 0; + } +} + +// remove container paddings for the slideshow +.dynamic__elements__image__elements__elementimage, +.dynamic__elements__flexslider__elements__elementslideshow { + .container-fluid { + padding: 0; + } +} diff --git a/app/client/src/scss/_components/_ui.fontawesome.scss b/app/client/src/scss/_components/_ui.fontawesome.scss new file mode 100644 index 0000000..b5c3c8d --- /dev/null +++ b/app/client/src/scss/_components/_ui.fontawesome.scss @@ -0,0 +1,3 @@ +$fa-font-path: "~font-awesome/fonts"; + +@import "~font-awesome/scss/font-awesome"; diff --git a/app/client/src/scss/_components/_ui.lightbox.scss b/app/client/src/scss/_components/_ui.lightbox.scss new file mode 100644 index 0000000..e484209 --- /dev/null +++ b/app/client/src/scss/_components/_ui.lightbox.scss @@ -0,0 +1,5 @@ +$lightbox-breakpoint: map-get($grid-breakpoints, "sm"); +$lightbox-link-hover-color: $link-hover-color; + +@import "~meta-lightbox/scss/meta-lightbox"; +@import "~meta-lightbox/scss/meta-lightbox-theme"; diff --git a/app/client/src/scss/_components/_ui.main.scss b/app/client/src/scss/_components/_ui.main.scss new file mode 100644 index 0000000..a077118 --- /dev/null +++ b/app/client/src/scss/_components/_ui.main.scss @@ -0,0 +1,63 @@ +/* + * some basic styles + */ + +// don't let images be wider than the parent layer +iframe, +img { + max-width: 100%; +} + +a:hover, +a:focus { + opacity: .8; + + .fas, + .fab, + &.fas, + &.fab { + transform: rotate(-180deg); + } +} + +// transactions +.transition, +a, a img, +a .fas, a .fab, +a.fas, a.fab, +button, input, optgroup, select, textarea, +.btn, +.alert, +.dropdown, +[data-target], +.container, +.container-fluid, +.row, +[class="col-*"] { + transition: all 0.4s ease; +} + +// stick navbar to top using mobile layout +#Header { + position: relative; + padding-top: $grid-gutter-height / 2; + padding-bottom: 1rem; + + @media (min-width: map-get($grid-breakpoints, "lg")) { + padding-top: 1rem; + padding-bottom: 0; + } +} + +#Navigation { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 10; + + @media (min-width: map-get($grid-breakpoints, "lg")) { + position: relative; + margin-top: 1rem; + } +} diff --git a/app/client/src/scss/app.scss b/app/client/src/scss/app.scss index 5da7413..3d9f20b 100644 --- a/app/client/src/scss/app.scss +++ b/app/client/src/scss/app.scss @@ -1,141 +1,13 @@ // Your custom variables @import "_variables"; -// Bootstrap -@import "~bootstrap/scss/root"; -@import "~bootstrap/scss/reboot"; -@import "~bootstrap/scss/type"; -@import "~bootstrap/scss/images"; -@import "~bootstrap/scss/code"; -@import "~bootstrap/scss/grid"; -@import "~bootstrap/scss/tables"; -@import "~bootstrap/scss/forms"; -@import "~bootstrap/scss/buttons"; -@import "~bootstrap/scss/transitions"; -@import "~bootstrap/scss/dropdown"; -@import "~bootstrap/scss/button-group"; -@import "~bootstrap/scss/input-group"; -@import "~bootstrap/scss/custom-forms"; -@import "~bootstrap/scss/nav"; -@import "~bootstrap/scss/navbar"; -@import "~bootstrap/scss/card"; -@import "~bootstrap/scss/breadcrumb"; -@import "~bootstrap/scss/pagination"; -@import "~bootstrap/scss/badge"; -@import "~bootstrap/scss/jumbotron"; -@import "~bootstrap/scss/alert"; -@import "~bootstrap/scss/progress"; -@import "~bootstrap/scss/media"; -@import "~bootstrap/scss/list-group"; -@import "~bootstrap/scss/close"; -@import "~bootstrap/scss/modal"; -@import "~bootstrap/scss/tooltip"; -@import "~bootstrap/scss/popover"; -@import "~bootstrap/scss/carousel"; -@import "~bootstrap/scss/utilities"; -@import "~bootstrap/scss/print"; +@import "_components/_ui.bootstrap"; +@import "_components/_ui.fontawesome"; +@import "_components/_ui.lightbox"; -// Fontawesome -$fa-font-path: "~font-awesome/fonts"; +@import "_components/_ui.main"; +@import "_components/_ui.elemental"; -@import "~font-awesome/scss/font-awesome"; - -// Extra modules -$lightbox-breakpoint: map-get($grid-breakpoints, "sm"); -$lightbox-link-hover-color: $link-hover-color; - -@import "~meta-lightbox/scss/meta-lightbox"; -@import "~meta-lightbox/scss/meta-lightbox-theme"; -@import "_components/ui.carousel"; - -/* - * some basic styles - */ - -// hide default page title cuz elemental object will be used to display titles -h1 { - display: none; -} - -// don't let images be wider than the parent layer -iframe, -img { - max-width: 100%; -} - -a:hover, -a:focus { - opacity: .8; - - .fas, - .fab, - &.fas, - &.fab { - transform: rotate(-180deg); - } -} - -// transactions -.transition, -a, a img, -a .fas, a .fab, -a.fas, a.fab, -button, input, optgroup, select, textarea, -.btn, -.alert, -.dropdown, -[data-target], -.container, -.container-fluid, -.row, -[class="col-*"] { - transition: all 0.4s ease; -} - -// stick navbar to top using mobile layout -#Header { - position: relative; - padding-top: $grid-gutter-height / 2; - padding-bottom: 1rem; - - @media (min-width: map-get($grid-breakpoints, "lg")) { - padding-top: 1rem; - padding-bottom: 0; - } -} - -#Navigation { - position: fixed; - top: 0; - left: 0; - width: 100%; - - @media (min-width: map-get($grid-breakpoints, "lg")) { - position: relative; - margin-top: 1rem; - } -} - -// add top/bottom paddings for basic elements -.page-content > .element { - position: relative; - padding: ($grid-gutter-height / 2) 0; - - // remove paddings of the slideshow - &.dynamic__elements__image__elements__elementimage, - &.dynamic__elements__flexslider__elements__elementslideshow { - padding: 0; - } -} - -// remove container paddings for the slideshow -.dynamic__elements__image__elements__elementimage, -.dynamic__elements__flexslider__elements__elementslideshow { - .container-fluid { - padding: 0; - } -} - -// Your custom UI +// Your custom styling @import "_typography"; @import "_layout"; diff --git a/app/templates/Includes/FlexSlider.ss b/app/templates/Includes/FlexSlider.ss index 35b02a3..580cc22 100644 --- a/app/templates/Includes/FlexSlider.ss +++ b/app/templates/Includes/FlexSlider.ss @@ -1,5 +1,5 @@ <% if $SlideShow %> -