@uportal/app-framework/components/css/buckyless/widget.less

Application Framework for uPortal

/**
 * Licensed to Apereo under one or more contributor license
 * agreements. See the NOTICE file distributed with this work
 * for additional information regarding copyright ownership.
 * Apereo licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License.  You may obtain a
 * copy of the License at the following location:
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

// SHARED WIDGET STYLES
.widget-frame {
  position: relative;
  margin: 5px;
  background: @grayscale1;
  border-radius: 3px;
  height: 290px;
  min-width: 290px;
  color: @grayscale10;

  .widget-header {
    height: 60px;
    line-height: 1.1;
    align-items: center;
    padding: 0 40px;

    .md-title {
      font-size: 18px;
      font-weight: 200;
    }
  }

  .widget-body {
    padding: 0 8px;
  }

  .widget-content {
    height: 230px;
    padding: 0;

    .bold {
      font-weight: 500;
    }

    .widget-type-container {
      height: 100%;
    }

    a {
      color: @link-color;
    }

    .launch-app-button {
      width: 100%;
      padding: 8px;
      position: absolute;
      background-color: @grayscale3;
      border: 0 solid transparent;
      bottom: 0;
      margin: 0;
      text-align: center;
      display: block;
      color: @grayscale8;
      border-radius: 0 0 4px 4px;
      box-shadow: none;
      transition: @transition-all;

      &:hover {
        background-color: @color1;
        color: @white;
        text-decoration: none;
      }
    }
  }

  .widget-title {
    font-size: 1.2em;
    padding: 8px;
    margin: 0;
    text-align: center;
    color: @grayscale10;

    h4 {
      margin: 0;
    }
  }

  .widget-icon-container {
    text-align: center;

    i,
    .material-icons {
      color: @grayscale10;
      font-size: 70px;
      height: 70px;
      width: 70px;
      min-height: 70px;
      min-width: 70px;
    }
  }

  p {
    padding: 3px 8px;
  }

  hr {
    margin-top: 0;
    margin-bottom: 0;
  }

  // MAINTENANCE MODE OVERLAY
  .overlay__widget-mode {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: @widget-depth-2;
    border-radius: 3px;
    top: 0;

    .overlay-warning-icon {
      text-align: center;
    }

    .overlay-content {
      text-align: left;
      font-weight: bold;
      padding: 10px;
      background: #fff;
      margin: 66px 10px 0;
      display: block;
      border-radius: 3px;

      p {
        margin-bottom: 0;
        text-align: center;

        .material-icons {
          height: 40px;
          width: 40px;
          font-size: 40px;
        }
      }
    }
  }

  // VARIABLE CONTENT WIDGET
  time-sensitive {
    .widget-body {
      .tsc__title,
      .tsc__days-left {
        font-weight: 500;
      }

      .tsc__last-day {
        text-align: center;
        padding: 6px;
        margin-top: 6px;

        .material-icons {
          font-size: 18px;
          line-height: 20px;
        }
      }

      .tsc__extra-buttons {
        width: 100%;
        padding: 0 20px;
        margin-top: 18px;

        > a {
          margin: 0 12px;
        }
      }
    }
  }

  // LIST OF LINKS WIDGET
  list-of-links {
    .list-of-links {
      height: 194px;
      padding: 0;

      div[class^="list-of-links__"] {
        height: 194px;
        overflow: hidden;
        display: -webkit-box;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        max-width: 290px;
        margin: 0 auto;

        &.list-of-links__1 {
          -webkit-box-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          align-items: center;
          -webkit-align-content: center;
          align-content: center;
        }

        &.list-of-links__2 {
          -webkit-box-pack: space-around;
          justify-content: space-around;
          -webkit-box-align: baseline;
          align-items: baseline;
          -webkit-align-content: center;
          align-content: center;
          padding: 40px 0;
        }

        &.list-of-links__3 {
          -webkit-box-pack: space-around;
          justify-content: space-around;
          -webkit-box-align: baseline;
          align-items: baseline;
          -webkit-align-content: space-around;
          align-content: space-around;
        }

        &.list-of-links__4 {
          -webkit-box-pack: space-around;
          justify-content: space-around;
          -webkit-box-align: baseline;
          align-items: baseline;
          -webkit-align-content: flex-start;
          align-content: flex-start;
        }

        &.list-of-links__long {
          -webkit-box-pack: space-around;
          justify-content: space-around;

          .widget-list a:hover {
            cursor: pointer;
          }
        }

        circle-button {
          width: 120px;
          height: 90px;
          max-height: 90px;
          text-align: center;
        }
      }
    }
  }

  // OPTION LINK WIDGET
  option-link {
    .widget-option-link {
      height: 196px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;

      .option-link-icon {
        margin-bottom: 16px;

        i {
          color: @grayscale10;
          font-size: 70px;
        }
      }

      md-input-container {
        margin: 0 0 18px;
      }
    }
  }

  // RSS WIDGET
  rss-widget {
    .rss {
      overflow-y: hidden;
      height: 194px;

      .widget-list {
        max-height: 194px;

        li a {
          div {
            display: inline-block;
          }

          div.headline {
            width: 80%;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
          }

          div.headline.nodate {
            width: 100%;
          }

          div.date {
            width: 18%;
            font-size: 10px;
            vertical-align: top;
          }

          &.full-width {
            max-height: 20px;
          }
        }
      }
    }
  }

  // ACTION ITEMS WIDGET
  action-items {
    .action-items {
      .widget-list {
        margin: 0;

        p {
          font-size: 14px;
          line-height: 1.2;
        }

        div.action-item__quantity {
          background-color: @color2;
          color: @user-portal-logout-btn-text-color;
          width: 32px;
          line-height: 32px;
          border-radius: 50%;
          text-align: center;
          font-size: 20px;
          margin-right: 10px;
        }

        .action-item__error-quantity {
          margin-right: 16px;
        }
      }

      p.action-item__showing {
        font-size: 12px;
        color: @grayscale8;
      }

      .error {
        .material-icons {
          width: 40px;
          height: 40px;
          font-size: 40px;
          margin-right: 12px;
        }
      }
    }
  }

  // SEARCH WITH LINKS WIDGET
  search-with-links {
    md-input-container {
      margin-top: 0;
      padding-right: 16px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      align-content: flex-start;

      .md-button {
        margin: 0;
        padding: 0;
      }
    }

    div[class^="search-with-links__"] {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: baseline;
      align-content: center;
      width: 100%;

      circle-button {
        width: 120px;
        height: 88px;
        text-align: center;
      }
    }
  }

  // BASIC WIDGET
  .basic-widget {
    height: 194px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-content: center;

    .widget-icon-container {
      padding-top: 40px;
    }

    &:hover {
      text-decoration: none !important;
    }
  }

  // CUSTOM WIDGET
  .custom-widget {
    height: 194px;

    md-input-container {
      margin-top: 0;
      margin-bottom: 0;
      padding-right: 16px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      align-content: flex-start;
    }
  }

  // WEATHER WIDGET
  weather-widget,
  weather {
    .forecast .day {
      text-align: center;
      border-radius: 4px;
      padding: 0 8px;

      p {
        font-size: 11px;
      }
    }

    .fa-exclamation-triangle {
      font-size: -webkit-xxx-large;
      width: 100%;
      text-align: center;
      padding-bottom: 20px;
      padding-top: 12px;
    }

    .warning-message-weather-widget {
      text-align: -webkit-center;
      padding: 20px;
    }

    .fa-frown-o {
      font-size: 50px;
      width: 100%;
      text-align: center;
    }

    .error-message-weather-widget {
      font-size: smaller;
      text-align: center;
    }

    img {
      width: 42px;
      position: relative;
      right: 1px;
    }

    a {
      color: #666;
    }

    .credit {
      position: absolute;
      font-size: 9px;
      right: 0;

      a {
        color: @color1;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    .weather-dropdown {
      position: absolute;
      bottom: 39px;
      left: 12px;
      font-size: 10px;
    }

    .weather-not-clicked {
      color: #b70101;
    }

    @media (max-width: 1246px) {
      .weather-dropdown {
        right: 20px;
      }
    }

    @media (max-width: 1200px) {
      .weather-dropdown {
        right: 30px;
      }
    }
  }
}

// Compact/expanded mode shared styles
.list-content,
.widget-frame {
  .widget-action {
    position: absolute;
    display: inline;
    top: 0;
    right: 0;
    margin: 0;
    z-index: @widget-depth-1;

    .md-button {
      margin: 6px 0;

      .material-icons {
        font-size: 18px;
        line-height: 24px;
      }
    }

    &:focus {
      opacity: 1;
    }
  }
}

.list-content {
  position: relative;
  margin: 5px;
  background: #f3f3f3;
  border-radius: 3px;
  height: 150px;
  color: #333;
  text-align: center;

  &:hover {
    cursor: pointer;
  }

  a {
    display: block;
    height: 100%;
    box-shadow: 0 2px 0 #ddd;
    border-radius: 4px;
    transition: @background-transition;

    &:hover {
      background-color: #f8f8f8;
      box-shadow: 0 3px 0 #ddd;
    }
  }

  h4 {
    font-size: 1.2em;
    margin: 0;
    color: #333;
    padding: 0 5px;
  }

  div {
    display: inline-block;
    float: left;
  }

  .icon-container {
    width: 100%;
    height: 67%;
    padding-top: 30px;

    i,
    .material-icons {
      color: #333;
      vertical-align: middle;
      font-size: 50px;
      height: 50px;
      width: 50px;
      min-height: 50px;
      min-width: 50px;
    }
  }

  .list-item-container {
    display: table;
    width: 100%;
    height: 33%;

    h4 {
      display: table-cell;
      vertical-align: middle;
    }
  }
}

.add-favorites {
  background: transparent;
  border: 1px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover {
    border: 1px solid #f8f8f8;
  }

  a {
    transition: @background-transition;
    box-shadow: 0 0 0 transparent;
  }
}

//
.widget-body {
  .input-group {
    margin: 20px auto;

    input {
      border: 0 solid transparent;
    }
  }

  .icon-button-div {
    padding: 0 0 10px;
    text-align: center;

    p {
      font-size: 12px;
      font-weight: bold;
      margin: 0;
    }
  }

  .icon-button {
    width: 55px;
    height: 54px;
    border-radius: 1000px;
    padding-top: 17px;
    margin: 0 auto 3px;

    a {
      &.fa {
        color: @white;
      }
    }
  }
}

// 3.22.17: Should audit this CSS soon -- may be unnecessary/unused
.widget-frame select.form-control {
  margin: 0 auto 10px;
  width: auto;
}

.widget-list {
  margin: 0;
  padding: 0;

  li {
    border-top: 1px solid @grayscale3;
    margin: 0 15px;
    padding: 3px 0;

    a.full-width {
      display: block;

      &:hover {
        text-decoration: none;
      }
    }
  }

  li.no-highlight {
    background-color: @grayscale1 !important;
  }

  li:first-child {
    border-top: 0 solid transparent;
  }

  li:hover {
    margin: 0 5px;
    padding: 3px 10px;
    background-color: @grayscale3;
    border-radius: 4px;
  }

  li:hover + li {
    border-top: 0 solid transparent;
    padding: 4px 0 3px;
  }

  p {
    color: @grayscale8;
    margin: 0;
    padding: 0;
    font-size: 12px;

    &:hover {
      cursor: default;
    }
  }

  .bold {
    font-weight: 600;
    color: @grayscale10;
  }

  .right {
    float: right;
  }

  .offset {
    position: absolute;
    left: 55px;
  }
}

.portlet-widget {
  background-color: @color4;
  padding: 5px;
  margin: 5px;
  border-radius: 4px;
}

.simple-content-container {
  height: 290px;
  overflow: hidden;
}

.widget-simple-html {
  height: 210px;
  overflow: scroll;
}

.widget-grid {
  margin: 15px 15px 0;
}