From 369a011621c83c5a7fa4072c29ba653c650b32c8 Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Fri, 26 Mar 2021 17:31:18 -0400 Subject: [PATCH] bringing css up to par with work done on shift73k --- assets/css/_bs-colors.scss | 35 ++++++++++++++++++++++++ assets/css/_bs-custom.scss | 1 + assets/css/_bs-load.scss | 50 +++++++++++++++++++++++++++++++++++ assets/css/_phx-liveview.scss | 6 ++++- assets/css/app.scss | 7 ++--- 5 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 assets/css/_bs-colors.scss create mode 100644 assets/css/_bs-load.scss diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss new file mode 100644 index 0000000..2cdd6bd --- /dev/null +++ b/assets/css/_bs-colors.scss @@ -0,0 +1,35 @@ +// Colors +// $primary: #662c91; +// $secondary: #ee6c4d; +// $success: #3f784c; +// $info: #3f84e5; +// $warning: #ffec51; +$light: $gray-200; +$dark: $gray-800; + +// Create your own map +$custom-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "gray": $gray-500, +); + +// $custom-colors: ( +// "custom-color": #900 +// ); + +// Merge the maps +$theme-colors: map-merge($theme-colors, $custom-colors); + +// misc +$navbar-dark-color: rgba($white, 0.75); +$navbar-dark-hover-color: rgba($white, 0.9); +$navbar-dark-active-color: $white; +$navbar-dark-disabled-color: rgba($white, 0.45); +$navbar-dark-toggler-border-color: rgba($white, 0.3); diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss index 9553e8c..512ee0d 100644 --- a/assets/css/_bs-custom.scss +++ b/assets/css/_bs-custom.scss @@ -11,5 +11,6 @@ $font-family-sans-serif: Lato, system-ui, -apple-system, "Segoe UI", Roboto, // $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, // "Liberation Mono", "Courier New", monospace !important; +// Features $enable-shadows: true; $enable-negative-margins: true; diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss new file mode 100644 index 0000000..f1f0e78 --- /dev/null +++ b/assets/css/_bs-load.scss @@ -0,0 +1,50 @@ +/* Bootstrap custom variable overrides */ +@import "bs-custom"; + +// Required || Configuration +@import "../node_modules/bootstrap/scss/functions"; +@import "../node_modules/bootstrap/scss/variables"; + +/* Bootstrap custom variable overrides */ +@import "bs-colors"; + +// Required || Configuration -- CONTINUED +@import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/utilities"; + +// Optional || Layout & components +@import "../node_modules/bootstrap/scss/root"; +@import "../node_modules/bootstrap/scss/reboot"; +@import "../node_modules/bootstrap/scss/type"; +@import "../node_modules/bootstrap/scss/images"; +@import "../node_modules/bootstrap/scss/containers"; +@import "../node_modules/bootstrap/scss/grid"; +@import "../node_modules/bootstrap/scss/tables"; +@import "../node_modules/bootstrap/scss/forms"; +@import "../node_modules/bootstrap/scss/buttons"; +@import "../node_modules/bootstrap/scss/transitions"; +@import "../node_modules/bootstrap/scss/dropdown"; +// @import "../node_modules/bootstrap/scss/button-group"; +@import "../node_modules/bootstrap/scss/nav"; +@import "../node_modules/bootstrap/scss/navbar"; +@import "../node_modules/bootstrap/scss/card"; +// @import "../node_modules/bootstrap/scss/accordion"; +// @import "../node_modules/bootstrap/scss/breadcrumb"; +@import "../node_modules/bootstrap/scss/pagination"; +// @import "../node_modules/bootstrap/scss/badge"; +@import "../node_modules/bootstrap/scss/alert"; +@import "../node_modules/bootstrap/scss/progress"; +// @import "../node_modules/bootstrap/scss/list-group"; +@import "../node_modules/bootstrap/scss/close"; +// @import "../node_modules/bootstrap/scss/toasts"; +@import "../node_modules/bootstrap/scss/modal"; +// @import "../node_modules/bootstrap/scss/tooltip"; +// @import "../node_modules/bootstrap/scss/popover"; +// @import "../node_modules/bootstrap/scss/carousel"; +@import "../node_modules/bootstrap/scss/spinners"; + +// Helpers +@import "../node_modules/bootstrap/scss/helpers"; + +// Utilities +@import "../node_modules/bootstrap/scss/utilities/api"; diff --git a/assets/css/_phx-liveview.scss b/assets/css/_phx-liveview.scss index 702bdd9..2c7087a 100644 --- a/assets/css/_phx-liveview.scss +++ b/assets/css/_phx-liveview.scss @@ -2,9 +2,13 @@ /* hides the feedback field help if liveview indicates field not touched yet */ .phx-no-feedback.invalid-feedback, -.phx-no-feedback .invalid-feedback { +.phx-no-feedback .invalid-feedback, +.phx-orphaned-feedback.phx-no-feedback .invalid-feedback { display: none; } +.phx-orphaned-feedback .invalid-feedback { + display: block !important; +} /* sets default bootstrap form-control styles if field not touched yet */ .phx-no-feedback .form-control.is-valid, diff --git a/assets/css/app.scss b/assets/css/app.scss index 384fc84..05c1f4a 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1,11 +1,8 @@ /* Fonts */ @import "fonts"; -/* Bootstrap custom variable overrides */ -@import "bs-custom"; - -/* Bootstrap v5 scss */ -@import "~bootstrap/scss/bootstrap"; +/* Load Bootstrap v5 and customizations */ +@import "bs-load"; /*SVG ICON SYSTEM*/ @import "svg-icons";