@dabapps/roe/src/less/overrides.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

* { // lesshint universalSelector: false
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: @font-family-base;
  color: @font-color-base;
  background-color: @body-background;
  font-size: @font-size-base;
  line-height: @line-height-base;
  letter-spacing: @letter-spacing-base;
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
code,
ul,
ol,
li,
label {
  margin-top: @margin-large;
  margin-bottom: @margin-large;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: @font-weight-normal;
  color: @header-color-base;
}

a {
  color: @link-color;
  text-decoration: @link-text-decoration;
  cursor: pointer;
  transition: ease-in-out color 0.1s;

  &:hover:not([disabled]):not(.disabled) {
    color: @link-color-hover;
    text-decoration: @link-text-decoration-hover;
  }
}

img {
  border: @border-none;
}

h1 {
  font-size: @font-size-h1;
  line-height: @line-height-h1;
}

h2 {
  font-size: @font-size-h2;
  line-height: @line-height-h2;
}

h3 {
  font-size: @font-size-h3;
  line-height: @line-height-h3;
}

h4 {
  font-size: @font-size-h4;
  line-height: @line-height-h4;
}

h5 {
  font-size: @font-size-h5;
  line-height: @line-height-h5;
}

h6 {
  font-size: @font-size-h6;
  line-height: @line-height-h6;
}

pre,
code {
  border: @code-block-border;
  border-radius: @border-radius-base;
  background-color: @code-block-background;
  padding: @padding-base;
}

pre {
  overflow: auto;
}

.button-overrides() {
  position: relative;
  border-radius: @button-border-radius;
  border: @border-none;
  padding: @button-padding-vertical-base @button-padding-horizontal-base;
  font-weight: @font-weight-normal;
  font-family: @font-family-base;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  font-size: @font-size-button;
  line-height: @line-height-button;
  height: auto;
}

button {
  .button-overrides();
}

input,
select,
textarea {
  font-family: @font-family-base;
  padding: @padding-base / 2;
  border-radius: @border-radius-base;
  border: @input-border;
  appearance: none;
  font-size: @font-size-base;
  height: @input-height;
  color: @font-color-base;

  &::placeholder {
    color: @font-color-light;
  }
}

input,
select,
.input,
.select {
  display: inline-block;
  width: @input-width;
}

textarea {
  width: @textarea-width;
  height: @textarea-height;
}

input[type='submit'],
input[type='button'] {
  width: auto;
  cursor: pointer;
}

input[type='checkbox'],
input[type='radio'] {
  position: relative;
  padding: 0;
  width: @checkbox-size;
  height: @checkbox-size;
  background-color: @checkbox-background;
  border: @checkbox-border;
  box-shadow: @checkbox-shadow;
  outline: none;
  cursor: pointer;

  &:checked {
    background-color: @checkbox-active-background;
    box-shadow: @shadow-none;

    &::after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: 50% 50%;
    }
  }
}

input[type='checkbox'] {
  border-radius: @checkbox-border-radius;

  &:checked {
    background-color: @checkbox-active-background;

    &::after {
      transform: translate(-50%, -60%) rotate(-55deg);
      width: floor(@checkbox-size / 2);
      height: floor(@checkbox-size / 3);
      border-left: @checkbox-icon-border;
      border-bottom: @checkbox-icon-border;
    }
  }
}

input[type='radio'] {
  border-radius: 50%;

  &:checked {
    background-color: @checkbox-active-background;

    &::after {
      width: floor(@checkbox-size / 3);
      height: floor(@checkbox-size / 3);
      background-color: @checkbox-icon-background;
      border-radius: 50%;
    }
  }
}

@select-arrows-width: 8px;
@select-arrows-height: 16px;
@select-arrows-offset: (@padding-base * 2 - @select-arrows-width) / 2;
/* Original image:
  <svg xmlns="http://www.w3.org/2000/svg" width="8" height="14" viewBox="0 0 8 14">
    <path d="M 4 0 8 5 0 5 z"/>
    <path d="M 0 9 8 9 4 14 z"/>
  </svg>
*/
@select-arrows-background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgOCAxNCI+PHBhdGggZD0iTSA0IDAgOCA1IDAgNSB6Ii8+PHBhdGggZD0iTSAwIDkgOCA5IDQgMTQgeiIvPjwvc3ZnPgo='); // lesshint maxCharPerLine: false
@select-arrows-position: calc(100% - @select-arrows-offset) 50%;



select {
  background-color: transparent;
  padding-right: @padding-base * 2;
  background-image: @select-arrows-background;
  background-position: @select-arrows-position;
  background-size: @select-arrows-width @select-arrows-height;
  background-repeat: no-repeat;

  &::-ms-expand {
    display: none;
  }
}

a,
tr,
button,
input,
select,
textarea,
datalist,
keygen {
  &[disabled],
  &.disabled {
    cursor: not-allowed;
    outline: none;
  }
}

[disabled],
.disabled {
  opacity: 0.5;
}

table,
thead,
tbody,
tr,
th,
td {
  border-collapse: collapse;
  border: @border-none;
}

tr {
  background-color: @white;
}

th,
td {
  padding: @padding-base;
  background-color: @white;
  vertical-align: middle;
  text-align: left;
}

thead tr {
  border-bottom: @border-base;
}

thead,
tbody {
  tr {
    border-bottom: @border-base;
  }
}

tbody {
  tr {
    &:last-child {
      border-bottom: @border-none;
    }
  }
}

hr {
  height: 1px;
  border-width: 0;
  background-color: @grey-lighter;
  margin: @margin-base 0;

  &.fade {
    background-color: @grey-lightest;
  }
}

@supports (background-image: linear-gradient(transparent, transparent)) {
  hr.fade {
    background-color: transparent;
    background-image: linear-gradient(to right, transparent, fade(@grey-lighter, 100%), transparent);
  }
}