kyndryl_design_toolkit/kyndryl_DTK.css

A little help to make ui for kyndryl

*{
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --red-brand: #FD452D;
  --red-brand-darker1: #F0341C;
  --red-brand-darker2: #D11B03;

  --gray-disable-button: #C4C4C4;

  --gray-brand: #72706F;
  --gray-brand-darker1: #5A5959;
  --gray-brand-darker2: #3E3E3E;

  --light-color: #EFE9E9;
  --light-gray: #D1D1D1;


  --blue: #00ADB4;
  --black: #000000;
  --green: #009640;
  --red: #f94747;
  --yellow: #FFCC58;
  --white: #FFFFFF;
}
/* buttons */
.primary-button, .secondary-button, .disable-button, .ghost-button{
  border: none;
  padding: 0.8rem 3rem;
  border-radius: 2px;
}

.primary-button{
  color: var(--white);
  background-color: var(--red-brand);
}

.primary-button:hover{
  background-color: var(--red-brand-darker1);
}

.primary-button:active{
  background-color: var(--red-brand-darker2);
}

.primary-button:focus{
  background-color: var(--red-brand);
  box-shadow: 0 0 0 0.25rem rgb(253 69 45 / 50%);
}

.secondary-button{
  color: var(--white);
  background-color: var(--gray-brand);
}

.secondary-button:hover{
  background-color: var(--gray-brand-darker1);
}

.secondary-button:active{
  background-color: var(--gray-brand-darker2);
}

.secondary-button:focus{
  background-color: var(--gray-brand);
  box-shadow: 0 0 0 0.25rem rgb(253 69 45 / 50%);
}

.disable-button{
  color: var(--gray-brand-darker1);
  background-color: var(--gray-disable-button);
}

.disable-button:hover{
  cursor: no-drop;
}

.ghost-button{
  color: var(--red-brand);
  background-color: transparent;
}

.ghost-button:hover{
  background-color: var(--light-color);
}

.ghost-button:active{
  background-color: var(--light-gray);
}

.ghost-button:focus{
  background-color: transparent;
  box-shadow: 0 0 0 0.25rem rgb(253 69 45 / 50%);
}

.ghost-button:disabled{
  background-color: transparent;
  color: var(--gray-brand-darker1);
}

.link{
  color: var(--red-brand);
  font-size: 14px;
  cursor: pointer;
}

.link:hover{
  text-decoration: underline;
}

.link:active{
  text-decoration: underline;
  color: var(--gray-brand-darker1);
}

.link:focus{
  color: var(--red-brand);
  text-decoration: underline;
}

.link:disabled{
  color: var(--gray-brand);
  text-decoration: none;
  cursor: no-drop;
}

/* inputs */
.input-texbox, .input-texbox-disabled{
  padding: 0.3rem;
  width: 50%;
  border: solid 1px lightgray;
  border-radius: 2px;
  height: 2rem;
  margin-top: 0.5rem;
}

.input-texbox-disabled{
  pointer-events:none;
  background-color: var(--light-color);
}

.text-area{
  width: 50%;
  border: solid 1px lightgray;
  border-radius: 2px;
  margin-top: 0.5rem;
}

label{
  color: var(--gray-brand);
}

/* Badges */
.primary-badge, .secondary-badge, .warning-badge, .info-badge, .success-badge, .light-badge{
  display: inline-block;
  padding: .35em 1.65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2rem;
}

.primary-badge{
  background-color: var(--red-brand);
}

.secondary-badge{
  background-color: var(--green);
}

.warning-badge{
  background-color: var(--yellow);
  color: #000000;
}

.info-badge{
  background-color: var(--gray-brand-darker2);
}

.success-badge{
  background-color: var(--blue);
}

.light-badge{
  background-color: var(--light-color);
  color: #000000;
}

.card-div{
  box-shadow: -3px 4px 12px #aaa;
  border-radius: 2px;
  padding: 1.5rem;
  width: 100%;
}

.card-title{
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 20px;
}

/* navbars */
.navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10%;
}

.navbar-red{
  background-color: var(--red-brand);
}

.navbar-light{
  background-color: var(--light-color);
}

li, a {
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
}

.navbar-red-title, .navbar-red-link{
  color: white;
}

.navbar-light-title, .navbar-light-link{
  color: var(--red-brand);
}

.navbar-title{
  cursor: pointer;
}

.nav-links{
  list-style: none;
}

.nav-links li {
  display: inline-block;
  padding: 0px 20px;
}

.nav-links li a {
  transition: all 0.3s ease 0s;
}

.nav-links li a:hover {
  color: var(--gray-brand-darker1);
}