i2p-styleguide/assets/styles/components.scss

// Alerts

.alert {
	border-radius: 15px;

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

// Primary & Secondary Backgrounds

.background-primary {
  background-color: $primary;
}

.background-secondary {
  background-color: $secondary;
}

.background-black {
  background-color: $black;
}

.background-white {
  background-color: $white;
}

// Text colors

.color-primary {
  color: $primary;
}

.color-secondary {
  color: $secondary;
}

.rb-code {
  font-family: 'Source Code Pro', monospace !important;
}

.rb-isBold {
  font-weight: bold;
}

// Buttons

.btn-primary,
.btn-outline-primary,
.btn-lg,
.btn-large,
.btn-outline-large,
.btn-md,
.btn-medium, 
.btn-outline-medium {
	line-height: 1em;
}

.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;
  background-color: $white !important;
  border-color: transparent !important;
  padding: 1rem 1.5rem !important;
  font-size: 1rem;
  &:hover {
		color: $white !important;
    background-color: $secondary !important;
    border-color: transparent !important;
  }
}

.btn-small {
  background-color: $primary !important;
  border-color: transparent !important;
  padding: .08rem .4rem 0 !important;
  font-size: .8rem;
  color: $white;
  &: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;
  color: $white;
  &:hover {
    background-color: $secondary !important;
    border-color: transparent !important;
    color: $white;
  }
}

.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;
  color: $white;
  &:hover {
    background-color: $secondary !important;
    border-color: transparent !important;
    color: $white;
  }

}
.btn-outline-medium {
  border-color: $primary !important;
  color: $primary !important;
  padding: .5rem 1rem !important;
  font-size: 1rem !important;
  background-color: transparent !important;

  &:hover {
    color: $white !important;
    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 {
    color: 4 !important;
    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 {
    color: $white !important;
    background-color: $primary !important;
    border-color: transparent !important;
  }
}

.btn-link {
  color: var(--link) !important;
  font-family: "Nunito", sans-serif;

  &:hover {
    color: var(--link-hover) !important;
  }
}

.btn-pill {
	border-radius: 30px;
}

.badge-primary {
  background-color: $primary !important;
}

.badge-secondary {
  background-color: $secondary !important;
}

.rb-link {
  color: var(--link) !important;
  &:hover {
    color: var(--link-hover) !important;
  }
}

.mark, mark {
  background-color: $gray-300 !important;
  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;
  }
}

// Dropdowns

.dropdown-toggle {
  background-color: var(--box) !important;
  color: var(--text) !important;
}

.dropdown-menu {
  background-color: var(--box) !important;
}

.dropdown-item {
  color: var(--primary) !important;

  &:hover {
    color: var(--text);
    background-color: var(--sidebar-inner-bg);
  }
}