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
Split 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 {
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;

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; }
.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; }

61
assets/styles/components.scss
View File

@ -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;

Write Preview
Loading…
Cancel
Save