LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code





































CSS
/* Body */
.body {
  background: #F5F5F5;
  height: 100%;
  color: rgba(0, 0, 0, 0.87);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container */
.cp-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Row */
.cp-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -12px;
}

/* Column */
.cp-col-1 {
  width: 33.33333%;
  -ms-flex-preferred-size: 33.33333%;
      flex-basis: 33.33333%;
  padding: 0 12px;
  box-sizing: border-box;
}

.cp-col-2 {
  width: 66.66667%;
  -ms-flex-preferred-size: 66.66667%;
      flex-basis: 66.66667%;
  padding: 0 12px;
  box-sizing: border-box;
}

.cp-col-3 {
  width: 100%;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  padding: 0 12px;
  box-sizing: border-box;
}

[data-ripple='true'] {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
[data-ripple='true'] .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation: ripple 2s;
          animation: ripple 2s;
}

/* Material - FAB */
.cp-fab {
  z-index: 3000;
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-block;
  background: #38C5FF;
  border-radius: 100%;
  padding: 16px;
  color: #FFFFFF;
  line-height: 1;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.cp-fab:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.cp-fab.toggled {
  bottom: 240px;
}
.cp-fab.toggled .material-icons {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.cp-fab .material-icons {
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  vertical-align: middle;
}
.cp-panel {
  z-index: 2000;
  position: fixed;
  bottom: 0;
  left: 0;
  /* background: $white; */
  width: 100%;
  height: 0px;
  opacity: 0;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  overflow: auto;
  /* @include elevation(1); */
}
.cp-panel.toggled {
  height: 240px;
  opacity: 1;
}
.cp-panel .cp-container,
.cp-panel .cp-row,
.cp-panel .cp-col-1 {
  height: 100%;
}
.cp-panel .cp-row {
  box-sizing: border-box;
  padding: 24px 0;
}
.cp-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: #FFFFFF;
  height: 100%;
  overflow: hidden;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.cp-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.cp-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  min-height: 74px;
  padding: 16px;
  box-sizing: border-box;
}
.cp-card-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin: 0 16px 0 0;
  overflow: hidden;
}
.cp-card-thumbnail img {
  width: 100%;
}
.cp-card-title {
  color: #38C5FF;
  font-size: 14px;
}
.cp-card-title span {
  display: block;
  color: rgba(0, 0, 0, 0.54);
  font-size: 12px;
}
.cp-card-title span a {
  color: rgba(0, 0, 0, 0.87);
}
.cp-card-title a {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}
.cp-card-preview {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cp-card iframe {
  width: 400%;
  height: 1200px;
  -webkit-transform: scale(0.25);
          transform: scale(0.25);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.cp-overlay {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

@-webkit-keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(100);
            transform: scale(100);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.4;
  }
  100% {
    -webkit-transform: scale(100);
            transform: scale(100);
    opacity: 0;
  }
}
JS
$('body').append('');
$( document ).ready(function() {
  $('body').append('');

  /* FAB Toggle */
  $('.cp-fab').on('click', function() {
    $(this).toggleClass('toggled');
    $('.cp-panel').toggleClass('toggled');
    $('.cp-overlay').fadeToggle(300);
  });

  $('[data-ripple="true"]').on('click', function(e) {
    e.preventDefault();

    var $div = $('
'), btnOffset = $(this).offset(), xPos = e.pageX - btnOffset.left, yPos = e.pageY - btnOffset.top, $ripple = $(".ripple"); $ripple.css("height", $(this).height()); $ripple.css("width", $(this).height()); $div.css({ top: yPos - ($ripple.height() / 2), left: xPos - ($ripple.width() / 2), background: $(this).data("ripple-color") }).appendTo($(this)); window.setTimeout(function() { $div.remove(); }, 2000); }); });

Description

A panel of featured pens that can be added to all my pens with just a single line.
Term
Tue, 11/28/2017 - 13:41

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv