jawgstrap.scss

@charset "UTF-8";

/***********************************/
/********** JAWG STRAP *************/
/***********************************/

/*/
 * Created by Antoine Lebel - Jawg 2017
 * Created & designed for JawgMaps
/*/

/************* COLORS **************/
$jawgblue: #0099D8;
$jawgblue-highlight: #1dabe5;
$jawgblue-dark: #005e85;
$jawgblue-ui: #2175bf;
$jawgblue-bg: #c9dce8;

$background-lite: #ededed;

$success: #12b90d;
$success-btn: #45b049;
$success-highlight: #52b756;
$success-dark: #0f7a0f;
$success-bg: #d2e8c9;

$warning: #cc7300;
$warning-btn: #ce8f30;
$warning-highlight: #dc982e;
$warning-dark: #a85a10;
$warning-bg: #fadfd1;

$error: #CC0000;
$error-btn: #b50909;
$error-highlight: #a01010;
$error-dark: #700f0f;
$error-bg: #e8c9c9;

$black-bg: #111111;
$black-primary: #222222;
$black-primary-2: #303030;
$black-secondary: #383838;
$black-secondary-2: #404040;
$black-highlight: #616161;
$btn-highlight: #AAA;

$text-color-white: #efefef;
$text-color-black: #131313;

/******* PADDING & MARGINS *******/
$padding-xxs: 4px;
$padding-xs: 5px;
$padding-sm: 6px;
$padding-md: 8px;
$padding-lg: 10px;
$padding-xlg: 12px;
$padding-xxlg: 14px;
$padding-xxxlg: 16px;

$margin-xs: 6px;
$margin-sm: 8px;
$margin-md: 10px;
$margin-lg: 12px;
$margin-xlg: 15px;
$margin-xxlg: 20px;
$margin-xxxlg: 25px;

$radius-sm: 4px;
$radius-xs: 3px;
$radius-md: 6px;

$size-25: 25px;

/********** FONT-SIZE ***********/
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 13px;
$font-size-lg: 14px;
$font-size-xlg: 16px;
$font-size-xxlg: 18px;
$font-size-xxxlg: 20px;
$font-size-xxxxlg: 50px;

/************ MAIN *************/
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  outline: none;
  font-size: 14px;
  box-sizing: border-box;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
}

#jwg-strap, .jwg-strap {
  /********** BUTTONS ************/

  .btn {
    font-size: $font-size-lg;
    color: #eee;
    background: #dadada;
    border: none;
    border-radius: 3px;

    &.btn-3d {
      box-shadow: 0 4px 0 $btn-highlight;
      border: 1px solid #444;
    }

    &:hover, &:focus {
      background: #eeeeee;
      cursor: pointer;
      color: #fff;
      outline: none;
    }

    &.btn-xs {
      padding: $padding-xs $padding-sm;
      font-size: $font-size-sm;
    }

    &.btn-sm {
      padding: $padding-lg $padding-xlg;
      font-size: $font-size-md;
    }

    &.btn-md {
      padding: $padding-lg $padding-xxlg;
      font-size: $font-size-md;
    }

    &.btn-lg {
      padding: $padding-xlg $padding-xxxlg;
      font-size: $font-size-lg;
    }

    &.btn-xlg {
      padding: $margin-xlg $margin-xxxlg;
      font-size: $font-size-xlg;
    }

    &.btn-primary {
      background: #1593c7;
      color: $text-color-white;
      //border: 1px solid #0080b5;
      border: none;

      &:hover, &:focus {
        background: #0ba0d7;
      }

      &.btn-3d {
        box-shadow: 0 4px 0 $jawgblue-dark;
      }
    }

    &.btn-success {
      background: $success-btn;
      color: $text-color-white;
      //border: 1px solid #009e07;
      border: none;

      &:hover, &:focus {
        background: $success-highlight;
      }

      &.btn-3d {
        box-shadow: 0 4px 0 $success-dark;
      }
    }

    &.btn-error, &.btn-danger {
      background: #d23d3d;
      color: $text-color-white;
      //border: 1px solid #9e0007;
      border: none;

      &:hover, &:focus {
        background: #ff3737;
      }

      &.btn-3d {
        box-shadow: 0 4px 0 $error-dark;
      }
    }

    &.btn-warning {
      background: $warning-btn;
      color: $text-color-white;
      //border: 1px solid #bf8328;
      border: none;

      &:hover, &:focus {
        background: $warning-highlight;
      }

      &.btn-3d {
        box-shadow: 0 4px 0 $warning-dark;
      }
    }

    &.btn-disabled {
      background: $black-highlight;
      color: $black-secondary-2;
      cursor: not-allowed;

      &:hover, &:focus {
        background: $black-highlight;
      }

      &.btn-3d {
        box-shadow: 0 4px 0 $black-secondary-2;
      }
    }

    &.btn-3d:active:not(.btn-disabled) {
      position: relative;
      top: 2px;
      box-shadow: 0 2px 0 #333;
    }
  }

  .btn-group {
    &.btn-border-sm {
      >.btn:last-child {
        border-width: 1px 1px 1px 1px;
        border-style: solid;
        border-color: #dedede;
      }
      .btn {
        border-width: 1px 0px 1px 1px;
        border-style: solid;
        border-color: #dedede;
      }
    }
    &.btn-border-md {
      >.btn:first-child {
        border-width: 2px 1px 2px 2px;
        border-style: solid;
        border-color: #dedede;
      }
      >.btn:last-child {
        border-width: 2px 2px 2px 1px;
        border-style: solid;
        border-color: #dedede;
      }
      .btn {
        border-width: 2px 1px 2px 1px;
        border-style: solid;
        border-color: #dedede;
      }
    }
    >.btn {
      margin: 0;
      border-radius: 0;
    }
    >.btn:first-child {
      border-radius: 6px 0 0 6px;
    }
    >.btn:last-child {
      border-radius: 0 6px 6px 0;
    }
    white-space: nowrap;
  }

  /********** ALERTS ***********/
  .alert {
    width: 100%;
    margin: $margin-md 0;
    padding: $padding-md;
    -webkit-border-radius: $radius-xs;
    -moz-border-radius: $radius-xs;
    border-radius: $radius-xs;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera, IE 8+ */

    &.error, &.danger {
      border: 1px solid $error-highlight;
      background: $error-bg;
      color: $error-highlight;
    }

    &.warning {
      border: 1px solid $warning-highlight;
      background: $warning-bg;
      color: $warning-btn;
    }

    &.success {
      border: 1px solid $success-highlight;
      background: $success-bg;
      color: $success-highlight;
    }

    &.info {
      border: 1px solid $jawgblue-highlight;
      background: $jawgblue-bg;
      color: $jawgblue-highlight;
    }
  }

  /******** TEXT STYLE *********/

  .text-success {
    color: $success-highlight;
  }
  .text-error, .text-danger {
    color: $error-highlight;
  }
  .text-warning {
    color: $warning-highlight;
  }
  .text-info {
    color: $jawgblue-highlight;
  }
  .text-right {
    text-align: right;
  }
  .text-left {
    text-align: left;
  }
  .text-center {
    text-align: center;
  }
  .pull-right {
    float: right;
  }
  .pull-left {
    float: left
  }
  .clearfix, .clear {
    clear: both;
  }
  .clear-left {
    clear: left;
  }
  .clear-right {
    clear: right;
  }

  /********** TITLES ***********/
  h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    margin: $margin-xs 0;
  }
  h1 {
    font-size: 2.6em;
  }
  h2 {
    font-size: 2.2em;
  }
  h3 {
    font-size: 1.9em;
  }
  h4 {
    font-size: 1.7em;
  }
  h5 {
    font-size: 1.5em;
  }
  h6 {
    font-size: 1.3em;
  }

  hr, .hr {
    display: block;
    margin: 20px 0;
    padding: 0;
    color: #333;
    background: #666;
    height: 1px;
    border: 0;
  }

  a {
    text-decoration: none;
    color: inherit;
    &:visited {
      color: inherit;
    }
    &:hover {
      color: $jawgblue;
    }
  }

  /*********** FORM ************/
  input[type=submit] {
    &:focus {
      border: none;
      outline: none;
    }
  }
  input, textarea, .input {
    padding: $padding-md;
    background: inherit;
    margin: $padding-xs 0;
    border-radius: 3px;
    outline: none;
    border: solid 1px #ccc;
    transition: border 300ms ease;
    font-size: 14px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera, IE 8+ */
    //-webkit-appearance: none; /* Override behavior on iOS search input which add rounded corners */

    &.lg {
      padding: $padding-xlg;
    }

    &.md {
      padding: $padding-sm;
    }

    &.sm {
      padding: $padding-xxs;
      height: 37px;
      line-height: 25px;
    }

    &.fullsize, &.fullwidth {
      width: 100%;
    }

    &:focus {
      border: 1px solid $jawgblue;
    }

    &.error {
      border: 1px solid $error;
      color: $error;
    }
    &.success {
      border: 1px solid $success;
      color: $success;
    }
  }

  .panel-container, .block-container {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;

    &.nowrap {
      flex-wrap: nowrap;
    }
    &.row {
      flex-direction: row;
    }
    &.column {
      flex-direction: column;
    }
    &.centered {
      justify-content: center;
    }
    &.space-between {
      justify-content: space-between;
    }
    &.space-around {
      justify-content: space-around;
    }
  }

  .flexible {
    display: flex;
  }

  .panel, .block, .panel-container {
    &.flex-1 {
      flex: 1;
    }
    &.flex-2 {
      flex: 2;
    }
    &.flex-3 {
      flex: 3;
    }
    &.flex-4 {
      flex: 4;
    }
    &.flex-5 {
      flex: 5;
    }

    &.centered {
      align-self: center;
    }
  }

  .panel {
    padding: $padding-md;
    border: 1px solid #dedede;
    border-radius: 3px;
    box-sizing: border-box;
    background: #fcfcfc;
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, 0.2);

    &.nostyle {
      background: transparent;
      border: none;
      box-shadow: none;
    }

    &.noshadow {
      box-shadow: none;
    }

    &.clickable {
      cursor: pointer;
      &:hover {
        border: 1px solid $jawgblue;
      }
    }

    &.noborder {
      border: none;
      &:hover {
        border: none;
      }
    }

    .panel-title {
      margin: 0 0 $margin-xs;
      font-size: 28px;
      font-weight: 300;
      text-align: left;
      color: #222;
    }
  }

  /********** MARGINS ************/

  .margin-left-xs {
    margin-left: $margin-xs;
  }
  .margin-left-sm {
    margin-left: $margin-md;
  }
  .margin-left-md {
    margin-left: $margin-xlg;
  }
  .margin-left-lg {
    margin-left: $margin-xxlg;
  }
  .margin-right-xs {
    margin-right: $margin-xs;
  }
  .margin-right-sm {
    margin-right: $margin-md;
  }
  .margin-right-md {
    margin-right: $margin-xlg;
  }
  .margin-right-lg {
    margin-right: $margin-xxlg;
  }
  .margin-top-xs {
    margin-top: $margin-xs;
  }
  .margin-top-sm {
    margin-top: $margin-md;
  }
  .margin-top-md {
    margin-top: $margin-xlg;
  }
  .margin-top-lg {
    margin-top: $margin-xxlg;
  }
  .margin-bottom-xs {
    margin-bottom: $margin-xs;
  }
  .margin-bottom-sm {
    margin-bottom: $margin-md;
  }
  .margin-bottom-md {
    margin-bottom: $margin-xlg;
  }
  .margin-bottom-lg {
    margin-bottom: $margin-xxlg;
  }
  .margin-side-xs {
    margin: 0 $margin-xs;
  }
  .margin-side-sm {
    margin: 0 $margin-md;
  }
  .margin-side-md {
    margin: 0 $margin-xlg;
  }
  .margin-side-lg {
    margin: 0 $margin-xxlg;
  }
  .margin-height-xs {
    margin: $margin-xs 0;
  }
  .margin-height-sm {
    margin: $margin-md 0;
  }
  .margin-height-md {
    margin: $margin-xlg 0;
  }
  .margin-height-lg {
    margin: $margin-xxlg 0;
  }
  .margin-xs {
    margin: $margin-xs;
  }
  .margin-sm {
    margin: $margin-md;
  }
  .margin-md {
    margin: $margin-xlg;
  }
  .margin-lg {
    margin: $margin-xxlg;
  }

  /********** PADDING ************/

  .padding-left-xs {
    padding-left: $padding-xs;
  }
  .padding-left-sm {
    padding-left: $padding-md;
  }
  .padding-left-md {
    padding-left: $padding-xlg;
  }
  .padding-left-lg {
    padding-left: $padding-xxlg;
  }
  .padding-right-xs {
    padding-right: $padding-xs;
  }
  .padding-right-sm {
    padding-right: $padding-md;
  }
  .padding-right-md {
    padding-right: $padding-xlg;
  }
  .padding-right-lg {
    padding-right: $padding-xxlg;
  }
  .padding-top-xs {
    padding-top: $padding-xs;
  }
  .padding-top-sm {
    padding-top: $padding-md;
  }
  .padding-top-md {
    padding-top: $padding-xlg;
  }
  .padding-top-lg {
    padding-top: $padding-xxlg;
  }
  .padding-bottom-xs {
    padding-bottom: $padding-xs;
  }
  .padding-bottom-sm {
    padding-bottom: $padding-md;
  }
  .padding-bottom-md {
    padding-bottom: $padding-xlg;
  }
  .padding-bottom-lg {
    padding-bottom: $padding-xxlg;
  }
  .padding-side-xs {
    padding: 0 $padding-xs;
  }
  .padding-side-sm {
    padding: 0 $padding-md;
  }
  .padding-side-md {
    padding: 0 $padding-xlg;
  }
  .padding-side-lg {
    padding: 0 $padding-xxlg;
  }
  .padding-height-xs {
    padding: $padding-xs 0;
  }
  .padding-height-sm {
    padding: $padding-md 0;
  }
  .padding-height-md {
    padding: $padding-xlg 0;
  }
  .padding-height-lg {
    padding: $padding-xxlg 0;
  }
  .padding-xs {
    padding: $padding-xs;
  }
  .padding-sm {
    padding: $padding-md;
  }
  .padding-md {
    padding: $padding-xlg;
  }
  .padding-lg {
    padding: $padding-xxlg;
  }

  /*** END JAWG STRAP WRAPPER ****/
}