rails_admin_featured_content 1.0.3

data/app/assets/stylesheets/rails_admin/featured_content.scss

@@ -0,0 +1,599 @@
+/*
+ *= require owl.carousel
+ *= require owl.theme
+ */
+
+@import 'medium-editor/medium-editor';
+@import 'medium-editor/themes/bootstrap';
+
+.fc-snippet {
+  position: fixed;
+  z-index: 100;
+  top: 50px;
+  bottom: 110px;
+  right: 0;
+
+  width: 180px;
+
+  padding: 20px;
+
+  background: #f8f8f8;
+  border-left: solid 1px rgba(0,0,0,.1);
+
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.fc-snippet__btn {
+  display: block;
+  text-decoration: none;
+  margin-bottom: 20px;
+
+  transition: box-shadow .1s ease;
+
+  &:hover {
+    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
+  }
+}
+
+.fc-snippet__image {
+  width: 100%;
+}
+
+.fc-controls {
+  position: fixed;
+  z-index: 100;
+  bottom: 0;
+  right: 0;
+
+  width: 180px;
+
+  padding: 20px;
+
+  background: #f8f8f8;
+  border-top: solid 1px rgba(0,0,0,.1);
+  border-left: solid 1px rgba(0,0,0,.1);
+}
+
+
+.fc-tools {
+  position: absolute;
+  z-index: 300;
+  top: 0;
+  left: -40px;
+
+  border-radius: .4em;
+  background: darken(#fff, 7%);
+
+  overflow: hidden;
+}
+
+.fc-tools--center {
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+
+  .fc-tools__btn {
+    display: inline-block;
+  }
+}
+
+.fc-tools--disabled {
+  z-index: 100;
+}
+
+.fc-tools__btn {
+  display: 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__input {
+
+}
+
+.fc-tools__input--upload {
+  display: none !important;
+}
+
+
+.fc-container {
+  width: 777px;
+  padding: 0 0 0 40px;
+}
+
+.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-row--flex {
+  display: flex;
+}
+
+.fc-loading {
+  position: absolute;
+  z-index: 200;
+  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;
+  }
+
+  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: 'Open Sans', sans-serif !important;
+    font-weight: 700 !important;
+  }
+}
+
+.fc-item--border {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+
+  border-bottom: solid 1px rgba(#111, .06);
+}
+
+.fc-link {
+  display: none;
+}
+
+.fc-figure {
+  position: relative;
+  margin: 0 0 10px;
+
+  text-align: center;
+
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.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 {
+  color: lighten(#111, 40%);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px;
+  text-transform: uppercase;
+
+  margin: 0 0 10px;
+}
+
+.fc-title {
+  display: block;
+  width: 100%;
+  line-height: 1.2;
+
+  color: lighten(#111, 23%) !important;
+  font-size: 16px;
+  letter-spacing: -.04em;
+
+  margin: 0;
+}
+
+.fc-title--highlight {
+  padding: 8px;
+  background: #333;
+
+  color: #fff !important;
+  font-size: 19px !important;
+}
+
+.fc-text {
+  line-height: 1.5;
+
+  color: lighten(#111, 30%);
+  font-size: 14px;
+
+  margin: 10px 0 0;
+}
+
+
+@media screen and (min-width: 460px) {
+  .fc-figure {
+    float: left;
+    height: 112px;
+    margin: 4px 16px 0 0;
+  }
+
+  .fc-caption {
+    font-size: 13px;
+  }
+
+  .fc-title {
+    line-height: 1.4;
+    font-size: 20px;
+  }
+
+  .fc-title--small {
+    font-size: 17px;
+  }
+
+  .fc-title--large {
+    line-height: 1.3;
+    font-size: 26px;
+  }
+
+  .fc-text {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .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 {
+    float: none;
+    width: 100%;
+    margin: 0 16px 10px 0;
+
+    .fc-image {
+      width: 100%;
+      height: auto;
+    }
+  }
+
+  .fc-figure--small {
+    height: 64px;
+  }
+
+  .fc-figure--large {
+    height: 128px;
+  }
+
+  .fc-figure--clip {
+    .fc-figure {
+      width: 160px;
+    }
+
+    .fc-figure--small {
+      width: 96px;
+    }
+
+    .fc-figure--large {
+      width: 224px;
+    }
+  }
+}
+
+
+// slide
+
+.fc-slide {
+
+  .owl-controls {
+    position: relative;
+    height: 30px;
+    line-height: 30px;
+
+    .owl-pagination {
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      span {
+        margin: 0 10px 0 0;
+        width: 10px;
+        height: 10px;
+        line-height: 1;
+      }
+    }
+
+    .owl-buttons {
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      div {
+        margin: 0;
+
+        color: rgba(0,0,0,.6);
+        font-size: 30px;
+        text-align: center;
+
+        width: 30px;
+        line-height: 1;
+        padding: 0;
+        border-radius: 0;
+        background: none;
+      }
+    }
+  }
+}
+
+.fc-slide__item {
+  position: relative;
+  height: 496px;
+  overflow: hidden;
+}
+
+.fc-slide__caption {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 300;
+  margin: 32px;
+
+  color: #fff;
+  font-size: 16px;
+  text-transform: uppercase;
+
+  display: block;
+  min-width: calc(100% - 64px);
+  line-height: 1.6;
+
+  text-shadow: 1px 1px 0 rgba(0,0,0,.5);
+
+  &:after {
+    content: "";
+
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+
+    display: block;
+    width: 48px;
+    height: 3px;
+
+    background: #444;
+  }
+}
+
+h2.fc-slide__caption {
+  font-weight: 600 !important;
+}
+
+.fc-slide__content {
+  padding: 32px;
+}
+
+.fc-slide__title {
+  margin: 0;
+
+  width: 100% !important;
+  line-height: 1.4;
+  color: #fff !important;
+  letter-spacing: -.04em;
+  font-size: 33px;
+
+  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
+}
+
+.fc-slide__text {
+  margin: 8px 0 0;
+
+  width: 100% !important;
+  color: #fff;
+  font-size: 19px;
+  line-height: 1.6;
+
+  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
+}
+
+.fc-slide__figure {
+  margin: 0;
+
+  width: 100%;
+  height: 0;
+  border-radius: 4px;
+  padding-bottom: 60%;
+
+  overflow: hidden;
+
+  &:before {
+    content: "";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: .9;
+    background: rgba(#000, .4);
+    background-size: 120%;
+    border-radius: 4px;
+  }
+}
+
+.fc-slide__image {
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+  z-index: 100;
+  z-index: 0;
+}
+
+.fc-slide__link {
+  display: none;
+}
+
+.fc-slide__content {
+  position: absolute;
+  z-index: 200;
+  left: 0;
+  bottom: 0;
+  padding: 32px;
+
+  width: 100%;
+}