arakrail/resources/client/assets/sass/app.scss

///////////////////// fonts
@font-face {
  font-family: 'sahel';
  src: url("../fonts/sahel/Sahel-FD.eot"),
  url("../fonts/sahel/Sahel-FD.ttf"),
  url("../fonts/sahel/Sahel-FD.woff") ;
}

@font-face {
  font-family: 'sahel-bold';
  src: url("../fonts/sahel/Sahel-Bold-FD.eot"),
  url("../fonts/sahel/Sahel-Bold-FD.ttf"),
  url("../fonts/sahel/Sahel-Bold-FD.woff") ;
}

@font-face {
  font-family: 'sahel-black';
  src: url("../fonts/sahel/Sahel-Black-FD.eot"),
  url("../fonts/sahel/Sahel-Black-FD.ttf"),
  url("../fonts/sahel/Sahel-Black-FD.woff") ;
}


///////////////////// mixins
@mixin defaultTransition() {
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

@mixin transition($p) {
  transition: $p;
  -webkit-transition: $p;
  -moz-transition: $p;
  -ms-transition: $p;
  -o-transition: $p;
}

@mixin transform($p) {
  transform: $p;
  -webkit-transform: $p;
  -moz-transform: $p;
  -ms-transform: $p;
  -o-transform: $p;
}

@mixin borderRadius($p) {
  border-radius: $p;
  -webkit-border-radius: $p;
  -moz-border-radius: $p;
}

///////////////////// variables
%appearance {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

%userSelect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

///////////////////// variables
$theme: #1B407C;
$bg: #F0F0F0;
$darkGray: #303030;


////// global

body {
  direction: rtl;
  background: $bg;

  &:lang(en) {
    direction: ltr;
  }
}

p, a, span, b, i {
  font-family: 'sahel';
  color: rgba(0, 0, 0, 0.7);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'sahel-bold';
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
  }
}

/////// global classes
.logo {
  display: inline-block;
  width: 50px;

  svg {
    width: 100%;
  }
}

.header {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;

  .links {
    li {
      text-align: right;
      padding: 30px 0;

      &:lang(en) {
        text-align: left;
      }

      &:first-child {
        text-align: right;

        &:lang(en) {
          text-align: left;
        }
      }

      a:not(.logo) {
        position: relative;
        padding: 5px 0;

        &::after {
          content: '';
          display: block;
          width: 20px;
          height: 1px;
          background: $darkGray;
          position: absolute;
          bottom: 0;
          right: 0;
          @include defaultTransition;
        }

        &:lang(en) {
          &::after {
            right: auto;
            left: 0;
          }
        }

        &:hover {
          &::after {
            width: 100%;
          }
        }
      }

    }
  }

  .lag-switcher {
    .dropdown {
      position: relative;

      .title {
        @include defaultTransition();
        padding: 5px;

        p {
          @extend %userSelect;
          @include defaultTransition();
          text-align: center;
          font-size: 23px;
        }
      }

      .dropMenu {
        width: 100%;
        height: 0;
        overflow: hidden;
        background: $darkGray;
        @include defaultTransition();
        position: absolute;
        top: 27px;
        left: 0;

        .drop-item {
          padding-top: 10px;

          p {
            padding: 5px;
            color: #fff;
            font-size: 13px;
            text-align: center;
            cursor: pointer;
            @extend %userSelect;
            @include defaultTransition();
          }
        }
      }
    }

    .dropdown-active {
      .title {
        background: $darkGray;

        p {
            color: #fff;

        }
      }

      .dropMenu {
        height: 75px;

        p:hover {
          background: rgba(255, 255, 255, 0.05);
        }
      }
    }
  }
}