lindat-common/src/lindat.less

Common Lindat Theme (header and footer)

// These variables are taken from bootstrap/less/variables.less
//
// Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
// Small screen / tablet
@screen-sm-min: 768px;
// Medium screen / desktop
@screen-md-min: 992px;
// Large screen / wide desktop
@screen-lg-min: 1200px;

// Small screen / tablet
@container-sm: (720px + @grid-gutter-width);
// Medium screen / desktop
@container-md: (940px + @grid-gutter-width);
// Large screen / wide desktop
@container-lg: (1140px + @grid-gutter-width);

@header-bg: #f0f0f0;
@header-color: #000;

@footer-bg: #F8F8F8;
@footer-color: #606060;
@footer-border: #E0E0E0;
@footer-link-color: #808080;
@footer-header-border: #C0C0C0;

@common-color: #ccab28;
@repository-color: #7479b8;
@pmltq-color: #292E99;

// The menu colors and IDs
// This will actually generate css for each menu item at the end of the file.
//
// #lindat-@{name} {
//   .lindat-header,
//   .lindat-menu > li > a:hover,
//   .lindat-@{name}-item > a,
//   {
//     border-bottom-color: @color;
//   }
// }
//
// For new items just add items to both lists below.
@menu-items:  home,          repository,        pmltq,        treex,         tools services,         events,        about;
@menu-colors: @common-color, @repository-color, @pmltq-color, @common-color, @common-color, @common-color, @common-color;

/* The only two global things we have to set */
body {
    margin: 0; padding: 0;
}

.lindat-common {
  font-family: "Droid Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  font-size: 14px;

  // Scope box-sizing because it can break BS3 styles
  *, *:before, *:after {
    box-sizing: inherit;
  }
}

.lindat-container {
  @gutter: @grid-gutter-width;
  margin-right: auto;
  margin-left: auto;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}

.lindat-header {
  border-bottom: 3px solid @common-color;
  background-color: @header-bg;
}

.lindat-menu-btn {
  position: relative;
  padding: 9px 10px;
  margin: 8px 15px;
  background-color: transparent;
  border: 1px solid #dddddd;
  border-radius: 4px;
  cursor: pointer;
  outline: none;

  .lindat-icon-bar + .lindat-icon-bar {
    margin-top: 4px;
  }

  .lindat-icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #cccccc;
  }
  @media (min-width: @screen-sm-min) {
    display: none;
  }
}

.lindat-menu {
  margin: 0; padding: 0;
  list-style: none;
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;

  &>li {
    list-style: none;
    &>a {
      text-decoration: none;
      padding: 10px 15px;
      font-size: 16px;
      display: block;
      color: @header-color;
      &:hover {
        outline: 0;
      }
    }
  }

  @media (max-width: @screen-sm-min) {
    &.lindat-open {
      display: flex;
      flex-direction: column;
      &>li>a:hover {
        background-color: darken(@header-bg, 10%);
      }
    }
  }

  @media (min-width: @screen-sm-min) {
    display: flex;
    height: 53px;

    &>li {
      display: flex;
      align-items: stretch;
      justify-content: center;
      border-right: dotted #e4e4e4 1px;
      &>a {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding: 0 15px;
        font-weight: bolder;
        text-align: center;
        border-bottom: 3px solid transparent;
        &:hover {
          outline: 0;
          border-bottom-color: @common-color;
        }
      }
    }
  }

  @media (min-width: @screen-md-min) {
    &>li>a {
      font-size: 16px;
    }
  }
}

.lindat-logo {
  .header-logo("./images/lindat-logo-menu.png");
}

.clarin-logo {
  .header-logo("./images/clarin-logo-menu.png");
}

.header-logo(@image) {

  @media (min-width: @screen-sm-min) {
    background: url(@image) no-repeat center;
    // background-size: contain;
    min-width: 100px;
  }

  & > span {
    @media (min-width: @screen-sm-min) {
      display: none;
    }
  }
}

.lindat-footer {
  color: @footer-color;
  text-align: center;
  margin: 0;

  h1 {
    border-bottom: 1px solid @footer-header-border;
    font-size: 14px;
    font-weight: bold;
    line-height: 25px;
    margin: 0 0 5px 0;
    color: @footer-color;
  }

  a {
    color: @footer-link-color;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }

  ul {
    padding-left: 20px;
    margin: 0;
    text-align: left;
  }

  li {
    line-height: 20px;
  }
}

.lindat-footer-main {
  text-align: left;
  border-top: 1px solid @footer-border;
  border-bottom: 1px solid @footer-border;
  box-shadow: inset 0 -1px 0 white;
  background-color: @footer-bg;
  padding-top: 20px;
}

.lindat-footer-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  @media (min-width: @screen-md-min) {
    flex-wrap: nowrap;
  }
}

.lindat-footer-left {
  flex: 0 0 auto;
  order: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
  @media (min-width: @screen-md-min) {
    order: 1;
  }
}

.lindat-footer-text {
  flex: 1 1 @screen-sm-min;
  order: 2;
  display: flex;
  flex-direction: column;

  @media (min-width: @screen-sm-min) {
    flex-direction: row;
  }

  @media (min-width: @screen-md-min) {
    flex: 1 1 auto;
  }
}

.lindat-footer-text1 {
  flex: 1 1 auto;
  order: 1;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}

.lindat-footer-text2 {
  flex: 1 1 auto;
  order: 2;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}

.lindat-footer-text3 {
  flex: 1 1 auto;
  order: 3;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
  white-space: nowrap;
}

.lindat-footer-right {
  flex: 0 0 auto;
  order: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 20px;
}

.lindat-clarinb-logo {
  .footer-logo("images/clarinb.png", 176px, 41px)
}

.lindat-clarink-logo {
  .footer-logo("images/clarink.png", 176px, 41px)
}

.lindat-dsa-logo {
  .footer-logo("images/dsa2017.jpg", 90px, 90px);
  margin: 10px 0;
}

.lindat-logo-mono {
  .footer-logo("images/lindat-logo-mono.png", 103px, 59px);
}

.lindat-msmt-logo {
  .footer-logo("images/msmt-mono.png", 120px, 71px);
  margin-top: 10px;
  background-size: 120px;
  background-position: left;
}

.lindat-copyright {
  padding: 5px;
  font-size: 90%;
}

// Logo mixin for images in footer
.footer-logo(@image, @width, @height) {
  background: url(@image) no-repeat center;
  width: @width;
  height: @height;
  display: block;
}

// Generate css for menu items (see variables at the beginning of the file)
.createMenu(@item:1) when (@item <= length(@menu-items)) {
  @names: extract(@menu-items, @item);
  @color: extract(extract(@menu-colors, @item), 1);

  .loopNames(@counter:1) when (@counter <= length(@names)){
    @name: extract(@names, @counter);
    #lindat-@{name} {
      .lindat-header,
      .lindat-menu > li > a:hover,
      .lindat-@{name}-item > a,
      {
        border-bottom-color: @color;
      }
    }
    .loopNames((@counter+1));
  }
  .loopNames();

  .createMenu((@item + 1));
}
.createMenu();

// injector
// endinjector