TAK tak-dcxi

## easing.markdown

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                tak-dcxi
                / easing.markdown
            
            
              Created
              July 2, 2019 12:06
            
              
                Easing
              
          
    Easing

A Pen by tak-dcxi on CodePen.
License.

  
## _accordion.scss
.my-accordion {
  font-size: 1rem;
  max-width: 640px;
  word-break: break-all;
}

.my-accordion__item {
  border: #ddd 1px solid;

  & + & {

## _news-ticker.scss
.news-ticker {
  align-items: center;
  background-color: #fafafa;
  border-left: 16px solid #7f7f7f;
  box-sizing: border-box;
  display: flex;
  font-size: 1rem;
  margin: auto;
  max-width: 960px;
  padding: 1.5em;

## _checkbox.scss
.my-checkbox {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
}

.my-checkbox__input {
  // a11y-css-resetから引用
  // https://github.com/mike-engel/a11y-css-reset
  border: 0;

## .markdown

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                tak-dcxi
                / .markdown
            
            
              Created
              December 30, 2020 19:04
            
              
                フォームテンプレート
              
          
    フォームテンプレート

A Pen by tak-dcxi on CodePen.
License.

  
## drawer-menu-pattern-1.markdown

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                tak-dcxi
                / drawer-menu-pattern-1.markdown
            
            
              Created
              January 14, 2021 23:38
            
              
                Drawer Menu Pattern 1
              
          
    Drawer Menu Pattern 1

A Pen by tak-dcxi on CodePen.
License.

  
## drawer-menu-pattern-2.markdown

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                tak-dcxi
                / drawer-menu-pattern-2.markdown
            
            
              Created
              January 14, 2021 23:41
            
              
                Drawer Menu Pattern 2
              
          
    Drawer Menu Pattern 2

A Pen by tak-dcxi on CodePen.
License.

  
## index.html
<head>
  <script>
    function getPolyfill(src, integrity) {
      var script = document.createElement('script')
      script.src = src
      script.integrity = integrity
      script.crossOrigin = 'anonymous'
      script.defer = true
      document.head.appendChild(script)
    }

## Breadcrumbs.tsx
import React from 'react'
import Link from 'next/link'

type PageBreadcrumbsPropsType = {
  lists: { [key: string]: string }[]
}

export const PageBreadcrumbs: React.VFC<PageBreadcrumbsPropsType> = ({ lists }) => {
  return (
    <nav aria-label="現在位置">

## autoFillList.js
/**
 * 「WHATWG Standard」のAutoFillについての仕様に記載されている項目を配列化したものです。
 * @example
 * <input
 *  name={name}
 *  autoComplete={autoFillList.some((item) => item === name) ? name : null}
 * />
 */

export const autoFillList = [
	.my-accordion {
	font-size: 1rem;
	max-width: 640px;
	word-break: break-all;
	}

	.my-accordion__item {
	border: #ddd 1px solid;

	& + & {
	.news-ticker {
	align-items: center;
	background-color: #fafafa;
	border-left: 16px solid #7f7f7f;
	box-sizing: border-box;
	display: flex;
	font-size: 1rem;
	margin: auto;
	max-width: 960px;
	padding: 1.5em;
	.my-checkbox {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	}

	.my-checkbox__input {
	// a11y-css-resetから引用
	// https://github.com/mike-engel/a11y-css-reset
	border: 0;
	<head>
	<script>
	function getPolyfill(src, integrity) {
	var script = document.createElement('script')
	script.src = src
	script.integrity = integrity
	script.crossOrigin = 'anonymous'
	script.defer = true
	document.head.appendChild(script)
	}
	import React from 'react'
	import Link from 'next/link'

	type PageBreadcrumbsPropsType = {
	lists: { [key: string]: string }[]
	}

	export const PageBreadcrumbs: React.VFC<PageBreadcrumbsPropsType> = ({ lists }) => {
	return (
	<nav aria-label="現在位置">
	/**
	* 「WHATWG Standard」のAutoFillについての仕様に記載されている項目を配列化したものです。
	* @example
	* <input
	* name={name}
	* autoComplete={autoFillList.some((item) => item === name) ? name : null}
	* />
	*/

	export const autoFillList = [