Home

Basics

Styles that don't deserve their own components, basic elements and modifiers

Basic style reset

* {
  margin: 0;
  padding: 0;
  color: inherit;
  border: none;
  box-sizing: border-box;
  font-size: inherit;
  font-family: inherit;
  background: transparent;
  box-shadow: none;
}

Basic elements

html,
body {
  height: 100%;
}

body {
  overflow-y: scroll;
}

img,
svg {
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
}

hr {
  border-bottom: 1px solid;
}

Placeholders

::placeholder {
  color: $black;
  color: currentColor;
  opacity: .5;
}

.white-text {

  &::placeholder,
  & ::placeholder {
    color: $white;
    color: currentColor;
    opacity: .5;
  }
}

Links

<div class="a">a or .a</div>
<a href="#" class="link-simple">a.link-simple</a>
a or .a
a.link-simple
a,
.a {
  text-decoration: underline;
  color: $secondary;
  cursor: pointer;
  transition: color .2s;

  &:hover {
    color: adjust-hue($secondary, -30);
  }
}

.link-simple {
  text-decoration: none;
  color: inherit;
  transition: opacity .2s;

  &:hover {
    color: inherit;
    opacity: .5;
  }
}

Basic modifiers

.bordered {
  border: 1px solid;
}