I2P brand styleguides for the web
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

619 lines
9.8 KiB

5 years ago
// Alerts
.alert {
border-radius: 15px;
&-custom {
color: #3b4f87;
background-color: #e2e6f0;
border-color: #6679ac;
& hr {
border-top-color: #6679ac;
}
& .alert-link {
color: #081b4f;
}
}
&-primary {
color: #3b4f87;
background-color: #e2e6f0;
border-color: #6679ac;
& hr {
border-top-color: #6679ac;
}
& .alert-link {
color: #003600;
}
}
&-secondary {
color: $gray-700;
background-color: $gray-200;
border-color: $gray-600;
& hr {
border-top-color: $gray-600;
}
& .alert-link {
color: $gray-800;
}
}
&-success {
color: #105c10;
background-color: #e1f2e1;
border-color: #60ab60;
& hr {
border-top-color: #1d731d;
}
& .alert-link {
color: #003b00;
}
}
&-warning {
color: #6b4c00;
background-color: #ffeab5;
border-color: #cca443;
& hr {
border-top-color: #cca443;
}
& .alert-link {
color: #a66b00;
}
}
&-danger {
color: #700b00;
background-color: #ffcac4;
border-color: #e15647;
& hr {
border-top-color: #e15647;
}
& .alert-link {
color: #880000;
}
}
}
5 years ago
// Primary & Secondary Backgrounds
7 years ago
.background-primary {
background-color: $primary;
}
.background-secondary {
background-color: $secondary;
}
5 years ago
.background-black {
background-color: $black;
}
.background-white {
background-color: $white;
}
7 years ago
.background-warning {
background-color: $warning;
}
.background-danger {
background-color: $danger;
}
5 years ago
// Other color backgrounds
7 years ago
.background-gray-50 {
background-color: $gray-50;
6 years ago
}
.background-gray-100 {
background-color: $gray-100;
7 years ago
}
.background-gray-200 {
background-color: $gray-200;
7 years ago
}
.background-gray-300 {
background-color: $gray-300;
6 years ago
}
.background-gray-400 {
background-color: $gray-400;
6 years ago
}
.background-gray-500 {
background-color: $gray-500;
6 years ago
}
.background-gray-600 {
background-color: $gray-600;
6 years ago
}
.background-gray-700 {
background-color: $gray-700;
6 years ago
}
.background-gray-800 {
background-color: $gray-800;
6 years ago
}
.background-gray-900 {
background-color: $gray-900;
6 years ago
}
5 years ago
.background-indigo-100 {
background-color: $indigo-100;
}
.background-indigo-200 {
background-color: $indigo-200;
}
.background-indigo-300 {
background-color: $indigo-300;
}
.background-indigo-400 {
background-color: $indigo-400;
}
.background-indigo-500 {
background-color: $indigo-500;
}
.background-indigo-600 {
background-color: $indigo-600;
}
.background-indigo-700 {
background-color: $indigo-700;
}
.background-indigo-800 {
background-color: $indigo-800;
}
.background-indigo-900 {
background-color: $indigo-900;
}
.background-teal-100 {
background-color: $teal-100;
}
.background-teal-200 {
background-color: $teal-200;
}
.background-teal-300 {
background-color: $teal-300;
}
.background-teal-400 {
background-color: $teal-400;
}
.background-teal-500 {
background-color: $teal-500;
}
.background-teal-600 {
background-color: $teal-600;
}
.background-teal-700 {
background-color: $teal-700;
}
.background-teal-800 {
background-color: $teal-800;
}
.background-teal-900 {
background-color: $teal-900;
}
.background-orange-100 {
background-color: $orange-100;
}
.background-orange-200 {
background-color: $orange-200;
}
.background-orange-300 {
background-color: $orange-300;
}
.background-orange-400 {
background-color: $orange-400;
7 years ago
}
5 years ago
.background-orange-500 {
background-color: $orange-500;
}
.background-orange-600 {
background-color: $orange-600;
}
.background-orange-700 {
background-color: $orange-700;
}
.background-orange-800 {
background-color: $orange-800;
}
.background-orange-900 {
background-color: $orange-900;
}
.background-night-50 {
background-color: $night-50;
}
.background-night-100 {
background-color: $night-100;
}
.background-night-200 {
background-color: $night-200;
}
.background-night-300 {
background-color: $night-300;
}
.background-night-400 {
background-color: $night-400;
}
.background-night-500 {
background-color: $night-500;
}
.background-night-600 {
background-color: $night-600;
}
.background-night-700 {
background-color: $night-700;
}
.background-night-800 {
background-color: $night-800;
}
.background-night-900 {
background-color: $night-900;
}
.background-night-950 {
background-color: $night-950;
}
5 years ago
// Text colors
7 years ago
.color-primary {
5 years ago
color: $primary;
7 years ago
}
.color-secondary {
color: $secondary;
}
6 years ago
.color-gray-9 {
color: $gray-900;
7 years ago
}
.rb-code {
6 years ago
font-family: 'Source Code Pro', monospace !important;
7 years ago
}
.rb-isBold {
font-weight: bold;
}
5 years ago
// Buttons
.btn-primary,
.btn-outline-primary,
.btn-lg,
.btn-large,
.btn-outline-large,
.btn-md,
.btn-medium,
.btn-outline-medium {
line-height: 1em;
}
7 years ago
.btn-primary {
background-color: $primary !important;
border-color: transparent !important;
padding: 1rem 1.5rem !important;
font-size: 1rem;
&:hover {
background-color: $secondary !important;
border-color: transparent !important;
}
}
.btn-white {
color: $primary !important;
5 years ago
background-color: $white !important;
border-color: transparent !important;
padding: 1rem 1.5rem !important;
font-size: 1rem;
&:hover {
5 years ago
color: $white !important;
background-color: $secondary !important;
border-color: transparent !important;
}
}
7 years ago
.btn-small {
background-color: $primary !important;
border-color: transparent !important;
padding: .08rem .4rem 0 !important;
font-size: .8rem;
5 years ago
color: $white;
7 years ago
&:hover {
background-color: $secondary !important;
border-color: transparent !important;
}
}
.btn-medium {
background-color: $primary !important;
border-color: transparent !important;
padding: .5rem 1rem !important;
font-size: 1rem !important;
5 years ago
color: $white;
7 years ago
&:hover {
background-color: $secondary !important;
border-color: transparent !important;
5 years ago
color: $white;
7 years ago
}
}
.btn-large {
border-radius: .3rem;
background-color: $primary !important;
border-color: transparent !important;
border-radius: 2em;
padding: .5rem 1rem !important;
font-size: 1.25rem !important;
5 years ago
color: $white;
7 years ago
&:hover {
background-color: $secondary !important;
border-color: transparent !important;
5 years ago
color: $white;
7 years ago
}
}
.btn-outline-medium {
border-color: $primary !important;
color: $primary !important;
padding: .5rem 1rem !important;
font-size: 1rem !important;
background-color: transparent !important;
&:hover {
5 years ago
color: $white !important;
7 years ago
background-color: $primary !important;
border-color: transparent !important;
}
}
.btn-outline-small {
border-color: $primary !important;
color: $primary !important;
padding: .08rem .4rem 0 !important;
font-size: .8rem;
background-color: transparent !important;
&:hover {
5 years ago
color: 4 !important;
7 years ago
background-color: $primary !important;
border-color: transparent !important;
}
}
.btn-outline-primary {
border-color: $primary !important;
color: $primary !important;
padding: 1rem 1.5rem !important;
font-size: 1rem;
&:hover {
5 years ago
color: $white !important;
7 years ago
background-color: $primary !important;
border-color: transparent !important;
}
}
.btn-link {
color: $primary !important;
&:hover {
color: $secondary !important;
}
}
.btn-scroller {
border-radius: .25rem;
text-align: center;
display: inline-block;
-webkit-transition-duration: .1s;
-o-transition-duration: .1s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
-webkit-transition-property: background-color,color,border-color;
-o-transition-property: background-color,color,border-color;
padding: .5rem 1rem;
transition-duration: .1s;
transition-timing-function: linear;
transition-property: background-color,color,border-color;
color: #00000b;
background-color: #dddde0;
border: 0;
}
.btn-scroller:active, .btn-scroller:focus, .btn-scroller:hover {
color: #00000b;
background-color: #aaaab0;
}
.btn-pill {
border-radius: 30px;
7 years ago
}
.badge-primary {
background-color: $primary !important;
}
.badge-secondary {
background-color: $secondary !important;
}
5 years ago
// Footer
.footer {
ul {
list-style: none;
font-weight: 600;
text-transform: capitalize;
margin-bottom: 2rem;
span {
display: block;
margin-bottom: 0.5em;
}
a {
color: rgba(255,255,255,0.5);
font-weight: 400;
&:hover {
5 years ago
color: $white;
}
}
}
&__social-media {
display: flex;
margin-top: 16px !important;
&-icon {
height: 40px;
width: 40px;
margin-right: 1rem;
margin-bottom: 1rem;
color: rgba(255,255,255,0.5);
&:hover {
5 years ago
color: $white;
}
}
}
&-extras{
ul {
li {
margin: 0 0.5rem;
}
}
&__logo img {
max-width: 180px;
height: auto;
}
}
.spacer {
content: " ";
height: 2rem;
}
}
5 years ago
#styleguide-nav {
background-color: $primary !important;
.nav-item:hover {
5 years ago
box-shadow: inset 0 -5px $white;
}
.nav-link {
5 years ago
color: $white;
}
.show {
.nav-item:hover {
box-shadow: 0 0;
}
}
}
7 years ago
.rb-link {
color: $primary !important;
&:hover {
color: $secondary !important;
}
}
.rb-paginate-active {
background-color: $primary !important;
5 years ago
color: $white !important;
7 years ago
&:hover {
background-color: $secondary !important;
}
}
.pagination .page-link {
color: $gray-900;
7 years ago
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
background-color: $gray-300 !important;
7 years ago
}
.mark, mark {
background-color: $gray-300 !important;
7 years ago
padding: .2em !important;
}
img {
max-width: 100%;
}
.theme-toggle {
display: inline-flex;
position: absolute;
cursor: pointer;
top: 36px;
right: 36px;
}
@media screen and (max-width: 991px) {
.theme-toggle {
display: inline-flex;
position: absolute;
right: 96px;
}
}
.dropdown-menu {
background-color: var(--box) !important;
}
.dropdown-item {
color: var(--primary) !important;
&:hover {
color: var(--text);
background-color: var(--sidebar-inner-bg);
}
}