_layout.scss 1.66 KB
Newer Older
arturo's avatar
arturo committed
1 2 3
// Form
$form-group-margin-bottom: space-x(3);

arturo's avatar
arturo committed
4 5 6 7 8 9 10 11 12 13 14
/// Topbar
$topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calculation)
$topbar-input-width: 304px;
$topbar-item-margin: space-x(0.5);
$topbar-fixed-button-width: 136px;

/// Sidebar
$sidebar-width: 480px;
$sidebar-height: calc(100vh - #{ $topbar-height });
$sidebar-tab-margin-x: space-x(2.5);

arturo's avatar
arturo committed
15 16 17
/// Grid constants
$layout-height: calc(100vh - #{ $topbar-height} ); // @TODO: use css custom properties

arturo's avatar
arturo committed
18 19 20
/// Misc
$overlay-radius: 5px;

arturo's avatar
arturo committed
21

22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
@mixin aside-topbar() {
  $border-color: mix-alpha($navbar-dark-hover-color, 5%);

  padding: 0 space-x(1);
  height: 100%;

  @include right-handed() {
    border-left: 1px solid $border-color;
  }

  @include left-handed() {
    border-right: 1px solid $border-color
  }
}

@mixin top-teaser() {
  background: linear-gradient(
    to top,
    mix-alpha($body-bg, 0%) 0%,
    mix-alpha($body-bg, 100%) 45%
  );
}

@mixin bottom-teaser() {
  background: linear-gradient(
    to bottom,
    mix-alpha($body-bg, 0%) 0%,
    mix-alpha($body-bg, 100%) 45%
  );
}
arturo's avatar
arturo committed
52 53


arturo's avatar
arturo committed
54
@mixin term-window() {
arturo's avatar
arturo committed
55 56 57 58 59 60 61
  @include hidden-scrollbar;

  $teaser-height: 16px;

  background-color: $body-bg;
  height: 100%;
  position: relative;
arturo's avatar
arturo committed
62
  z-index: 0;
arturo's avatar
arturo committed
63 64 65 66 67

  &::before {
    @include top-teaser;

    content: "";
arturo's avatar
arturo committed
68
    z-index: z-index("tile", "top-teaser");
arturo's avatar
arturo committed
69 70 71 72 73 74 75 76 77 78 79 80
    pointer-events: none;
    position: sticky;
    top: 0;
    height: $teaser-height;
    width: 100%;
    display: block;
  }

  &::after {
    @include bottom-teaser;

    content: "";
arturo's avatar
arturo committed
81
    z-index: z-index("tile", "bottom-teaser");
arturo's avatar
arturo committed
82 83 84 85 86 87 88 89
    pointer-events: none;
    position: sticky;
    bottom: 0;
    height: $teaser-height;
    width: 100%;
    display: block;
  }
}