From 18c0de1ff4ed0f9dda7f2d17974580c0ef6de33b Mon Sep 17 00:00:00 2001 From: eupiteco Date: Sun, 12 Aug 2018 13:56:30 -0300 Subject: [PATCH] alerts colors and shape updated --- _site/assets/styles/components.scss | 61 +++++++++++++++++------------ _site/assets/styles/main.css | 31 ++++++++------- assets/styles/components.scss | 61 +++++++++++++++++------------ 3 files changed, 91 insertions(+), 62 deletions(-) diff --git a/_site/assets/styles/components.scss b/_site/assets/styles/components.scss index 1c9e10d..cf79536 100644 --- a/_site/assets/styles/components.scss +++ b/_site/assets/styles/components.scss @@ -1,39 +1,52 @@ .alert { - border-radius: 25px; + border-radius: 15px; &-custom { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #081b4f; } } &-primary { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #003600; + } + } + &-secondary { + color: $oc-gray-7; + background-color: $oc-gray-2; + border-color: $oc-gray-6; + + & hr { + border-top-color: $oc-gray-6; + } + + & .alert-link { + color: $oc-gray-8; } } &-success { - color: #075207; - background-color: #beffbe; - border-color: #a7f2a7; + color: #105c10; + background-color: #e1f2e1; + border-color: #60ab60; & hr { - border-top-color: #7ac57a; + border-top-color: #1d731d; } & .alert-link { @@ -41,12 +54,12 @@ } } &-warning { - color: #bd8200; - background-color: #ffffa9; - border-color: #ffff92; + color: #6b4c00; + background-color: #ffeab5; + border-color: #cca443; & hr { - border-top-color: #fff464; + border-top-color: #cca443; } & .alert-link { @@ -54,12 +67,12 @@ } } &-danger { - color: #9f1405; - background-color: #ffcbbc; - border-color: #ffb4a5; + color: #700b00; + background-color: #ffcac4; + border-color: #e15647; & hr { - border-top-color: #ff8677; + border-top-color: #e15647; } & .alert-link { @@ -355,7 +368,7 @@ } } #styleguide-nav { - background-color: $oc-white !important; + background-color: $oc-gray-0 !important; .nav-item:hover { box-shadow: inset 0 -5px $primary; diff --git a/_site/assets/styles/main.css b/_site/assets/styles/main.css index ee62ba7..07744b4 100644 --- a/_site/assets/styles/main.css +++ b/_site/assets/styles/main.css @@ -78,21 +78,24 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .icon { font-size: 20px; background-color: #212529; padding: 20px; } -.alert { border-radius: 25px; } -.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } -.alert-custom hr { border-top-color: #7691d9; } -.alert-custom .alert-link { color: #000850; } -.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } -.alert-primary hr { border-top-color: #7691d9; } -.alert-primary .alert-link { color: #000850; } -.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; } -.alert-success hr { border-top-color: #7ac57a; } +.alert { border-radius: 15px; } +.alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; } +.alert-custom hr { border-top-color: #6679ac; } +.alert-custom .alert-link { color: #081b4f; } +.alert-primary { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; } +.alert-primary hr { border-top-color: #6679ac; } +.alert-primary .alert-link { color: #003600; } +.alert-secondary { color: #495057; background-color: #e9ecef; border-color: #868e96; } +.alert-secondary hr { border-top-color: #868e96; } +.alert-secondary .alert-link { color: #343a40; } +.alert-success { color: #105c10; background-color: #e1f2e1; border-color: #60ab60; } +.alert-success hr { border-top-color: #1d731d; } .alert-success .alert-link { color: #003b00; } -.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; } -.alert-warning hr { border-top-color: #fff464; } +.alert-warning { color: #6b4c00; background-color: #ffeab5; border-color: #cca443; } +.alert-warning hr { border-top-color: #cca443; } .alert-warning .alert-link { color: #a66b00; } -.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; } -.alert-danger hr { border-top-color: #ff8677; } +.alert-danger { color: #700b00; background-color: #ffcac4; border-color: #e15647; } +.alert-danger hr { border-top-color: #e15647; } .alert-danger .alert-link { color: #880000; } .background-primary { background-color: #4661A9; } @@ -185,7 +188,7 @@ h4.header-display::before { height: 2.25rem; transform: translate(-15px, 0.5625r .footer-extras ul li { margin: 0 0.5rem; } .footer .spacer { content: " "; height: 2rem; } -#styleguide-nav { background-color: #ffffff !important; } +#styleguide-nav { background-color: #f8f9fa !important; } #styleguide-nav .nav-item:hover { box-shadow: inset 0 -5px #4661A9; } #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } #styleguide-nav .nav-link { color: #212529; } diff --git a/assets/styles/components.scss b/assets/styles/components.scss index 1c9e10d..cf79536 100644 --- a/assets/styles/components.scss +++ b/assets/styles/components.scss @@ -1,39 +1,52 @@ .alert { - border-radius: 25px; + border-radius: 15px; &-custom { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #081b4f; } } &-primary { - color: #041f67; - background-color: #bbd6ff; - border-color: #a4bfff; + color: #3b4f87; + background-color: #e2e6f0; + border-color: #6679ac; & hr { - border-top-color: #7691d9; + border-top-color: #6679ac; } & .alert-link { - color: #000850; + color: #003600; + } + } + &-secondary { + color: $oc-gray-7; + background-color: $oc-gray-2; + border-color: $oc-gray-6; + + & hr { + border-top-color: $oc-gray-6; + } + + & .alert-link { + color: $oc-gray-8; } } &-success { - color: #075207; - background-color: #beffbe; - border-color: #a7f2a7; + color: #105c10; + background-color: #e1f2e1; + border-color: #60ab60; & hr { - border-top-color: #7ac57a; + border-top-color: #1d731d; } & .alert-link { @@ -41,12 +54,12 @@ } } &-warning { - color: #bd8200; - background-color: #ffffa9; - border-color: #ffff92; + color: #6b4c00; + background-color: #ffeab5; + border-color: #cca443; & hr { - border-top-color: #fff464; + border-top-color: #cca443; } & .alert-link { @@ -54,12 +67,12 @@ } } &-danger { - color: #9f1405; - background-color: #ffcbbc; - border-color: #ffb4a5; + color: #700b00; + background-color: #ffcac4; + border-color: #e15647; & hr { - border-top-color: #ff8677; + border-top-color: #e15647; } & .alert-link { @@ -355,7 +368,7 @@ } } #styleguide-nav { - background-color: $oc-white !important; + background-color: $oc-gray-0 !important; .nav-item:hover { box-shadow: inset 0 -5px $primary;