cityssm/parking-ticket-system

View on GitHub
public-scss/style.scss

Summary

Maintainability
Test Coverage
@import '@cityssm/bulma-webapp-css/cityssm';

// FONT - PT MONO
// Used for licence plate numbers

@font-face {
  font-family: 'PT Mono';
  font-style: normal;
  font-weight: 400;
  src:
    local('PT Mono'),
    local('PTMono-Regular'),
    url('fontsource-pt-mono/pt-mono-latin-400-normal.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('fontsource-pt-mono/pt-mono-latin-400-normal.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

  font-display: swap;
}

// HTML

.has-opacity-2 {
  opacity: 0.2;
}

.licence-plate-number {
  font-family: 'PT Mono', monospace;
  font-size: 1.4em;
  color: var(--color);
  white-space: nowrap;
}

.licence-plate-country,
.licence-plate-province {
  font-size: 0.6em;
  font-weight: bold;
  color: var(--backgroundColor);
  background-color: var(--color);
  opacity: 0.8;
}

.licence-plate {
  display: inline-block;
  color: var(--color);
  text-align: center;
  background-color: var(--backgroundColor);
  border: 1px solid var(--color);
  border-radius: 5px;

  &.is-fullwidth {
    width: 100%;
  }

  > .licence-plate-number {
    min-width: 5em;
    padding: 2px 5px;
  }
}

/*
 * Tabs
 */

.tab-content {
  display: none;

  &.is-active {
    display: block;
  }
}

/*
 * Login
 */

#is-login-page {
  overflow: auto;
  background-position: bottom right;
  background-size: cover;

  body > .columns {
    min-height: 100vh;
  }
}

/*
 * Print
 */

.container.is-page {
  width: 8.5in;
  padding: 10px 20px 20px;
  margin: 20px auto;
  background-color: $white;
  border: 1px solid $black;

  @media print {
    width: 100%;
    padding: 0;
    border: 0;
  }
}

/*
 * Accessibility
 */

$black-ter: hsl(0, 0%, 14%);

#is-login-page .control .button.is-static,
.menu .menu-label {
  color: $black-ter;
}