appBar.scss 1.08 KB
Newer Older
Andrew Hrdy's avatar
Andrew Hrdy committed
1 2
@import '../variables';

Andrew Hrdy's avatar
Andrew Hrdy committed
3 4 5
.app-bar {
  background-color: white !important;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
6
}
Andrew Hrdy's avatar
Andrew Hrdy committed
7 8 9 10 11

.app-bar-logo {
  width: 30px;
  height: 30px;
  margin-right: 5px;
12
}
Andrew Hrdy's avatar
Andrew Hrdy committed
13 14 15

.app-bar-text-color {
  color: #354052;
16
}
Andrew Hrdy's avatar
Andrew Hrdy committed
17

Andrew Hrdy's avatar
Andrew Hrdy committed
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
.app-bar-logo-name, .app-bar-search-menu {
  display: flex;
  align-items: center;
}

@media screen and (min-width: map-get($breakpoints, lg)) {
  .app-bar-logo-name {
    margin-right: auto !important;
  }

  .app-bar-menu-button {
    display: none !important;
  }
}

Andrew Hrdy's avatar
Andrew Hrdy committed
33
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
Andrew Hrdy's avatar
Andrew Hrdy committed
34 35 36 37
  .app-bar-link-button {
    display: block !important;
    padding: 0 !important;
    text-align: left;
38
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
39 40 41 42

  .app-bar-hide {
    max-height: 0 !important;
    overflow: hidden
43
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
44 45 46

  .app-bar-tool-bar {
    flex-wrap: wrap;
Andrew Hrdy's avatar
Andrew Hrdy committed
47
    justify-content: space-between;
48
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
49 50 51 52 53 54

  .app-bar-link-container {
    display: block;
    flex-basis: 100%;
    transition: ease-in-out 2s;
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
55 56 57 58 59 60

  .app-bar-search-expanded {
    .app-bar-logo, .app-bar-title, .app-bar-menu-button, .app-bar-link-container {
      display: none !important;
    }
  }
Andrew Hrdy's avatar
Andrew Hrdy committed
61
}