luizpicolo/rails_admin_featured_content

/*
 *= require owl.carousel
 *= require owl.theme
 */

@import 'medium-editor/medium-editor';
@import 'medium-editor/themes/bootstrap';

.fc-snippet {
  position: fixed;
  z-index: 400;
  bottom: 54px;
  left: 0;
  right: 0;

  width: 100%;
  height: 100px;
  padding: 10px 0;
  background: #f8f8f8;
  border-top: solid 1px rgba(0,0,0,.1);
  overflow-y: scroll;
}

.fc-snippet__btn {
  box-sizing: border-box;
  float: left;
  width: 25%;
  padding: 10px;

  text-align: center;
  text-decoration: none;

  transition: box-shadow .1s ease;

  &:hover {
    text-decoration: none;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  }
}

.fc-snippet__caption {
  display: none;
  padding: 5px;

  color: rgba(0,0,0,.6);
  font-size: 10px;
}

.fc-snippet__image {
  width: 100%;
}

.fc-controls {
  position: fixed;
  z-index: 400;
  bottom: 0;
  right: 0;

  width: 100%;

  padding: 10px;

  background: #f8f8f8;
  border-top: solid 1px rgba(0,0,0,.1);
  border-left: solid 1px rgba(0,0,0,.1);

  .btn-block {
    margin-top: 0;
    width: auto !important;
  }

  .btn-right {
    float: right;
  }

  .btn-left {
    float: left;
  }
}

.fc-tools {
  margin-bottom: 10px;

  border-radius: .4rem;
  background: darken(#fff, 7%);
  overflow: hidden;

  text-align: right;
}

.fc-tools--center {
  position: absolute;
  z-index: 300;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.fc-tools--disabled {
  z-index: 100;
}

.fc-tools__btn {
  display: inline-block;

  font-size: 12px;
  text-align: center;
  text-transform: uppercase;

  padding: 10px;

  &:hover,
  &:focus {
    background: rgba(0,0,0,.05);
    text-decoration: none;
  }
}

.fc-tools__btn--delete {
  float: left;
}

.fc-tools__input {

}

.fc-tools__input--upload {
  display: none !important;
}

.fc-container {
  box-sizing: border-box;
  padding: 0 0 300px 0;

  font-family: 'Open Sans', sans-serif;
}

.fc-content {
  position: relative;
  max-width: 100%;
  height: auto !important;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.fc-row {
  position: relative;
}

.fc-loading {
  position: absolute;
  z-index: 400;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background: image_url('fc-loading.svg') no-repeat center rgba(#fff, .95);
}

.fc-search {
  margin-bottom: 10px;

  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: solid 1px #ccc;

  outline: none;

  &:focus {
    border-color: #999;
  }
}


[contenteditable="true"] {
  outline: none;
  min-height: 15px;

  &:focus {
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  }

  &:empty {
    background: rgba(#000, .1);
  }
}

.ui-sortable-placeholder {
  margin: 20px 0;
  height: 80px;

  background: rgba(0,0,0,.05);
  border: dashed 2px rgba(0,0,0,.05);
}


.fc-content {
  line-height: 1.6;

  color: rgba(0,0,0,.7);
  font-family: arial, sans-serif;
  font-size: 16px;

  margin-bottom: 30px;
}


.fc-row {
  position: relative;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.fc-date {
  color: lighten(#111, 50%);
  font-size: 12px;

  margin-bottom: 16px;
  padding-bottom: 16px;

  border-bottom: solid 1px rgba(#111, .06);
}

.fc-item {
  position: relative;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.fc-item--border {
  margin-bottom: 24px;
  padding-bottom: 24px;

  border-bottom: solid 1px rgba(#111, .06);
}

.fc-link {
  display: none;
}

.fc-figure {
  position: relative;

  float: left;
  margin: 0 1rem 0 0;

  width: 150px;
  height: 100px;
  border-radius: 4px;

  overflow: hidden;
}

.fc-figure--small {
  width: 90px;
  height: 60px;
}

.fc-figure--large {
  width: 150px;
  height: 100px;
}

.fc-image {
  margin-bottom: -7px;

  height: 100%;
  border-radius: 4px;
}

.fc-content {
  height: 144px;
  overflow: hidden;
}

.fc-time {
  line-height: 1.6;

  float: right;
  color: darken(#fff, 40%);
  font-size: 14px;
}

.fc-caption {
  margin: 0 0 8px;

  color: lighten(#111, 40%);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.fc-title {
  margin: 0;

  display: block;
  width: 100%;
  line-height: 1.4;

  color: lighten(#111, 23%) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.04em;

  + .fc-figure {
    margin-top: 8px;
  }
}

.fc-title--highlight {
  margin: 0;

  padding: 8px;
  background: #333;
  border-radius: 4px;

  color: #fff !important;
  font-size: 17px !important;
}

.fc-text {
  margin: 8px 0 0;

  line-height: 1.4;
  overflow: hidden;

  color: lighten(#111, 50%);
  font-family: Arial, sans-serif;
  font-size: 14px;
}

@media screen and (min-width: 460px) {
  .fc-snippet__caption {
    display: block;
  }

  .fc-caption {
    font-size: 13px;
  }

  .fc-title {
    line-height: 1.4;
    font-size: 19px;
  }

  .fc-title--small {
    font-size: 16px;
  }

  .fc-title--large {
    line-height: 1.3;
    font-size: 22px;
  }
}

@media screen and (min-width: 768px) {
  .fc-snippet {
    top: 50px;
    right: 0;
    bottom: 112px;
    left: auto;

    width: 150px;
    height: auto;
    padding: 20px;
    border: 0;
    border-left: solid 1px rgba(0,0,0,.1);

    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    transform: translateX(0%);
  }

  .fc-snippet__btn {
    margin-bottom: 20px;

    display: block;
    width: 100%;
    padding: 0;
  }

  .fc-tools {
    position: absolute;
    z-index: 300;
    top: 0;
    left: -40px;
  }

  .fc-tools__btn {
    display: block;
  }

  .fc-tools--center {
    position: absolute;
    z-index: 300;
    top: 50%;
    left: 50%;

    .fc-tools__btn {
      display: inline-block;
    }
  }

  .fc-controls {
    position: fixed;
    z-index: 100;
    bottom: 0;
    right: 0;

    width: 150px;

    padding: 20px;

    background: #f8f8f8;
    border-top: solid 1px rgba(0,0,0,.1);
    border-left: solid 1px rgba(0,0,0,.1);

    .btn-block {
      width: 100% !important;
    }

    .btn-block + .btn-block {
      margin-top: 5px;
    }

    .btn-left,
    .btn-right {
      float: none;
    }
  }

  .fc-container {
    box-sizing: border-box;
    padding: 30px 160px 100px 40px;
    width: 75%;
    margin: 0 auto;
  }

  .fc-row--flex {
    display: flex;
  }

  .fc-item--two {
    float: left;
    display: block;
    margin-right: 3.57866%;
    width: 48.21067%;

    &:nth-child(2n+1) {
      clear: left;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .fc-item--three {
    float: left;
    display: block;
    margin-right: 3.16844%;
    width: 31.22104%;

    &:nth-child(3n+1) {
      clear: left;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .fc-item--four {
    float: left;
    display: block;
    margin-right: 3.57866%;
    width: 22.316%;

    &:nth-child(4n+1) {
      clear: left;
    }

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .fc-date {
    font-size: 14px;
  }

  .fc-title--highlight {
    padding: 8px 14px;
  }

  .fc-figure--block {
    position: relative;
    float: none;
    margin: 0 1rem .5rem 0;

    width: 100%;
    height: 0;
    padding-bottom: 50%;

    .fc-image {
      position: absolute;
      top: 50%;
      left: 0;

      width: 100%;
      height: auto;

      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
}

// slide

.fc-slide {
  position: relative;

  overflow: hidden;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  .owl-controls {
    margin: 0;

    .owl-buttons {
      display: none;
    }

    .owl-pagination {
      margin-top: .5em;
      text-align: center;
    }

    .owl-page {
      display: inline-block;
      opacity: .6;

      span {
        display: block;

        width: 10px;
        height: 10px;
        margin: 0 4px;
        background: #999;
        border-radius: 100%;
      }

      &:hover,
      &:focus {
        opacity: 1;
      }
    }

    .owl-page.active {
      opacity: 1;
    }
  }
}

.fc-slide__item {
  position: relative;
  overflow: hidden;
}

.fc-slide__link {

}

.fc-slide__figure {
  position: relative;
  z-index: -1;
  margin: 0 0 .5rem;

  width: 100%;
  height: 0;
  padding-bottom: 60%;
  border-radius: 4px;
  overflow: hidden;
}

.fc-slide__image {
  position: absolute;

  display: block;
  width: 100%;
  min-height: 100%;
}

@media screen and (min-width: 768px) {
  .fc-slide__text {
    max-height: none;
  }
}

@media screen and (min-width: 990px) {
  .fc-slide {
    .owl-controls {
      .owl-buttons {
        position: absolute;
        top: 70px;
        right: 0;

        display: block;

        div {
          margin: 0;

          display: inline-block;
          opacity: 1;
          width: 48px;
          height: 48px;
          line-height: 48px;
          padding: 0;
          background: none;
          border-radius: 0;

          color: #fff;
          font-size: 32px;
          text-align: center;

          &:hover,
          &:focus {
            opacity: .7 !important;
          }
        }
      }
    }
  }
}