uracreative
/
i2p-styleguide
mirror of https://github.com/uracreative/i2p-styleguide
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

alerts colors and shape updated

new-components
eupiteco 6 years ago
parent
919d815412
commit
18c0de1ff4
3 changed files with 91 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 61
      _site/assets/styles/components.scss
  2. 31
      _site/assets/styles/main.css
  3. 61
      assets/styles/components.scss

61
_site/assets/styles/components.scss
View File

@ -1,39 +1,52 @@
.alert { .alert {
border-radius: 25px; border-radius: 15px;
&-custom { &-custom {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #081b4f;
} }
} }
&-primary { &-primary {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .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 { &-success {
color: #075207; color: #105c10;
background-color: #beffbe; background-color: #e1f2e1;
border-color: #a7f2a7; border-color: #60ab60;
& hr { & hr {
border-top-color: #7ac57a; border-top-color: #1d731d;
} }
& .alert-link { & .alert-link {
@ -41,12 +54,12 @@
} }
} }
&-warning { &-warning {
color: #bd8200; color: #6b4c00;
background-color: #ffffa9; background-color: #ffeab5;
border-color: #ffff92; border-color: #cca443;
& hr { & hr {
border-top-color: #fff464; border-top-color: #cca443;
} }
& .alert-link { & .alert-link {
@ -54,12 +67,12 @@
} }
} }
&-danger { &-danger {
color: #9f1405; color: #700b00;
background-color: #ffcbbc; background-color: #ffcac4;
border-color: #ffb4a5; border-color: #e15647;
& hr { & hr {
border-top-color: #ff8677; border-top-color: #e15647;
} }
& .alert-link { & .alert-link {
@ -355,7 +368,7 @@
} }
} }
#styleguide-nav { #styleguide-nav {
background-color: $oc-white !important; background-color: $oc-gray-0 !important;
.nav-item:hover { .nav-item:hover {
box-shadow: inset 0 -5px $primary; box-shadow: inset 0 -5px $primary;

31
_site/assets/styles/main.css
View File

@ -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; } .icon { font-size: 20px; background-color: #212529; padding: 20px; }
.alert { border-radius: 25px; } .alert { border-radius: 15px; }
.alert-custom { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } .alert-custom { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-custom hr { border-top-color: #7691d9; } .alert-custom hr { border-top-color: #6679ac; }
.alert-custom .alert-link { color: #000850; } .alert-custom .alert-link { color: #081b4f; }
.alert-primary { color: #041f67; background-color: #bbd6ff; border-color: #a4bfff; } .alert-primary { color: #3b4f87; background-color: #e2e6f0; border-color: #6679ac; }
.alert-primary hr { border-top-color: #7691d9; } .alert-primary hr { border-top-color: #6679ac; }
.alert-primary .alert-link { color: #000850; } .alert-primary .alert-link { color: #003600; }
.alert-success { color: #075207; background-color: #beffbe; border-color: #a7f2a7; } .alert-secondary { color: #495057; background-color: #e9ecef; border-color: #868e96; }
.alert-success hr { border-top-color: #7ac57a; } .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-success .alert-link { color: #003b00; }
.alert-warning { color: #bd8200; background-color: #ffffa9; border-color: #ffff92; } .alert-warning { color: #6b4c00; background-color: #ffeab5; border-color: #cca443; }
.alert-warning hr { border-top-color: #fff464; } .alert-warning hr { border-top-color: #cca443; }
.alert-warning .alert-link { color: #a66b00; } .alert-warning .alert-link { color: #a66b00; }
.alert-danger { color: #9f1405; background-color: #ffcbbc; border-color: #ffb4a5; } .alert-danger { color: #700b00; background-color: #ffcac4; border-color: #e15647; }
.alert-danger hr { border-top-color: #ff8677; } .alert-danger hr { border-top-color: #e15647; }
.alert-danger .alert-link { color: #880000; } .alert-danger .alert-link { color: #880000; }
.background-primary { background-color: #4661A9; } .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-extras ul li { margin: 0 0.5rem; }
.footer .spacer { content: " "; height: 2rem; } .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 { box-shadow: inset 0 -5px #4661A9; }
#styleguide-nav .nav-item:hover .nav-link { color: #4661A9; } #styleguide-nav .nav-item:hover .nav-link { color: #4661A9; }
#styleguide-nav .nav-link { color: #212529; } #styleguide-nav .nav-link { color: #212529; }

61
assets/styles/components.scss
View File

@ -1,39 +1,52 @@
.alert { .alert {
border-radius: 25px; border-radius: 15px;
&-custom { &-custom {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .alert-link {
color: #000850; color: #081b4f;
} }
} }
&-primary { &-primary {
color: #041f67; color: #3b4f87;
background-color: #bbd6ff; background-color: #e2e6f0;
border-color: #a4bfff; border-color: #6679ac;
& hr { & hr {
border-top-color: #7691d9; border-top-color: #6679ac;
} }
& .alert-link { & .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 { &-success {
color: #075207; color: #105c10;
background-color: #beffbe; background-color: #e1f2e1;
border-color: #a7f2a7; border-color: #60ab60;
& hr { & hr {
border-top-color: #7ac57a; border-top-color: #1d731d;
} }
& .alert-link { & .alert-link {
@ -41,12 +54,12 @@
} }
} }
&-warning { &-warning {
color: #bd8200; color: #6b4c00;
background-color: #ffffa9; background-color: #ffeab5;
border-color: #ffff92; border-color: #cca443;
& hr { & hr {
border-top-color: #fff464; border-top-color: #cca443;
} }
& .alert-link { & .alert-link {
@ -54,12 +67,12 @@
} }
} }
&-danger { &-danger {
color: #9f1405; color: #700b00;
background-color: #ffcbbc; background-color: #ffcac4;
border-color: #ffb4a5; border-color: #e15647;
& hr { & hr {
border-top-color: #ff8677; border-top-color: #e15647;
} }
& .alert-link { & .alert-link {
@ -355,7 +368,7 @@
} }
} }
#styleguide-nav { #styleguide-nav {
background-color: $oc-white !important; background-color: $oc-gray-0 !important;
.nav-item:hover { .nav-item:hover {
box-shadow: inset 0 -5px $primary; box-shadow: inset 0 -5px $primary;

Write Preview
Loading…
Cancel
Save