LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*,
*:before,
*:after {
  position: relative;
  box-sizing: border-box;
}

*::before,
*::after {
  content: '';
}

html,
main,
body {
  height: 100%;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.618rem;
}

.flex {
  display: flex;
}
.flex--total-center {
  justify-content: center;
  align-items: center;
}

.stretch {
  width: 100%;
}

.flex-shrink0 {
  flex-shrink: 0;
}

.flex-full {
  flex-basis: 100%;
}

.text-uppercase {
  text-transform: uppercase;
}

.font-weight700 {
  font-weight: 700;
}

.lh1 {
  line-height: 1;
}

.text-indent {
  text-indent: 1.412rem;
}
.text-indent-n3 {
  text-indent: -2.5rem;
}

.letter-spacing1 {
  letter-spacing: .1rem;
}

.caps-xs {
  text-transform: uppercase;
  letter-spacing: .1rem;
}

.bg-color-white-tc15 {
  background-color: rgba(255, 255, 255, 0.15);
}
.bg-color-white-tc25 {
  background-color: rgba(255, 255, 255, 0.25);
}
.bg-color-white-on-hover-tc25:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.color-white {
  color: white;
}

.color-white-tc15 {
  color: rgba(255, 255, 255, 0.15);
}
.color-white-tc25 {
  color: rgba(255, 255, 255, 0.25);
}
.color-dark-tc25 {
  color: rgba(0, 0, 0, 0.25);
}

.cursor-pointer {
  cursor: pointer;
}

.rounded-heavily {
  border-radius: 7.2rem;
}

.fades-in-on-hover {
  opacity: .5;
  transition: opacity 500ms;
}
.fades-in-on-hover:hover {
  opacity: 1;
}

.opaque {
  opacity: 1;
}

.outline-none,
.outline-none:focus {
  outline: none;
}

.box-shadow {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.22);
}

.border-bottom2 {
  border-bottom: 2px solid;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}

.transition-all250 {
  transition: all 250ms;
}
.transition-all500 {
  transition: all 500ms;
}

.transition-color250 {
  transition: color 250ms;
}
.transition-color500 {
  transition: color 500ms;
}

.transition-bg-color250 {
  transition: background-color 250ms;
}
.transition-bg-color500 {
  transition: background-color 500ms;
}

.transition-fade-enter-active,
.transition-fade-leave-active {
  transition: opacity 480ms ease;
}

.transition-fade-enter,
.transition-fade-leave-active {
  opacity: 0;
}

.opacity50 {
  opacity: 0.5;
}

.border-color-blue {
  border-color: #1162ee;
}

.bg-color-blue {
  background-color: #1162ee;
}
.bg-color-blue-hover:hover {
  background-color: #0f58d7;
}

.c-form::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0 auto;
  width: 80%;
  height: 20px;
  box-shadow: 0 15px 35px 15px rgba(0, 0, 0, 0.75);
  z-index: -1;
  border-radius: 50%;
}

body {
  background-image: linear-gradient(to bottom, #d9d9d9, #a6a6a6);
}

.c-form {
  width: 48rem;
  min-height: 62.5rem;
  font-family: "Nunito", Arial, sans-serif;
  background-image: linear-gradient(130deg, rgba(36, 49, 91, 0.9), rgba(40, 22, 60, 0.9)), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/16584/nachita_login_form_bg.jpg");
}

.c-checkbox-control input[type="checkbox"]:checked ~ .c-checkbox-control__box {
  color: white;
}
JS
let bus = new Vue()

Vue.component('input-block', {
  props: ['type', 'label'],
  template: `
    
  `
})

Vue.component('username-field', {
  template: `
    
` }) Vue.component('password-field', { props: ['label'], template: `
` }) Vue.component('remember-me-checkbox', { template: `
` }) Vue.component('submit-button', { data () { return { thinking: false } }, props: ['text', 'idle-text',], template: ``, methods: { onClick: function () { this.thinking = true; setTimeout(() => { this.thinking = false; }, 1200) // Note: I would probably make use of the Event Bus // here to keep this button clean and let it act // as a dispatcher. } } }) Vue.component('sign-in', { template: `
`, methods: {} }) Vue.component('sign-up', { template: `
` }) Vue.component('nav-item', { props: ['label', 'target', 'currentView'], template: ` `, methods: { select: (view) => { bus.$emit('change-view-to', view) } } }) Vue.component('form-nav', { props: ['active'], template: ` ` }) new Vue({ el: document.body, components: { 'login-form': { data () { return { currentView: 'sign-in' } }, template: `
`, created () { bus.$on('change-view-to', (view) => { this.currentView = view }) } } } })
Host Instantly Drag and Drop Website Builder

 

Description

I wanted to dig deeper with VueJS 2.0 and the strange, yet interesting world of so-called "Functional CSS".
Term
Wed, 11/29/2017 - 11:23

Related Codes

Pen ID
Pen ID
Pen ID