bishoplee

Custom Animated Links with Psuedo Elements

A Pen by designcourse on CodePen.

License.

bishoplee

import React, { useState, useEffect, useContext } from "react";
import Modal from 'react-modal';
import { Line } from 'rc-progress';
import { Text } from 'react-native';

import chatContext, {controlMessageEnum} from './ChatContext';
import { PollContext } from './PollContext';
import styles from './pollStyles';

bishoplee

<div class="page">
  
  <!--Sidebar-->
  <div class="sidebar">
    <div class="panel">
     <div class="panel-header ">Project</div>

		  <!--Tree-->
      <div class="panel-body">
        

bishoplee

Grid / List toggle

A Pen by Aaron Iker on CodePen.

License.

bishoplee

<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
	<div class="lty-playbtn"></div>
</lite-youtube>

bishoplee

<div class="upload">
    <div class="text">
        <strong><span>Uploading</span> 3 files</strong>
        <div>
            <small>%</small>
            <div>
                <small>
                    <span data-seconds>0</span> seconds left
                </small>
                <small>Paused</small>

bishoplee

/**
 * Luhn algorithm in JavaScript: validate credit card number supplied as string of numbers
 * @author ShirtlessKirk. Copyright (c) 2012.
 * @license WTFPL (http://www.wtfpl.net/txt/copying)
 */
var luhnChk = (function (arr) {
    return function (ccNum) {
        var 
            len = ccNum.length,
            bit = 1,

bishoplee

// takes the form field value and returns true on valid number
function valid_credit_card(value) {
  // accept only digits, dashes or spaces
	if (/[^0-9-\s]+/.test(value)) return false;

	// The Luhn Algorithm. It's so pretty.
	var nCheck = 0, nDigit = 0, bEven = false;
	value = value.replace(/\D/g, "");

	for (var n = value.length - 1; n >= 0; n--) {

bishoplee

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg class="NavLogo NavLogo--color" id="NavLogo-color" width="442px" height="90px" viewBox="0 0 2210 446" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <!-- Generator: Sketch 3.3.2 (12043) - http://www.bohemiancoding.com/sketch -->
  <title>Group + SUBVISUAL 52 Copy 66</title>
  <desc>Created with Sketch.</desc>
  <defs>
    <linearGradient x1="72.2712425%" y1="39.1519547%" x2="-4.60414488%" y2="39.1519547%" id="NavLogo-linearGradient-1">
      <stop stop-color="#517F96" offset="0%"></stop>
      <stop stop-color="#466D81" offset="100%"></stop>
  </linearGradient>

bishoplee

<input type="radio" name="choice" id="nav-1" checked>
<input type="radio" name="choice" id="nav-2">
<input type="radio" name="choice" id="nav-3">

<div id="app">
  <nav class="ui-nav">
    <div class="ui-bg">
      <div class="ui-cutout"></div>
      <div class="ui-dot"></div>
    </div>