Sidebar.scss

//* Define the variables to be used in this stylesheet
@import "mixins";
@import "settings";

@include breakpoint(small up) {
  .sidebar {
    background-color: $light-grey;
    padding-top: 30px;
    padding-bottom: 30px;
    .widget {
      margin-bottom: 20px;
      .widgettitle {
        @include josefin(28px, $dark-blue, 400, uppercase);
        border-bottom: 1px solid $dark-blue;
        text-align: center;
      }
      &:last-child {
        margin-bottom: 0;
      }
      h5 {
        margin-bottom: 0;
        a {
          color: $dark-blue;
          &:hover {
            color: $light-blue;
          }
        }
      }
      .calendar_wrap {
        #wp-calendar {
          margin-bottom: 0;
          caption {
            @include josefin(20px, $dark-blue, 300, uppercase);
          }
          thead {
            border: 0;
            background-color: transparent;
            tr {
              border: 0;
              th {
                @include josefin(18px, $dark-blue, 400, uppercase);
                border-right: 0;
              }
            }
          }
          tbody {
            background-color: transparent;
            color: $dark-blue;
            border: 0;
            tr {
              border: 0;
              td {
                border-left: 0;
                text-align: center;
                border-radius: 3px;
                &#today {
                  background-color: $dark-blue;
                  color: $off-white;
                  a {
                    color: $off-white;
                  }
                  &:hover {
                    background-color: transparent;
                    color: $dark-blue;
                    a {
                      color: $dark-blue;
                    }
                  }
                }
                a {
                  color: $dark-blue;
                }
                &:hover {
                  background-color: $dark-blue;
                  color: $off-white;
                  a {
                    color: $off-white;
                  }
                }
              }
            }
          }
          tfoot {
            background-color: transparent;
            border: 0;
            td {
              text-align: center;
              @include josefin(20px, $dark-blue, 300, uppercase);
              a {
                color: $dark-blue;
                &:hover {
                  color: $light-blue;
                }
              }
            }
          }
        }
      }
      .tagcloud {
        a {
          @include josefin(16px !important, $dark-blue, 400, uppercase);
          width: auto;
          padding: 3px 8px 0;
          border: 1px solid $dark-blue;
          clear: both;
          display: inline-block;
          margin-right: 5px;
          margin-bottom: 5px;
          &:hover {
            color: $off-white;
            background-color: $dark-blue;
          }
        }
      }
      &.jetpack_subscription_widget {
        #subscribe-email {
          position: relative;
          input[type="email"] {
            width: 100%;
          }
        }
        #subscribe-submit {
          input[type="submit"] {
            width: 100%;
            border: 0 !important;
            border-radius: 0;
            background-color: $dark-blue;
            color: $off-white !important;
            line-height: 1 !important;
            padding: 10px 15px;
            &:hover {
              background-color: $light-blue;
            }
          }
        }
      }
      &.jm_playlist {
        a {
          .video {
            padding: 10px 0;
            border-bottom: 1px solid $dark-blue;
            margin: 0 auto;
            .video-title {
              @include josefin(16px, $dark-blue, 400, none);
              width: 100%;
            }
            .video-time {
              @include josefin(18px, $dark-blue, 400, none);
            }
            .columns {
              &:first-child {
                padding-left: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
              &:nth-child(2) {
                padding-left: 0;
                padding-right: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
              &:last-child {
                padding-right: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
            }
            &.current-video {
              background-color: $dark-grey;
            }
            &:hover {
              background-color: $off-white;
            }
          }
          &:last-child {
            .video {
              border-bottom: 0;
            }
          }
        }
      }
      &.jm_latest_video_widget {
        .video-featured-image {
          margin-bottom: 10px;
        }
        .video-name {
          @include josefin(22px, $dark-blue, 400, none);
        }
        .video-detail {
          @include josefin(18px, $dark-blue, 400, none);
        }
        p {
          font-size: 16px;
        }
        .button {
          width: 100%;
        }
      }
    }
  }
}