├── index.js ├── src ├── all.styl ├── common │ ├── variables.styl │ ├── loading │ │ ├── rotation.styl │ │ ├── full-before.styl │ │ └── circle.styl │ ├── hamburger │ │ ├── default.styl │ │ ├── 02.styl │ │ └── 01.styl │ ├── toggle │ │ ├── full-before.styl │ │ └── 01.styl │ ├── base │ │ ├── base.js │ │ └── base.css │ ├── button │ │ └── index.styl │ ├── plus │ │ └── 01.styl │ └── arrow │ │ └── 01.styl └── ui │ ├── arrow-02 │ ├── index.styl │ └── index.html │ ├── plus-01 │ ├── index.styl │ └── index.html │ ├── plus-02 │ ├── index.styl │ └── index.html │ ├── toggle-03 │ ├── index.styl │ └── index.html │ ├── toggle-04 │ ├── index.styl │ └── index.html │ ├── toggle-02 │ ├── index.styl │ └── index.html │ ├── toggle-01 │ ├── index.styl │ └── index.html │ ├── arrow-01 │ ├── index.styl │ └── index.html │ ├── toggle-07 │ ├── index.styl │ └── index.html │ ├── toggle-08 │ ├── index.styl │ └── index.html │ ├── toggle-10 │ ├── index.styl │ └── index.html │ ├── toggle-09 │ ├── index.styl │ └── index.html │ ├── toggle-11 │ ├── index.styl │ └── index.html │ ├── toggle-12 │ ├── index.styl │ └── index.html │ ├── toggle-14 │ ├── index.styl │ └── index.html │ ├── toggle-13 │ ├── index.styl │ └── index.html │ ├── toggle-06 │ ├── index.html │ └── index.styl │ ├── toggle-05 │ ├── index.html │ └── index.styl │ ├── toggle-15 │ ├── index.html │ └── index.styl │ ├── toggle-16 │ ├── index.html │ └── index.styl │ ├── loading-01 │ ├── index.html │ └── index.styl │ ├── loading-02 │ ├── index.html │ └── index.styl │ ├── loading-03 │ ├── index.html │ └── index.styl │ ├── hamburger-01 │ ├── index.html │ └── index.styl │ ├── hamburger-02 │ ├── index.html │ └── index.styl │ ├── hamburger-03 │ ├── index.html │ └── index.styl │ ├── hamburger-04 │ ├── index.html │ └── index.styl │ ├── hamburger-05 │ ├── index.html │ └── index.styl │ └── hamburger-06 │ ├── index.html │ └── index.styl ├── .gitignore ├── .core ├── templates │ ├── css.js │ └── html.js └── index.js ├── dist ├── ui-plus-01.css ├── ui-plus-02.css ├── ui-toggle-07.css ├── ui-toggle-08.css ├── ui-arrow-02.css ├── ui-toggle-03.css ├── ui-toggle-04.css ├── ui-toggle-09.css ├── ui-toggle-10.css ├── ui-toggle-02.css ├── ui-toggle-01.css ├── ui-toggle-11.css ├── ui-toggle-12.css ├── ui-toggle-14.css ├── ui-toggle-13.css ├── ui-arrow-01.css ├── ui-toggle-05.css ├── ui-toggle-06.css ├── ui-toggle-15.css ├── ui-hamburger-01.css ├── ui-hamburger-02.css ├── ui-hamburger-03.css ├── ui-hamburger-04.css ├── ui-hamburger-06.css ├── ui-hamburger-05.css ├── ui-loading-01.css ├── ui-loading-02.css ├── ui-loading-03.css ├── ui-toggle-16.css └── all.css ├── package.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md └── webpack.config.js /index.js: -------------------------------------------------------------------------------- 1 | require("./dist/all.css"); -------------------------------------------------------------------------------- /src/all.styl: -------------------------------------------------------------------------------- 1 | @import './ui/**/*.styl' -------------------------------------------------------------------------------- /src/common/variables.styl: -------------------------------------------------------------------------------- 1 | $default-color = #2980b9 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn-error.log 3 | package-lock.json -------------------------------------------------------------------------------- /src/common/loading/rotation.styl: -------------------------------------------------------------------------------- 1 | @keyframes rotation 2 | from 3 | transform rotate(0) 4 | to 5 | transform rotate(359deg) -------------------------------------------------------------------------------- /.core/templates/css.js: -------------------------------------------------------------------------------- 1 | const cssTemplate = (reference) => ( 2 | `.ui-${reference} 3 | // 4 | ` 5 | ) 6 | 7 | module.exports = cssTemplate; -------------------------------------------------------------------------------- /src/common/hamburger/default.styl: -------------------------------------------------------------------------------- 1 | hamburger-default() 2 | width 30px 3 | height 26px 4 | border none 5 | position relative 6 | cursor pointer -------------------------------------------------------------------------------- /src/ui/arrow-02/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/arrow/01' 2 | 3 | .ui-arrow-02 4 | half-arrow-down() 5 | transition transform .3s ease 6 | 7 | &.is-active 8 | transform rotate(-180deg) -------------------------------------------------------------------------------- /src/common/loading/full-before.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | full-before() 4 | left 0 5 | top 0 6 | width 100% 7 | height 100% 8 | position absolute 9 | content '' 10 | background-color $default-color -------------------------------------------------------------------------------- /src/ui/plus-01/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/plus/01' 2 | 3 | .ui-plus-01 4 | plus() 5 | 6 | &:before 7 | transition transform .3s ease 8 | 9 | &.is-active 10 | 11 | &:before 12 | transform rotate(0) -------------------------------------------------------------------------------- /src/ui/plus-02/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/plus/01' 2 | 3 | .ui-plus-02 4 | plus() 5 | 6 | &:before 7 | transition transform .3s ease 8 | 9 | &.is-active 10 | 11 | &:before 12 | transform rotate(-180deg) -------------------------------------------------------------------------------- /src/common/toggle/full-before.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | full-before() 4 | position absolute 5 | width 100% 6 | height 100% 7 | content '' 8 | transition transform .35s ease 9 | z-index -1 10 | background-color $default-color -------------------------------------------------------------------------------- /src/common/base/base.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | const uiElement = document.querySelector('[data-ui]') 3 | const holdElement = document.querySelector('body'); 4 | 5 | holdElement.addEventListener('click', function() { 6 | uiElement.classList.toggle('is-active') 7 | }) 8 | 9 | })(); -------------------------------------------------------------------------------- /src/common/button/index.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | button() 4 | padding 15px 25px 5 | color $default-color 6 | cursor pointer 7 | border solid 1px $default-color 8 | font-size 16px 9 | position relative 10 | z-index 1 11 | overflow hidden 12 | transition color .3s ease -------------------------------------------------------------------------------- /src/common/loading/circle.styl: -------------------------------------------------------------------------------- 1 | circle() 2 | content '' 3 | border solid 2px #fff 4 | border-left-color transparent 5 | width 16px 6 | height @width 7 | position absolute 8 | left 50% 9 | top 50% 10 | border-radius 50% 11 | margin-top (-(@width/2)) 12 | margin-left (-(@width/2)) -------------------------------------------------------------------------------- /src/ui/toggle-03/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/toggle/01' 2 | @import '../../common/button' 3 | 4 | .ui-toggle-03 5 | button() 6 | toggle-01() 7 | 8 | &:before 9 | transform translateY(-100%) 10 | 11 | &.is-active 12 | 13 | &:before 14 | transform translateY(0) 15 | -------------------------------------------------------------------------------- /src/ui/toggle-04/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/toggle/01' 2 | @import '../../common/button' 3 | 4 | .ui-toggle-04 5 | button() 6 | toggle-01() 7 | 8 | &:before 9 | transform translateY(100%) 10 | 11 | &.is-active 12 | 13 | &:before 14 | transform translateY(0) 15 | -------------------------------------------------------------------------------- /src/ui/toggle-02/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/toggle/01' 2 | @import '../../common/button' 3 | 4 | .ui-toggle-02 5 | button() 6 | toggle-01() 7 | 8 | &:before 9 | transform translateX(calc(100% + 1px)) 10 | 11 | &.is-active 12 | 13 | &:before 14 | transform translateX(0) 15 | -------------------------------------------------------------------------------- /src/ui/toggle-01/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/toggle/01' 2 | @import '../../common/button' 3 | 4 | .ui-toggle-01 5 | button() 6 | toggle-01() 7 | 8 | &:before 9 | transform translateX(calc(-100% - 1px)) 10 | 11 | &.is-active 12 | 13 | &:before 14 | transform translateX(0) 15 | -------------------------------------------------------------------------------- /src/ui/arrow-01/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/arrow/01' 2 | 3 | .ui-arrow-01 4 | half-arrow-down() 5 | 6 | &:before, 7 | &:after 8 | transition transform .34s ease 9 | 10 | &.is-active 11 | 12 | &:before 13 | transform rotate(45deg) 14 | 15 | &:after 16 | transform rotate(-45deg) -------------------------------------------------------------------------------- /src/common/toggle/01.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | toggle-01() 4 | 5 | &:before 6 | left 0 7 | top 0 8 | position absolute 9 | width 100% 10 | height 100% 11 | content '' 12 | transition transform .35s ease 13 | z-index -1 14 | background-color $default-color 15 | 16 | &.is-active 17 | color #fff -------------------------------------------------------------------------------- /src/ui/toggle-07/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-07 5 | button() 6 | 7 | &:before 8 | full-before() 9 | left 0 10 | top 0 11 | transform-origin top left 12 | transform rotate(-90deg) 13 | 14 | &.is-active 15 | color #fff 16 | 17 | &:before 18 | transform rotate(0) 19 | -------------------------------------------------------------------------------- /src/ui/toggle-08/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-08 5 | button() 6 | 7 | &:before 8 | full-before() 9 | left 0 10 | top 0 11 | transform-origin top left 12 | transform rotate(90deg) 13 | 14 | &.is-active 15 | color #fff 16 | 17 | &:before 18 | transform rotate(0) 19 | -------------------------------------------------------------------------------- /src/ui/toggle-10/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-10 5 | button() 6 | 7 | &:before 8 | full-before() 9 | left 0 10 | bottom 0 11 | transform-origin bottom left 12 | transform rotate(90deg) 13 | 14 | &.is-active 15 | color #fff 16 | 17 | &:before 18 | transform rotate(0) 19 | -------------------------------------------------------------------------------- /src/ui/toggle-09/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-09 5 | button() 6 | 7 | &:before 8 | full-before() 9 | left 0 10 | bottom 0 11 | transform-origin bottom left 12 | transform rotate(-90deg) 13 | 14 | &.is-active 15 | color #fff 16 | 17 | &:before 18 | transform rotate(0) 19 | -------------------------------------------------------------------------------- /src/ui/toggle-11/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-11 5 | button() 6 | 7 | &:before 8 | full-before() 9 | right -1px 10 | width calc(100% + 1px) 11 | top 0 12 | transform-origin top right 13 | transform rotate(-90deg) 14 | 15 | &.is-active 16 | color #fff 17 | 18 | &:before 19 | transform rotate(0) 20 | -------------------------------------------------------------------------------- /src/ui/toggle-12/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-12 5 | button() 6 | 7 | &:before 8 | full-before() 9 | right 0 10 | top -1px 11 | height calc(100% + 1px) 12 | transform-origin top right 13 | transform rotate(90deg) 14 | 15 | &.is-active 16 | color #fff 17 | 18 | &:before 19 | transform rotate(0) 20 | -------------------------------------------------------------------------------- /src/ui/toggle-14/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-14 5 | button() 6 | 7 | &:before 8 | full-before() 9 | right -1px 10 | bottom 0 11 | width calc(100% + 1px) 12 | transform-origin bottom right 13 | transform rotate(90deg) 14 | 15 | &.is-active 16 | color #fff 17 | 18 | &:before 19 | transform rotate(0) 20 | -------------------------------------------------------------------------------- /src/ui/toggle-13/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/toggle/full-before' 3 | 4 | .ui-toggle-13 5 | button() 6 | 7 | &:before 8 | full-before() 9 | right 0 10 | bottom -1px 11 | height calc(100% + 1px) 12 | transform-origin bottom right 13 | transform rotate(-90deg) 14 | 15 | &.is-active 16 | color #fff 17 | 18 | &:before 19 | transform rotate(0) 20 | -------------------------------------------------------------------------------- /src/ui/plus-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - Plus 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/common/plus/01.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | plus() 4 | position relative 5 | cursor pointer 6 | border none 7 | background-color transparent 8 | width 30px 9 | height @width 10 | 11 | &:before, 12 | &:after 13 | content "" 14 | height 20% 15 | width 100% 16 | background-color $default-color 17 | position absolute 18 | right 0 19 | top 50% 20 | margin-top -10% 21 | 22 | &:before 23 | transform rotate(90deg) 24 | -------------------------------------------------------------------------------- /src/ui/plus-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - plus-02 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/arrow-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - arrow-01 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/arrow-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - arrow-02 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-06 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/ui/toggle-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-01 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-02 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-04 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-05 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-07 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-08 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-09 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-10 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-11 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-12 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-13 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-14 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-15 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/toggle-16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - toggle-16 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/loading-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - loading-01 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/loading-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - loading-02 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/loading-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - loading-03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/common/base/base.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | width: 100vw; 13 | overflow: hidden; 14 | } 15 | 16 | body:before { 17 | content: 'Click on any place in the page to see it working! '; 18 | position: absolute; 19 | right: 5px; 20 | top: 5px; 21 | color: #aaa; 22 | font-size: 16px; 23 | font-family: Arial; 24 | } -------------------------------------------------------------------------------- /src/ui/hamburger-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-01 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-02 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-03 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-04 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-05 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UI Interactions - hamburger-06 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/ui/hamburger-01/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/01' 2 | 3 | .ui-hamburger-01 4 | hamburger-01() 5 | 6 | &:before 7 | top 0 8 | transform-origin 9% 150% 9 | 10 | &:after 11 | bottom 0 12 | transform-origin 9% -50% 13 | 14 | &.is-active 15 | background-size 0 20% 16 | transition-delay 0s 17 | 18 | &:before 19 | transform rotate(45deg) 20 | transition-delay .15s 21 | 22 | &:after 23 | transform rotate(-45deg) 24 | transition-delay .15s -------------------------------------------------------------------------------- /src/ui/hamburger-02/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/01' 2 | 3 | .ui-hamburger-02 4 | hamburger-01() 5 | 6 | &:before 7 | top 0 8 | transform-origin 91% 150% 9 | 10 | &:after 11 | bottom 0 12 | transform-origin 91% -50% 13 | 14 | &.is-active 15 | background-size 0 20% 16 | transition-delay 0s 17 | 18 | &:before 19 | transform rotate(-45deg) 20 | transition-delay .15s 21 | 22 | &:after 23 | transform rotate(45deg) 24 | transition-delay .15s 25 | -------------------------------------------------------------------------------- /src/ui/hamburger-03/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/02' 2 | 3 | .ui-hamburger-03 4 | hamburger-02() 5 | transition background-size .2s .45s ease 6 | 7 | &:before, 8 | &:after 9 | left 0 10 | 11 | &.is-active 12 | background-size 0 40% 13 | transition-delay 0s 14 | 15 | &:before, 16 | &:after 17 | width 100% 18 | transition width .3s .2s ease, transform .3s .4s ease 19 | 20 | &:before 21 | transform rotate(-45deg) 22 | 23 | &:after 24 | transform rotate(45deg) -------------------------------------------------------------------------------- /src/ui/hamburger-04/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/02' 2 | 3 | .ui-hamburger-04 4 | hamburger-02() 5 | transition background-position .2s .45s ease 6 | 7 | &:before, 8 | &:after 9 | right 0 10 | 11 | &.is-active 12 | background-position 30px 0 13 | transition-delay 0s 14 | 15 | &:before, 16 | &:after 17 | width 100% 18 | transition width .3s .2s ease, transform .3s .4s ease 19 | 20 | &:before 21 | transform rotate(-45deg) 22 | 23 | &:after 24 | transform rotate(45deg) -------------------------------------------------------------------------------- /src/ui/hamburger-05/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/01' 2 | 3 | .ui-hamburger-05 4 | hamburger-01() 5 | transition background-size .3s .2s ease 6 | 7 | &:before 8 | top 0 9 | 10 | &:after 11 | bottom 0 12 | 13 | &:before, 14 | &:after 15 | transition .3s ease 16 | 17 | &.is-active 18 | background-size 0 0 19 | 20 | &:before, 21 | &:after 22 | transition-delay .3s 23 | 24 | &:before 25 | transform translateY(200%) rotate(45deg) 26 | 27 | &:after 28 | transform translateY(-200%) rotate(-45deg) -------------------------------------------------------------------------------- /src/ui/toggle-05/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | 3 | .ui-toggle-05 4 | button() 5 | 6 | &:before, 7 | &:after 8 | position absolute 9 | content '' 10 | background-color $default-color 11 | width 50% 12 | top 0 13 | height 100% 14 | transition transform .3s ease 15 | z-index -1 16 | 17 | &:before 18 | left 0 19 | transform translateX(-100%) 20 | 21 | &:after 22 | right 0 23 | transform translateX(100%) 24 | 25 | &.is-active 26 | color #fff 27 | &:before, 28 | &:after 29 | transform translateX(0) -------------------------------------------------------------------------------- /src/ui/toggle-06/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | 3 | .ui-toggle-06 4 | button() 5 | 6 | &:before, 7 | &:after 8 | position absolute 9 | content '' 10 | background-color $default-color 11 | width 100% 12 | left 0 13 | height 50% 14 | transition transform .3s ease 15 | z-index -1 16 | 17 | &:before 18 | top 0 19 | transform translateY(-100%) 20 | 21 | &:after 22 | bottom 0 23 | transform translateY(100%) 24 | 25 | &.is-active 26 | color #fff 27 | &:before, 28 | &:after 29 | transform translateY(0) -------------------------------------------------------------------------------- /.core/templates/html.js: -------------------------------------------------------------------------------- 1 | const htmlTemplate = (reference) => ( 2 | ` 3 | 4 | 5 | 6 | UI Interactions - ${reference} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | ` 17 | ) 18 | 19 | module.exports = htmlTemplate; -------------------------------------------------------------------------------- /src/common/arrow/01.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | half-arrow-down() 4 | position relative 5 | width 30px 6 | height @width 7 | border none 8 | background-color transparent 9 | 10 | &:before, 11 | &:after 12 | content '' 13 | background-color $default-color 14 | position absolute 15 | top 50% 16 | width 1px 17 | height calc(70% - 1px) 18 | margin-top -35% 19 | 20 | &:before 21 | left 50% 22 | margin-left -25% 23 | transform rotate(-45deg) 24 | 25 | &:after 26 | right 50% 27 | margin-right -25% 28 | transform rotate(45deg) -------------------------------------------------------------------------------- /src/ui/loading-01/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/loading/rotation' 3 | @import '../../common/loading/circle' 4 | @import '../../common/loading/full-before' 5 | 6 | .ui-loading-01 7 | button() 8 | 9 | &:before 10 | full-before() 11 | transform scaleX(0) 12 | transition transform .3s ease 13 | 14 | &:after 15 | circle() 16 | opacity 0 17 | transition opacity .2s .1s ease 18 | 19 | &.is-active 20 | &:before 21 | transform scaleX(1) 22 | 23 | &:after 24 | animation rotation .5s infinite linear 25 | opacity 1 -------------------------------------------------------------------------------- /src/ui/loading-02/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/loading/rotation' 3 | @import '../../common/loading/circle' 4 | @import '../../common/loading/full-before' 5 | 6 | .ui-loading-02 7 | button() 8 | 9 | &:before 10 | full-before() 11 | transform scaleY(0) 12 | transition transform .3s ease 13 | 14 | &:after 15 | circle() 16 | opacity 0 17 | transition opacity .2s .1s ease 18 | 19 | &.is-active 20 | &:before 21 | transform scaleY(1) 22 | 23 | &:after 24 | animation rotation .5s infinite linear 25 | opacity 1 -------------------------------------------------------------------------------- /src/common/hamburger/02.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | hamburger-02() 4 | width 30px 5 | height 26px 6 | border none 7 | position relative 8 | background linear-gradient(to bottom, $default-color 50%, transparent 50%) 9 | background-size 100% 40% 10 | background-repeat-x no-repeat 11 | background-position 0 0 12 | cursor pointer 13 | 14 | &:before, 15 | &:after 16 | height 20% 17 | width 0 18 | position absolute 19 | background-color $default-color 20 | content '' 21 | transform rotate(0) 22 | top 40% 23 | transition transform .3s ease, width .3s .2s ease -------------------------------------------------------------------------------- /src/common/hamburger/01.styl: -------------------------------------------------------------------------------- 1 | @import '../variables' 2 | 3 | hamburger-01() 4 | width 30px 5 | height 26px 6 | border none 7 | position relative 8 | background linear-gradient(to bottom, $default-color, $default-color) 9 | background-size 100% 20% 10 | background-repeat no-repeat 11 | background-position center center 12 | transition background-size .2s .25s ease 13 | cursor pointer 14 | 15 | &:before, 16 | &:after 17 | height 20% 18 | width 100% 19 | position absolute 20 | left 0 21 | background-color $default-color 22 | content '' 23 | transition transform .3s ease -------------------------------------------------------------------------------- /dist/ui-plus-01.css: -------------------------------------------------------------------------------- 1 | .ui-plus-01 { 2 | position: relative; 3 | cursor: pointer; 4 | border: none; 5 | background-color: transparent; 6 | width: 30px; 7 | height: 30px; 8 | } 9 | .ui-plus-01:before, 10 | .ui-plus-01:after { 11 | content: ""; 12 | height: 20%; 13 | width: 100%; 14 | background-color: #2980b9; 15 | position: absolute; 16 | right: 0; 17 | top: 50%; 18 | margin-top: -10%; 19 | } 20 | .ui-plus-01:before { 21 | transform: rotate(90deg); 22 | } 23 | .ui-plus-01:before { 24 | transition: transform 0.3s ease; 25 | } 26 | .ui-plus-01.is-active:before { 27 | transform: rotate(0); 28 | } 29 | 30 | -------------------------------------------------------------------------------- /dist/ui-plus-02.css: -------------------------------------------------------------------------------- 1 | .ui-plus-02 { 2 | position: relative; 3 | cursor: pointer; 4 | border: none; 5 | background-color: transparent; 6 | width: 30px; 7 | height: 30px; 8 | } 9 | .ui-plus-02:before, 10 | .ui-plus-02:after { 11 | content: ""; 12 | height: 20%; 13 | width: 100%; 14 | background-color: #2980b9; 15 | position: absolute; 16 | right: 0; 17 | top: 50%; 18 | margin-top: -10%; 19 | } 20 | .ui-plus-02:before { 21 | transform: rotate(90deg); 22 | } 23 | .ui-plus-02:before { 24 | transition: transform 0.3s ease; 25 | } 26 | .ui-plus-02.is-active:before { 27 | transform: rotate(-180deg); 28 | } 29 | 30 | -------------------------------------------------------------------------------- /src/ui/loading-03/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | @import '../../common/loading/rotation' 3 | @import '../../common/loading/circle' 4 | @import '../../common/loading/full-before' 5 | 6 | .ui-loading-03 7 | button() 8 | 9 | &:before 10 | full-before() 11 | transform translateX(-100%) 12 | opacity 0 13 | transition opacity .3s ease, transform .1s .3s 14 | 15 | &:after 16 | circle() 17 | opacity 0 18 | transition opacity .2s .1s ease 19 | 20 | &.is-active 21 | &:before 22 | transition opacity .3s ease 23 | transform translateX(0) 24 | opacity 1 25 | 26 | &:after 27 | animation rotation .5s infinite linear 28 | opacity 1 -------------------------------------------------------------------------------- /src/ui/toggle-15/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/button' 2 | 3 | .ui-toggle-15 4 | button() 5 | 6 | &:before, 7 | &:after 8 | top 0 9 | position absolute 10 | width calc(50% + 21px) 11 | height 100% 12 | content '' 13 | background-color $default-color 14 | transition transform .35s ease 15 | z-index -1 16 | 17 | &:before 18 | left 0 19 | transform skewX(-20deg) translateX(calc(-100% - 20px)) 20 | 21 | &:after 22 | right 0 23 | transform skewX(-20deg) translateX(calc(100% + 20px)) 24 | 25 | &.is-active 26 | color #fff 27 | 28 | &:before 29 | transform skewX(-20deg) translateX(-20px) 30 | 31 | &:after 32 | transform skewX(-20deg) translateX(20px) 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-07.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-07 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-07:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | left: 0; 21 | top: 0; 22 | transform-origin: top left; 23 | transform: rotate(-90deg); 24 | } 25 | .ui-toggle-07.is-active { 26 | color: #fff; 27 | } 28 | .ui-toggle-07.is-active:before { 29 | transform: rotate(0); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /dist/ui-toggle-08.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-08 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-08:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | left: 0; 21 | top: 0; 22 | transform-origin: top left; 23 | transform: rotate(90deg); 24 | } 25 | .ui-toggle-08.is-active { 26 | color: #fff; 27 | } 28 | .ui-toggle-08.is-active:before { 29 | transform: rotate(0); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /dist/ui-arrow-02.css: -------------------------------------------------------------------------------- 1 | .ui-arrow-02 { 2 | position: relative; 3 | width: 30px; 4 | height: 30px; 5 | border: none; 6 | background-color: transparent; 7 | transition: transform 0.3s ease; 8 | } 9 | .ui-arrow-02:before, 10 | .ui-arrow-02:after { 11 | content: ''; 12 | background-color: #2980b9; 13 | position: absolute; 14 | top: 50%; 15 | width: 1px; 16 | height: calc(70% - 1px); 17 | margin-top: -35%; 18 | } 19 | .ui-arrow-02:before { 20 | left: 50%; 21 | margin-left: -25%; 22 | transform: rotate(-45deg); 23 | } 24 | .ui-arrow-02:after { 25 | right: 50%; 26 | margin-right: -25%; 27 | transform: rotate(45deg); 28 | } 29 | .ui-arrow-02.is-active { 30 | transform: rotate(-180deg); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-03.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-03 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-03:before { 13 | left: 0; 14 | top: 0; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | content: ''; 19 | transition: transform 0.35s ease; 20 | z-index: -1; 21 | background-color: #2980b9; 22 | } 23 | .ui-toggle-03.is-active { 24 | color: #fff; 25 | } 26 | .ui-toggle-03:before { 27 | transform: translateY(-100%); 28 | } 29 | .ui-toggle-03.is-active:before { 30 | transform: translateY(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-04.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-04 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-04:before { 13 | left: 0; 14 | top: 0; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | content: ''; 19 | transition: transform 0.35s ease; 20 | z-index: -1; 21 | background-color: #2980b9; 22 | } 23 | .ui-toggle-04.is-active { 24 | color: #fff; 25 | } 26 | .ui-toggle-04:before { 27 | transform: translateY(100%); 28 | } 29 | .ui-toggle-04.is-active:before { 30 | transform: translateY(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-09.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-09 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-09:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | left: 0; 21 | bottom: 0; 22 | transform-origin: bottom left; 23 | transform: rotate(-90deg); 24 | } 25 | .ui-toggle-09.is-active { 26 | color: #fff; 27 | } 28 | .ui-toggle-09.is-active:before { 29 | transform: rotate(0); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /dist/ui-toggle-10.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-10 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-10:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | left: 0; 21 | bottom: 0; 22 | transform-origin: bottom left; 23 | transform: rotate(90deg); 24 | } 25 | .ui-toggle-10.is-active { 26 | color: #fff; 27 | } 28 | .ui-toggle-10.is-active:before { 29 | transform: rotate(0); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /dist/ui-toggle-02.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-02 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-02:before { 13 | left: 0; 14 | top: 0; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | content: ''; 19 | transition: transform 0.35s ease; 20 | z-index: -1; 21 | background-color: #2980b9; 22 | } 23 | .ui-toggle-02.is-active { 24 | color: #fff; 25 | } 26 | .ui-toggle-02:before { 27 | transform: translateX(calc(100% + 1px)); 28 | } 29 | .ui-toggle-02.is-active:before { 30 | transform: translateX(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-01.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-01 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-01:before { 13 | left: 0; 14 | top: 0; 15 | position: absolute; 16 | width: 100%; 17 | height: 100%; 18 | content: ''; 19 | transition: transform 0.35s ease; 20 | z-index: -1; 21 | background-color: #2980b9; 22 | } 23 | .ui-toggle-01.is-active { 24 | color: #fff; 25 | } 26 | .ui-toggle-01:before { 27 | transform: translateX(calc(-100% - 1px)); 28 | } 29 | .ui-toggle-01.is-active:before { 30 | transform: translateX(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-11.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-11 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-11:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | right: -1px; 21 | width: calc(100% + 1px); 22 | top: 0; 23 | transform-origin: top right; 24 | transform: rotate(-90deg); 25 | } 26 | .ui-toggle-11.is-active { 27 | color: #fff; 28 | } 29 | .ui-toggle-11.is-active:before { 30 | transform: rotate(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-12.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-12 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-12:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | right: 0; 21 | top: -1px; 22 | height: calc(100% + 1px); 23 | transform-origin: top right; 24 | transform: rotate(90deg); 25 | } 26 | .ui-toggle-12.is-active { 27 | color: #fff; 28 | } 29 | .ui-toggle-12.is-active:before { 30 | transform: rotate(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-14.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-14 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-14:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | right: -1px; 21 | bottom: 0; 22 | width: calc(100% + 1px); 23 | transform-origin: bottom right; 24 | transform: rotate(90deg); 25 | } 26 | .ui-toggle-14.is-active { 27 | color: #fff; 28 | } 29 | .ui-toggle-14.is-active:before { 30 | transform: rotate(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-toggle-13.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-13 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-13:before { 13 | position: absolute; 14 | width: 100%; 15 | height: 100%; 16 | content: ''; 17 | transition: transform 0.35s ease; 18 | z-index: -1; 19 | background-color: #2980b9; 20 | right: 0; 21 | bottom: -1px; 22 | height: calc(100% + 1px); 23 | transform-origin: bottom right; 24 | transform: rotate(-90deg); 25 | } 26 | .ui-toggle-13.is-active { 27 | color: #fff; 28 | } 29 | .ui-toggle-13.is-active:before { 30 | transform: rotate(0); 31 | } 32 | 33 | -------------------------------------------------------------------------------- /dist/ui-arrow-01.css: -------------------------------------------------------------------------------- 1 | .ui-arrow-01 { 2 | position: relative; 3 | width: 30px; 4 | height: 30px; 5 | border: none; 6 | background-color: transparent; 7 | } 8 | .ui-arrow-01:before, 9 | .ui-arrow-01:after { 10 | content: ''; 11 | background-color: #2980b9; 12 | position: absolute; 13 | top: 50%; 14 | width: 1px; 15 | height: calc(70% - 1px); 16 | margin-top: -35%; 17 | } 18 | .ui-arrow-01:before { 19 | left: 50%; 20 | margin-left: -25%; 21 | transform: rotate(-45deg); 22 | } 23 | .ui-arrow-01:after { 24 | right: 50%; 25 | margin-right: -25%; 26 | transform: rotate(45deg); 27 | } 28 | .ui-arrow-01:before, 29 | .ui-arrow-01:after { 30 | transition: transform 0.34s ease; 31 | } 32 | .ui-arrow-01.is-active:before { 33 | transform: rotate(45deg); 34 | } 35 | .ui-arrow-01.is-active:after { 36 | transform: rotate(-45deg); 37 | } 38 | 39 | -------------------------------------------------------------------------------- /dist/ui-toggle-05.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-05 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-05:before, 13 | .ui-toggle-05:after { 14 | position: absolute; 15 | content: ''; 16 | background-color: #2980b9; 17 | width: 50%; 18 | top: 0; 19 | height: 100%; 20 | transition: transform 0.3s ease; 21 | z-index: -1; 22 | } 23 | .ui-toggle-05:before { 24 | left: 0; 25 | transform: translateX(-100%); 26 | } 27 | .ui-toggle-05:after { 28 | right: 0; 29 | transform: translateX(100%); 30 | } 31 | .ui-toggle-05.is-active { 32 | color: #fff; 33 | } 34 | .ui-toggle-05.is-active:before, 35 | .ui-toggle-05.is-active:after { 36 | transform: translateX(0); 37 | } 38 | 39 | -------------------------------------------------------------------------------- /dist/ui-toggle-06.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-06 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-06:before, 13 | .ui-toggle-06:after { 14 | position: absolute; 15 | content: ''; 16 | background-color: #2980b9; 17 | width: 100%; 18 | left: 0; 19 | height: 50%; 20 | transition: transform 0.3s ease; 21 | z-index: -1; 22 | } 23 | .ui-toggle-06:before { 24 | top: 0; 25 | transform: translateY(-100%); 26 | } 27 | .ui-toggle-06:after { 28 | bottom: 0; 29 | transform: translateY(100%); 30 | } 31 | .ui-toggle-06.is-active { 32 | color: #fff; 33 | } 34 | .ui-toggle-06.is-active:before, 35 | .ui-toggle-06.is-active:after { 36 | transform: translateY(0); 37 | } 38 | 39 | -------------------------------------------------------------------------------- /src/ui/toggle-16/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/toggle/01' 2 | @import '../../common/button' 3 | 4 | .ui-toggle-16 5 | button() 6 | toggle-01() 7 | 8 | transform-origin center top 9 | &:before 10 | transform translateY(-100%) 11 | transform-origin center top 12 | 13 | &.is-active 14 | animation: cartoon-container 500ms ease-out forwards; 15 | &:before 16 | animation: cartoon-before 450ms 390ms ease-out forwards; 17 | 18 | @keyframes cartoon-container 19 | 0% 20 | transform scale(1, 1) 21 | color $default-color 22 | 50% 23 | transform scale(1, 0.6) 24 | 80% 25 | transform scale(1, 1.4) 26 | color $default-color 27 | 100% 28 | transform scale(1, 1) 29 | color #fff 30 | 31 | @keyframes cartoon-before 32 | 0% 33 | transform translateY(-100%) 34 | 50% 35 | transform translateY(30%) 36 | 80% 37 | transform translateY(-10%) 38 | 100% 39 | transform translateY(0) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-interactions", 3 | "version": "0.0.2", 4 | "description": "Simple and ready-to-use user interface interactions.", 5 | "main": "index.js", 6 | "scripts": { 7 | "ui": "node .core/index.js", 8 | "start": "webpack-dev-server", 9 | "build:dev": "rimraf dist && webpack --mode=development && rimraf dist/*.js", 10 | "build:prod": "rimraf dist && webpack --mode=production && rimraf dist/*.js" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "css-loader": "2.1.0", 16 | "html-loader": "^0.5.5", 17 | "inquirer": "^6.2.2", 18 | "mini-css-extract-plugin": "^0.5.0", 19 | "optimize-css-assets-webpack-plugin": "^5.0.1", 20 | "rimraf": "^2.6.3", 21 | "style-loader": "0.20.3", 22 | "stylus": "0.54.5", 23 | "stylus-loader": "3.0.2", 24 | "webpack": "^4.29.6", 25 | "webpack-cli": "^3.2.1", 26 | "webpack-dev-server": "^3.1.14" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing | UI interactions 2 | 3 | ## The naming convention 4 | 5 | I'm not a creative person, so the idea to handle the components' names was using numerical order. I know, probably in a future is something that could not make sense, but for this first version, I think it's ok! 6 | 7 | Basically, this is the structure: 8 | 9 | _componentecategory-number_ 10 | 11 | ## Steps 12 | 13 | - 🍴 Fork this repo! 14 | - 🔥 Install all the dependencies running `npm install` or `yarn`. 15 | - 💎 In order to create the initial scaffolding for your _ui component_, run `yarn ui` or `npm run ui` and then you're going to be asked about the name of your component. Write it and press enter (important note: don't use spaces or special characters). More info about [the naming convention](#the-naming-convention). 16 | - 🚀 To start running locally the project, run `yarn start` or `npm start`. 17 | - 🚢 Open your browser on `http://localhost:9001/your-component`. 18 | - 💡 Be creative! -------------------------------------------------------------------------------- /.core/index.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const inquirer = require('inquirer'); 3 | 4 | // Templates 5 | const htmlTemplate = require('./templates/html.js'); 6 | const cssTemplate = require('./templates/css.js'); 7 | 8 | // Utils 9 | const hasWhiteSpace = (word) => /\s/g.test(word); 10 | 11 | // Data 12 | const questions = [ 13 | { 14 | type: 'input', 15 | name: 'uiModel', 16 | message: "What's the name of the UI example? you want to create?", 17 | validate: function(value) { 18 | const isValid = !hasWhiteSpace(value) 19 | if(isValid) { 20 | return true; 21 | } 22 | 23 | return 'The example name could not have spaces.' 24 | } 25 | } 26 | ]; 27 | 28 | const uiFolder = 'src/ui/'; 29 | 30 | inquirer 31 | .prompt(questions) 32 | .then(({ uiModel }) => { 33 | 34 | fs.mkdirSync(`${uiFolder}${uiModel}`) 35 | fs.writeFileSync(`${uiFolder}${uiModel}/index.html`, htmlTemplate(uiModel)); 36 | fs.writeFileSync(`${uiFolder}${uiModel}/index.styl`, cssTemplate(uiModel)); 37 | 38 | }); -------------------------------------------------------------------------------- /dist/ui-toggle-15.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-15 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | } 12 | .ui-toggle-15:before, 13 | .ui-toggle-15:after { 14 | top: 0; 15 | position: absolute; 16 | width: calc(50% + 21px); 17 | height: 100%; 18 | content: ''; 19 | background-color: #2980b9; 20 | transition: transform 0.35s ease; 21 | z-index: -1; 22 | } 23 | .ui-toggle-15:before { 24 | left: 0; 25 | transform: skewX(-20deg) translateX(calc(-100% - 20px)); 26 | } 27 | .ui-toggle-15:after { 28 | right: 0; 29 | transform: skewX(-20deg) translateX(calc(100% + 20px)); 30 | } 31 | .ui-toggle-15.is-active { 32 | color: #fff; 33 | } 34 | .ui-toggle-15.is-active:before { 35 | transform: skewX(-20deg) translateX(-20px); 36 | } 37 | .ui-toggle-15.is-active:after { 38 | transform: skewX(-20deg) translateX(20px); 39 | } 40 | 41 | -------------------------------------------------------------------------------- /dist/ui-hamburger-01.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-01 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | background: linear-gradient(to bottom, #2980b9, #2980b9); 7 | background-size: 100% 20%; 8 | background-repeat: no-repeat; 9 | background-position: center center; 10 | transition: background-size 0.2s 0.25s ease; 11 | cursor: pointer; 12 | } 13 | .ui-hamburger-01:before, 14 | .ui-hamburger-01:after { 15 | height: 20%; 16 | width: 100%; 17 | position: absolute; 18 | left: 0; 19 | background-color: #2980b9; 20 | content: ''; 21 | transition: transform 0.3s ease; 22 | } 23 | .ui-hamburger-01:before { 24 | top: 0; 25 | transform-origin: 9% 150%; 26 | } 27 | .ui-hamburger-01:after { 28 | bottom: 0; 29 | transform-origin: 9% -50%; 30 | } 31 | .ui-hamburger-01.is-active { 32 | background-size: 0 20%; 33 | transition-delay: 0s; 34 | } 35 | .ui-hamburger-01.is-active:before { 36 | transform: rotate(45deg); 37 | transition-delay: 0.15s; 38 | } 39 | .ui-hamburger-01.is-active:after { 40 | transform: rotate(-45deg); 41 | transition-delay: 0.15s; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /dist/ui-hamburger-02.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-02 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | background: linear-gradient(to bottom, #2980b9, #2980b9); 7 | background-size: 100% 20%; 8 | background-repeat: no-repeat; 9 | background-position: center center; 10 | transition: background-size 0.2s 0.25s ease; 11 | cursor: pointer; 12 | } 13 | .ui-hamburger-02:before, 14 | .ui-hamburger-02:after { 15 | height: 20%; 16 | width: 100%; 17 | position: absolute; 18 | left: 0; 19 | background-color: #2980b9; 20 | content: ''; 21 | transition: transform 0.3s ease; 22 | } 23 | .ui-hamburger-02:before { 24 | top: 0; 25 | transform-origin: 91% 150%; 26 | } 27 | .ui-hamburger-02:after { 28 | bottom: 0; 29 | transform-origin: 91% -50%; 30 | } 31 | .ui-hamburger-02.is-active { 32 | background-size: 0 20%; 33 | transition-delay: 0s; 34 | } 35 | .ui-hamburger-02.is-active:before { 36 | transform: rotate(-45deg); 37 | transition-delay: 0.15s; 38 | } 39 | .ui-hamburger-02.is-active:after { 40 | transform: rotate(45deg); 41 | transition-delay: 0.15s; 42 | } 43 | 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Raphael Fabeni 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/ui/hamburger-06/index.styl: -------------------------------------------------------------------------------- 1 | @import '../../common/hamburger/default' 2 | @import '../../common/variables' 3 | 4 | .ui-hamburger-06 5 | hamburger-default() 6 | 7 | &:before 8 | content '' 9 | position absolute 10 | left 0 11 | top 0 12 | height 100% 13 | width 100% 14 | background linear-gradient(to bottom, $default-color 50%, transparent 50%) 15 | background-size 100% 40% 16 | background-repeat-x no-repeat 17 | background-position 0 0 18 | transition opacity .3s ease, transform .3s ease 19 | 20 | &:after 21 | width 80% 22 | height 90% 23 | top 5% 24 | left 10% 25 | content '' 26 | position absolute 27 | background linear-gradient(to right, transparent 40%, $default-color 40%, $default-color 60%, transparent 60%), linear-gradient(to bottom, transparent 40%, $default-color 40%, $default-color 60%, transparent 60%) 28 | transform rotate(45deg) scale(0) 29 | opacity 0 30 | transition opacity .3s ease, transform .3s ease 31 | 32 | &.is-active 33 | 34 | &:before 35 | opacity 0 36 | transform scale(0) 37 | 38 | &:after 39 | transform rotate(45deg) scale(1) 40 | opacity 1 41 | transition-delay .3s ease 42 | 43 | -------------------------------------------------------------------------------- /dist/ui-hamburger-03.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-03 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 7 | background-size: 100% 40%; 8 | background-repeat-x: no-repeat; 9 | background-position: 0 0; 10 | cursor: pointer; 11 | transition: background-size 0.2s 0.45s ease; 12 | } 13 | .ui-hamburger-03:before, 14 | .ui-hamburger-03:after { 15 | height: 20%; 16 | width: 0; 17 | position: absolute; 18 | background-color: #2980b9; 19 | content: ''; 20 | transform: rotate(0); 21 | top: 40%; 22 | transition: transform 0.3s ease, width 0.3s 0.2s ease; 23 | } 24 | .ui-hamburger-03:before, 25 | .ui-hamburger-03:after { 26 | left: 0; 27 | } 28 | .ui-hamburger-03.is-active { 29 | background-size: 0 40%; 30 | transition-delay: 0s; 31 | } 32 | .ui-hamburger-03.is-active:before, 33 | .ui-hamburger-03.is-active:after { 34 | width: 100%; 35 | transition: width 0.3s 0.2s ease, transform 0.3s 0.4s ease; 36 | } 37 | .ui-hamburger-03.is-active:before { 38 | transform: rotate(-45deg); 39 | } 40 | .ui-hamburger-03.is-active:after { 41 | transform: rotate(45deg); 42 | } 43 | 44 | -------------------------------------------------------------------------------- /dist/ui-hamburger-04.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-04 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 7 | background-size: 100% 40%; 8 | background-repeat-x: no-repeat; 9 | background-position: 0 0; 10 | cursor: pointer; 11 | transition: background-position 0.2s 0.45s ease; 12 | } 13 | .ui-hamburger-04:before, 14 | .ui-hamburger-04:after { 15 | height: 20%; 16 | width: 0; 17 | position: absolute; 18 | background-color: #2980b9; 19 | content: ''; 20 | transform: rotate(0); 21 | top: 40%; 22 | transition: transform 0.3s ease, width 0.3s 0.2s ease; 23 | } 24 | .ui-hamburger-04:before, 25 | .ui-hamburger-04:after { 26 | right: 0; 27 | } 28 | .ui-hamburger-04.is-active { 29 | background-position: 30px 0; 30 | transition-delay: 0s; 31 | } 32 | .ui-hamburger-04.is-active:before, 33 | .ui-hamburger-04.is-active:after { 34 | width: 100%; 35 | transition: width 0.3s 0.2s ease, transform 0.3s 0.4s ease; 36 | } 37 | .ui-hamburger-04.is-active:before { 38 | transform: rotate(-45deg); 39 | } 40 | .ui-hamburger-04.is-active:after { 41 | transform: rotate(45deg); 42 | } 43 | 44 | -------------------------------------------------------------------------------- /dist/ui-hamburger-06.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-06 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | cursor: pointer; 7 | } 8 | .ui-hamburger-06:before { 9 | content: ''; 10 | position: absolute; 11 | left: 0; 12 | top: 0; 13 | height: 100%; 14 | width: 100%; 15 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 16 | background-size: 100% 40%; 17 | background-repeat-x: no-repeat; 18 | background-position: 0 0; 19 | transition: opacity 0.3s ease, transform 0.3s ease; 20 | } 21 | .ui-hamburger-06:after { 22 | width: 80%; 23 | height: 90%; 24 | top: 5%; 25 | left: 10%; 26 | content: ''; 27 | position: absolute; 28 | background: linear-gradient(to right, transparent 40%, #2980b9 40%, #2980b9 60%, transparent 60%), linear-gradient(to bottom, transparent 40%, #2980b9 40%, #2980b9 60%, transparent 60%); 29 | transform: rotate(45deg) scale(0); 30 | opacity: 0; 31 | transition: opacity 0.3s ease, transform 0.3s ease; 32 | } 33 | .ui-hamburger-06.is-active:before { 34 | opacity: 0; 35 | transform: scale(0); 36 | } 37 | .ui-hamburger-06.is-active:after { 38 | transform: rotate(45deg) scale(1); 39 | opacity: 1; 40 | transition-delay: 0.3s ease; 41 | } 42 | 43 | -------------------------------------------------------------------------------- /dist/ui-hamburger-05.css: -------------------------------------------------------------------------------- 1 | .ui-hamburger-05 { 2 | width: 30px; 3 | height: 26px; 4 | border: none; 5 | position: relative; 6 | background: linear-gradient(to bottom, #2980b9, #2980b9); 7 | background-size: 100% 20%; 8 | background-repeat: no-repeat; 9 | background-position: center center; 10 | transition: background-size 0.2s 0.25s ease; 11 | cursor: pointer; 12 | transition: background-size 0.3s 0.2s ease; 13 | } 14 | .ui-hamburger-05:before, 15 | .ui-hamburger-05:after { 16 | height: 20%; 17 | width: 100%; 18 | position: absolute; 19 | left: 0; 20 | background-color: #2980b9; 21 | content: ''; 22 | transition: transform 0.3s ease; 23 | } 24 | .ui-hamburger-05:before { 25 | top: 0; 26 | } 27 | .ui-hamburger-05:after { 28 | bottom: 0; 29 | } 30 | .ui-hamburger-05:before, 31 | .ui-hamburger-05:after { 32 | transition: 0.3s ease; 33 | } 34 | .ui-hamburger-05.is-active { 35 | background-size: 0 0; 36 | } 37 | .ui-hamburger-05.is-active:before, 38 | .ui-hamburger-05.is-active:after { 39 | transition-delay: 0.3s; 40 | } 41 | .ui-hamburger-05.is-active:before { 42 | transform: translateY(200%) rotate(45deg); 43 | } 44 | .ui-hamburger-05.is-active:after { 45 | transform: translateY(-200%) rotate(-45deg); 46 | } 47 | 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UI interactions 2 | 3 | [![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/raphaelfabeni/ui-interactions/issues) 4 | 5 | > Ready-to-use UI interactions using only one element and pure CSS. Because we love UI interactions and CSS! 6 | 7 | [Check it out](https://ui-interactions.raphaelfabeni.com/) 8 | 9 | **Table of contents** 10 | 11 | - [Why?](#why) 12 | - [How does it work?](#how-does-it-work) 13 | - [Contributing?](#contributing) 14 | - [Spreading the word?](#spreading-the-word) 15 | 16 | ## Why 17 | 18 | Personally, I love to give feedback to the user during a web experience. A simple click in a button and a lot of stuff could happen in the page. So, why don't help/guide the user to understand what is happening in the UI to make the whole experience nicer? 19 | 20 | - ☝️ Only one tag per component (usually a `button`). 21 | - ❤️ Pure CSS. 22 | 23 | ## How does it work? 24 | 25 | All the components have two states: the _default_ and the _active_ state. The state toggle occurs based on a class `is-active`. 26 | 27 | ## Contributing 28 | 29 | More info [here](CONTRIBUTING.md). 30 | 31 | ## Spreading the world 32 | 33 | Companies/projects using _ui-interactions_. 34 | 35 | _Soon, I hope!_ 😝 36 | 37 | ## License 38 | 39 | The code is available under the [MIT License](LICENSE.md). 40 | -------------------------------------------------------------------------------- /dist/ui-loading-01.css: -------------------------------------------------------------------------------- 1 | @-moz-keyframes rotation { 2 | from { 3 | transform: rotate(0); 4 | } 5 | to { 6 | transform: rotate(359deg); 7 | } 8 | } 9 | @-webkit-keyframes rotation { 10 | from { 11 | transform: rotate(0); 12 | } 13 | to { 14 | transform: rotate(359deg); 15 | } 16 | } 17 | @-o-keyframes rotation { 18 | from { 19 | transform: rotate(0); 20 | } 21 | to { 22 | transform: rotate(359deg); 23 | } 24 | } 25 | @keyframes rotation { 26 | from { 27 | transform: rotate(0); 28 | } 29 | to { 30 | transform: rotate(359deg); 31 | } 32 | } 33 | .ui-loading-01 { 34 | padding: 15px 25px; 35 | color: #2980b9; 36 | cursor: pointer; 37 | border: solid 1px #2980b9; 38 | font-size: 16px; 39 | position: relative; 40 | z-index: 1; 41 | overflow: hidden; 42 | transition: color 0.3s ease; 43 | } 44 | .ui-loading-01:before { 45 | left: 0; 46 | top: 0; 47 | width: 100%; 48 | height: 100%; 49 | position: absolute; 50 | content: ''; 51 | background-color: #2980b9; 52 | transform: scaleX(0); 53 | transition: transform 0.3s ease; 54 | } 55 | .ui-loading-01:after { 56 | content: ''; 57 | border: solid 2px #fff; 58 | border-left-color: transparent; 59 | width: 16px; 60 | height: 16px; 61 | position: absolute; 62 | left: 50%; 63 | top: 50%; 64 | border-radius: 50%; 65 | margin-top: -8px; 66 | margin-left: -8px; 67 | opacity: 0; 68 | transition: opacity 0.2s 0.1s ease; 69 | } 70 | .ui-loading-01.is-active:before { 71 | transform: scaleX(1); 72 | } 73 | .ui-loading-01.is-active:after { 74 | animation: rotation 0.5s infinite linear; 75 | opacity: 1; 76 | } 77 | 78 | -------------------------------------------------------------------------------- /dist/ui-loading-02.css: -------------------------------------------------------------------------------- 1 | @-moz-keyframes rotation { 2 | from { 3 | transform: rotate(0); 4 | } 5 | to { 6 | transform: rotate(359deg); 7 | } 8 | } 9 | @-webkit-keyframes rotation { 10 | from { 11 | transform: rotate(0); 12 | } 13 | to { 14 | transform: rotate(359deg); 15 | } 16 | } 17 | @-o-keyframes rotation { 18 | from { 19 | transform: rotate(0); 20 | } 21 | to { 22 | transform: rotate(359deg); 23 | } 24 | } 25 | @keyframes rotation { 26 | from { 27 | transform: rotate(0); 28 | } 29 | to { 30 | transform: rotate(359deg); 31 | } 32 | } 33 | .ui-loading-02 { 34 | padding: 15px 25px; 35 | color: #2980b9; 36 | cursor: pointer; 37 | border: solid 1px #2980b9; 38 | font-size: 16px; 39 | position: relative; 40 | z-index: 1; 41 | overflow: hidden; 42 | transition: color 0.3s ease; 43 | } 44 | .ui-loading-02:before { 45 | left: 0; 46 | top: 0; 47 | width: 100%; 48 | height: 100%; 49 | position: absolute; 50 | content: ''; 51 | background-color: #2980b9; 52 | transform: scaleY(0); 53 | transition: transform 0.3s ease; 54 | } 55 | .ui-loading-02:after { 56 | content: ''; 57 | border: solid 2px #fff; 58 | border-left-color: transparent; 59 | width: 16px; 60 | height: 16px; 61 | position: absolute; 62 | left: 50%; 63 | top: 50%; 64 | border-radius: 50%; 65 | margin-top: -8px; 66 | margin-left: -8px; 67 | opacity: 0; 68 | transition: opacity 0.2s 0.1s ease; 69 | } 70 | .ui-loading-02.is-active:before { 71 | transform: scaleY(1); 72 | } 73 | .ui-loading-02.is-active:after { 74 | animation: rotation 0.5s infinite linear; 75 | opacity: 1; 76 | } 77 | 78 | -------------------------------------------------------------------------------- /dist/ui-loading-03.css: -------------------------------------------------------------------------------- 1 | @-moz-keyframes rotation { 2 | from { 3 | transform: rotate(0); 4 | } 5 | to { 6 | transform: rotate(359deg); 7 | } 8 | } 9 | @-webkit-keyframes rotation { 10 | from { 11 | transform: rotate(0); 12 | } 13 | to { 14 | transform: rotate(359deg); 15 | } 16 | } 17 | @-o-keyframes rotation { 18 | from { 19 | transform: rotate(0); 20 | } 21 | to { 22 | transform: rotate(359deg); 23 | } 24 | } 25 | @keyframes rotation { 26 | from { 27 | transform: rotate(0); 28 | } 29 | to { 30 | transform: rotate(359deg); 31 | } 32 | } 33 | .ui-loading-03 { 34 | padding: 15px 25px; 35 | color: #2980b9; 36 | cursor: pointer; 37 | border: solid 1px #2980b9; 38 | font-size: 16px; 39 | position: relative; 40 | z-index: 1; 41 | overflow: hidden; 42 | transition: color 0.3s ease; 43 | } 44 | .ui-loading-03:before { 45 | left: 0; 46 | top: 0; 47 | width: 100%; 48 | height: 100%; 49 | position: absolute; 50 | content: ''; 51 | background-color: #2980b9; 52 | transform: translateX(-100%); 53 | opacity: 0; 54 | transition: opacity 0.3s ease, transform 0.1s 0.3s; 55 | } 56 | .ui-loading-03:after { 57 | content: ''; 58 | border: solid 2px #fff; 59 | border-left-color: transparent; 60 | width: 16px; 61 | height: 16px; 62 | position: absolute; 63 | left: 50%; 64 | top: 50%; 65 | border-radius: 50%; 66 | margin-top: -8px; 67 | margin-left: -8px; 68 | opacity: 0; 69 | transition: opacity 0.2s 0.1s ease; 70 | } 71 | .ui-loading-03.is-active:before { 72 | transition: opacity 0.3s ease; 73 | transform: translateX(0); 74 | opacity: 1; 75 | } 76 | .ui-loading-03.is-active:after { 77 | animation: rotation 0.5s infinite linear; 78 | opacity: 1; 79 | } 80 | 81 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | // NPM Packages 2 | const path = require('path') 3 | const glob = require('glob') 4 | const webpack = require('webpack') 5 | 6 | // Source & Dist 7 | const source = path.resolve(__dirname, 'src') 8 | const dist = path.resolve(__dirname, 'dist') 9 | 10 | // Plugins 11 | const MiniCssExtractPlugin = require('mini-css-extract-plugin') 12 | const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") 13 | 14 | // Files 15 | const entryFiles = glob.sync(`./src/ui/**/*.styl`) 16 | 17 | // 18 | module.exports = (env, argv) => { 19 | 20 | // Env 21 | const DEV = 'development'; 22 | const currentEnvironment = argv.mode || DEV; 23 | const isDev = currentEnvironment === DEV; 24 | 25 | return { 26 | entry: entryFiles.reduce(entries, { 27 | 'all': ['./src/all.styl'] 28 | }), 29 | 30 | output: { 31 | path: path.resolve(__dirname, 'dist'), 32 | filename: '[name].js' 33 | }, 34 | 35 | resolve: { 36 | modules: [source, 'node_modules'] 37 | }, 38 | 39 | optimization: { 40 | minimizer: isDev ? [] : [new OptimizeCSSAssetsPlugin({})] 41 | }, 42 | 43 | module: { 44 | rules: [ 45 | { 46 | test: /\.html$/, 47 | use: [ 48 | { 49 | loader: "html-loader", 50 | options: { minimize: true } 51 | } 52 | ] 53 | }, 54 | { 55 | test: /\.styl$/, 56 | use: [ 57 | MiniCssExtractPlugin.loader, 58 | 'css-loader', 59 | 'stylus-loader?paths[]=./src' 60 | ] 61 | } 62 | ] 63 | }, 64 | 65 | plugins: [ 66 | new MiniCssExtractPlugin('[name].css'), 67 | new webpack.HotModuleReplacementPlugin() 68 | ], 69 | 70 | devServer: { 71 | contentBase: [ 72 | path.resolve(__dirname, "src/ui"), 73 | path.resolve(__dirname, "src/common") 74 | ], 75 | watchContentBase: true, 76 | compress: true, 77 | port: 9001 78 | } 79 | } 80 | 81 | } 82 | 83 | // Helpers 84 | function entries(acc, file) { 85 | const dirname = path.basename(path.dirname(file)) 86 | acc[`ui-${dirname}`] = dirname in acc ? acc[dirname].concat(file) : [file] 87 | return acc 88 | } -------------------------------------------------------------------------------- /dist/ui-toggle-16.css: -------------------------------------------------------------------------------- 1 | .ui-toggle-16 { 2 | padding: 15px 25px; 3 | color: #2980b9; 4 | cursor: pointer; 5 | border: solid 1px #2980b9; 6 | font-size: 16px; 7 | position: relative; 8 | z-index: 1; 9 | overflow: hidden; 10 | transition: color 0.3s ease; 11 | transform-origin: center top; 12 | } 13 | .ui-toggle-16:before { 14 | left: 0; 15 | top: 0; 16 | position: absolute; 17 | width: 100%; 18 | height: 100%; 19 | content: ''; 20 | transition: transform 0.35s ease; 21 | z-index: -1; 22 | background-color: #2980b9; 23 | } 24 | .ui-toggle-16.is-active { 25 | color: #fff; 26 | } 27 | .ui-toggle-16:before { 28 | transform: translateY(-100%); 29 | transform-origin: center top; 30 | } 31 | .ui-toggle-16.is-active { 32 | animation: cartoon-container 500ms ease-out forwards; 33 | } 34 | .ui-toggle-16.is-active:before { 35 | animation: cartoon-before 450ms 390ms ease-out forwards; 36 | } 37 | @-moz-keyframes cartoon-container { 38 | 0% { 39 | transform: scale(1, 1); 40 | color: #2980b9; 41 | } 42 | 50% { 43 | transform: scale(1, 0.6); 44 | } 45 | 80% { 46 | transform: scale(1, 1.4); 47 | color: #2980b9; 48 | } 49 | 100% { 50 | transform: scale(1, 1); 51 | color: #fff; 52 | } 53 | } 54 | @-webkit-keyframes cartoon-container { 55 | 0% { 56 | transform: scale(1, 1); 57 | color: #2980b9; 58 | } 59 | 50% { 60 | transform: scale(1, 0.6); 61 | } 62 | 80% { 63 | transform: scale(1, 1.4); 64 | color: #2980b9; 65 | } 66 | 100% { 67 | transform: scale(1, 1); 68 | color: #fff; 69 | } 70 | } 71 | @-o-keyframes cartoon-container { 72 | 0% { 73 | transform: scale(1, 1); 74 | color: #2980b9; 75 | } 76 | 50% { 77 | transform: scale(1, 0.6); 78 | } 79 | 80% { 80 | transform: scale(1, 1.4); 81 | color: #2980b9; 82 | } 83 | 100% { 84 | transform: scale(1, 1); 85 | color: #fff; 86 | } 87 | } 88 | @keyframes cartoon-container { 89 | 0% { 90 | transform: scale(1, 1); 91 | color: #2980b9; 92 | } 93 | 50% { 94 | transform: scale(1, 0.6); 95 | } 96 | 80% { 97 | transform: scale(1, 1.4); 98 | color: #2980b9; 99 | } 100 | 100% { 101 | transform: scale(1, 1); 102 | color: #fff; 103 | } 104 | } 105 | @-moz-keyframes cartoon-before { 106 | 0% { 107 | transform: translateY(-100%); 108 | } 109 | 50% { 110 | transform: translateY(30%); 111 | } 112 | 80% { 113 | transform: translateY(-10%); 114 | } 115 | 100% { 116 | transform: translateY(0); 117 | } 118 | } 119 | @-webkit-keyframes cartoon-before { 120 | 0% { 121 | transform: translateY(-100%); 122 | } 123 | 50% { 124 | transform: translateY(30%); 125 | } 126 | 80% { 127 | transform: translateY(-10%); 128 | } 129 | 100% { 130 | transform: translateY(0); 131 | } 132 | } 133 | @-o-keyframes cartoon-before { 134 | 0% { 135 | transform: translateY(-100%); 136 | } 137 | 50% { 138 | transform: translateY(30%); 139 | } 140 | 80% { 141 | transform: translateY(-10%); 142 | } 143 | 100% { 144 | transform: translateY(0); 145 | } 146 | } 147 | @keyframes cartoon-before { 148 | 0% { 149 | transform: translateY(-100%); 150 | } 151 | 50% { 152 | transform: translateY(30%); 153 | } 154 | 80% { 155 | transform: translateY(-10%); 156 | } 157 | 100% { 158 | transform: translateY(0); 159 | } 160 | } 161 | 162 | -------------------------------------------------------------------------------- /dist/all.css: -------------------------------------------------------------------------------- 1 | .ui-arrow-01 { 2 | position: relative; 3 | width: 30px; 4 | height: 30px; 5 | border: none; 6 | background-color: transparent; 7 | } 8 | .ui-arrow-01:before, 9 | .ui-arrow-01:after { 10 | content: ''; 11 | background-color: #2980b9; 12 | position: absolute; 13 | top: 50%; 14 | width: 1px; 15 | height: calc(70% - 1px); 16 | margin-top: -35%; 17 | } 18 | .ui-arrow-01:before { 19 | left: 50%; 20 | margin-left: -25%; 21 | transform: rotate(-45deg); 22 | } 23 | .ui-arrow-01:after { 24 | right: 50%; 25 | margin-right: -25%; 26 | transform: rotate(45deg); 27 | } 28 | .ui-arrow-01:before, 29 | .ui-arrow-01:after { 30 | transition: transform 0.34s ease; 31 | } 32 | .ui-arrow-01.is-active:before { 33 | transform: rotate(45deg); 34 | } 35 | .ui-arrow-01.is-active:after { 36 | transform: rotate(-45deg); 37 | } 38 | .ui-arrow-02 { 39 | position: relative; 40 | width: 30px; 41 | height: 30px; 42 | border: none; 43 | background-color: transparent; 44 | transition: transform 0.3s ease; 45 | } 46 | .ui-arrow-02:before, 47 | .ui-arrow-02:after { 48 | content: ''; 49 | background-color: #2980b9; 50 | position: absolute; 51 | top: 50%; 52 | width: 1px; 53 | height: calc(70% - 1px); 54 | margin-top: -35%; 55 | } 56 | .ui-arrow-02:before { 57 | left: 50%; 58 | margin-left: -25%; 59 | transform: rotate(-45deg); 60 | } 61 | .ui-arrow-02:after { 62 | right: 50%; 63 | margin-right: -25%; 64 | transform: rotate(45deg); 65 | } 66 | .ui-arrow-02.is-active { 67 | transform: rotate(-180deg); 68 | } 69 | .ui-hamburger-01 { 70 | width: 30px; 71 | height: 26px; 72 | border: none; 73 | position: relative; 74 | background: linear-gradient(to bottom, #2980b9, #2980b9); 75 | background-size: 100% 20%; 76 | background-repeat: no-repeat; 77 | background-position: center center; 78 | transition: background-size 0.2s 0.25s ease; 79 | cursor: pointer; 80 | } 81 | .ui-hamburger-01:before, 82 | .ui-hamburger-01:after { 83 | height: 20%; 84 | width: 100%; 85 | position: absolute; 86 | left: 0; 87 | background-color: #2980b9; 88 | content: ''; 89 | transition: transform 0.3s ease; 90 | } 91 | .ui-hamburger-01:before { 92 | top: 0; 93 | transform-origin: 9% 150%; 94 | } 95 | .ui-hamburger-01:after { 96 | bottom: 0; 97 | transform-origin: 9% -50%; 98 | } 99 | .ui-hamburger-01.is-active { 100 | background-size: 0 20%; 101 | transition-delay: 0s; 102 | } 103 | .ui-hamburger-01.is-active:before { 104 | transform: rotate(45deg); 105 | transition-delay: 0.15s; 106 | } 107 | .ui-hamburger-01.is-active:after { 108 | transform: rotate(-45deg); 109 | transition-delay: 0.15s; 110 | } 111 | .ui-hamburger-02 { 112 | width: 30px; 113 | height: 26px; 114 | border: none; 115 | position: relative; 116 | background: linear-gradient(to bottom, #2980b9, #2980b9); 117 | background-size: 100% 20%; 118 | background-repeat: no-repeat; 119 | background-position: center center; 120 | transition: background-size 0.2s 0.25s ease; 121 | cursor: pointer; 122 | } 123 | .ui-hamburger-02:before, 124 | .ui-hamburger-02:after { 125 | height: 20%; 126 | width: 100%; 127 | position: absolute; 128 | left: 0; 129 | background-color: #2980b9; 130 | content: ''; 131 | transition: transform 0.3s ease; 132 | } 133 | .ui-hamburger-02:before { 134 | top: 0; 135 | transform-origin: 91% 150%; 136 | } 137 | .ui-hamburger-02:after { 138 | bottom: 0; 139 | transform-origin: 91% -50%; 140 | } 141 | .ui-hamburger-02.is-active { 142 | background-size: 0 20%; 143 | transition-delay: 0s; 144 | } 145 | .ui-hamburger-02.is-active:before { 146 | transform: rotate(-45deg); 147 | transition-delay: 0.15s; 148 | } 149 | .ui-hamburger-02.is-active:after { 150 | transform: rotate(45deg); 151 | transition-delay: 0.15s; 152 | } 153 | .ui-hamburger-03 { 154 | width: 30px; 155 | height: 26px; 156 | border: none; 157 | position: relative; 158 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 159 | background-size: 100% 40%; 160 | background-repeat-x: no-repeat; 161 | background-position: 0 0; 162 | cursor: pointer; 163 | transition: background-size 0.2s 0.45s ease; 164 | } 165 | .ui-hamburger-03:before, 166 | .ui-hamburger-03:after { 167 | height: 20%; 168 | width: 0; 169 | position: absolute; 170 | background-color: #2980b9; 171 | content: ''; 172 | transform: rotate(0); 173 | top: 40%; 174 | transition: transform 0.3s ease, width 0.3s 0.2s ease; 175 | } 176 | .ui-hamburger-03:before, 177 | .ui-hamburger-03:after { 178 | left: 0; 179 | } 180 | .ui-hamburger-03.is-active { 181 | background-size: 0 40%; 182 | transition-delay: 0s; 183 | } 184 | .ui-hamburger-03.is-active:before, 185 | .ui-hamburger-03.is-active:after { 186 | width: 100%; 187 | transition: width 0.3s 0.2s ease, transform 0.3s 0.4s ease; 188 | } 189 | .ui-hamburger-03.is-active:before { 190 | transform: rotate(-45deg); 191 | } 192 | .ui-hamburger-03.is-active:after { 193 | transform: rotate(45deg); 194 | } 195 | .ui-hamburger-04 { 196 | width: 30px; 197 | height: 26px; 198 | border: none; 199 | position: relative; 200 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 201 | background-size: 100% 40%; 202 | background-repeat-x: no-repeat; 203 | background-position: 0 0; 204 | cursor: pointer; 205 | transition: background-position 0.2s 0.45s ease; 206 | } 207 | .ui-hamburger-04:before, 208 | .ui-hamburger-04:after { 209 | height: 20%; 210 | width: 0; 211 | position: absolute; 212 | background-color: #2980b9; 213 | content: ''; 214 | transform: rotate(0); 215 | top: 40%; 216 | transition: transform 0.3s ease, width 0.3s 0.2s ease; 217 | } 218 | .ui-hamburger-04:before, 219 | .ui-hamburger-04:after { 220 | right: 0; 221 | } 222 | .ui-hamburger-04.is-active { 223 | background-position: 30px 0; 224 | transition-delay: 0s; 225 | } 226 | .ui-hamburger-04.is-active:before, 227 | .ui-hamburger-04.is-active:after { 228 | width: 100%; 229 | transition: width 0.3s 0.2s ease, transform 0.3s 0.4s ease; 230 | } 231 | .ui-hamburger-04.is-active:before { 232 | transform: rotate(-45deg); 233 | } 234 | .ui-hamburger-04.is-active:after { 235 | transform: rotate(45deg); 236 | } 237 | .ui-hamburger-05 { 238 | width: 30px; 239 | height: 26px; 240 | border: none; 241 | position: relative; 242 | background: linear-gradient(to bottom, #2980b9, #2980b9); 243 | background-size: 100% 20%; 244 | background-repeat: no-repeat; 245 | background-position: center center; 246 | transition: background-size 0.2s 0.25s ease; 247 | cursor: pointer; 248 | transition: background-size 0.3s 0.2s ease; 249 | } 250 | .ui-hamburger-05:before, 251 | .ui-hamburger-05:after { 252 | height: 20%; 253 | width: 100%; 254 | position: absolute; 255 | left: 0; 256 | background-color: #2980b9; 257 | content: ''; 258 | transition: transform 0.3s ease; 259 | } 260 | .ui-hamburger-05:before { 261 | top: 0; 262 | } 263 | .ui-hamburger-05:after { 264 | bottom: 0; 265 | } 266 | .ui-hamburger-05:before, 267 | .ui-hamburger-05:after { 268 | transition: 0.3s ease; 269 | } 270 | .ui-hamburger-05.is-active { 271 | background-size: 0 0; 272 | } 273 | .ui-hamburger-05.is-active:before, 274 | .ui-hamburger-05.is-active:after { 275 | transition-delay: 0.3s; 276 | } 277 | .ui-hamburger-05.is-active:before { 278 | transform: translateY(200%) rotate(45deg); 279 | } 280 | .ui-hamburger-05.is-active:after { 281 | transform: translateY(-200%) rotate(-45deg); 282 | } 283 | .ui-hamburger-06 { 284 | width: 30px; 285 | height: 26px; 286 | border: none; 287 | position: relative; 288 | cursor: pointer; 289 | } 290 | .ui-hamburger-06:before { 291 | content: ''; 292 | position: absolute; 293 | left: 0; 294 | top: 0; 295 | height: 100%; 296 | width: 100%; 297 | background: linear-gradient(to bottom, #2980b9 50%, transparent 50%); 298 | background-size: 100% 40%; 299 | background-repeat-x: no-repeat; 300 | background-position: 0 0; 301 | transition: opacity 0.3s ease, transform 0.3s ease; 302 | } 303 | .ui-hamburger-06:after { 304 | width: 80%; 305 | height: 90%; 306 | top: 5%; 307 | left: 10%; 308 | content: ''; 309 | position: absolute; 310 | background: linear-gradient(to right, transparent 40%, #2980b9 40%, #2980b9 60%, transparent 60%), linear-gradient(to bottom, transparent 40%, #2980b9 40%, #2980b9 60%, transparent 60%); 311 | transform: rotate(45deg) scale(0); 312 | opacity: 0; 313 | transition: opacity 0.3s ease, transform 0.3s ease; 314 | } 315 | .ui-hamburger-06.is-active:before { 316 | opacity: 0; 317 | transform: scale(0); 318 | } 319 | .ui-hamburger-06.is-active:after { 320 | transform: rotate(45deg) scale(1); 321 | opacity: 1; 322 | transition-delay: 0.3s ease; 323 | } 324 | @-moz-keyframes rotation { 325 | from { 326 | transform: rotate(0); 327 | } 328 | to { 329 | transform: rotate(359deg); 330 | } 331 | } 332 | @-webkit-keyframes rotation { 333 | from { 334 | transform: rotate(0); 335 | } 336 | to { 337 | transform: rotate(359deg); 338 | } 339 | } 340 | @-o-keyframes rotation { 341 | from { 342 | transform: rotate(0); 343 | } 344 | to { 345 | transform: rotate(359deg); 346 | } 347 | } 348 | @keyframes rotation { 349 | from { 350 | transform: rotate(0); 351 | } 352 | to { 353 | transform: rotate(359deg); 354 | } 355 | } 356 | .ui-loading-01 { 357 | padding: 15px 25px; 358 | color: #2980b9; 359 | cursor: pointer; 360 | border: solid 1px #2980b9; 361 | font-size: 16px; 362 | position: relative; 363 | z-index: 1; 364 | overflow: hidden; 365 | transition: color 0.3s ease; 366 | } 367 | .ui-loading-01:before { 368 | left: 0; 369 | top: 0; 370 | width: 100%; 371 | height: 100%; 372 | position: absolute; 373 | content: ''; 374 | background-color: #2980b9; 375 | transform: scaleX(0); 376 | transition: transform 0.3s ease; 377 | } 378 | .ui-loading-01:after { 379 | content: ''; 380 | border: solid 2px #fff; 381 | border-left-color: transparent; 382 | width: 16px; 383 | height: 16px; 384 | position: absolute; 385 | left: 50%; 386 | top: 50%; 387 | border-radius: 50%; 388 | margin-top: -8px; 389 | margin-left: -8px; 390 | opacity: 0; 391 | transition: opacity 0.2s 0.1s ease; 392 | } 393 | .ui-loading-01.is-active:before { 394 | transform: scaleX(1); 395 | } 396 | .ui-loading-01.is-active:after { 397 | animation: rotation 0.5s infinite linear; 398 | opacity: 1; 399 | } 400 | @-moz-keyframes rotation { 401 | from { 402 | transform: rotate(0); 403 | } 404 | to { 405 | transform: rotate(359deg); 406 | } 407 | } 408 | @-webkit-keyframes rotation { 409 | from { 410 | transform: rotate(0); 411 | } 412 | to { 413 | transform: rotate(359deg); 414 | } 415 | } 416 | @-o-keyframes rotation { 417 | from { 418 | transform: rotate(0); 419 | } 420 | to { 421 | transform: rotate(359deg); 422 | } 423 | } 424 | @keyframes rotation { 425 | from { 426 | transform: rotate(0); 427 | } 428 | to { 429 | transform: rotate(359deg); 430 | } 431 | } 432 | .ui-loading-02 { 433 | padding: 15px 25px; 434 | color: #2980b9; 435 | cursor: pointer; 436 | border: solid 1px #2980b9; 437 | font-size: 16px; 438 | position: relative; 439 | z-index: 1; 440 | overflow: hidden; 441 | transition: color 0.3s ease; 442 | } 443 | .ui-loading-02:before { 444 | left: 0; 445 | top: 0; 446 | width: 100%; 447 | height: 100%; 448 | position: absolute; 449 | content: ''; 450 | background-color: #2980b9; 451 | transform: scaleY(0); 452 | transition: transform 0.3s ease; 453 | } 454 | .ui-loading-02:after { 455 | content: ''; 456 | border: solid 2px #fff; 457 | border-left-color: transparent; 458 | width: 16px; 459 | height: 16px; 460 | position: absolute; 461 | left: 50%; 462 | top: 50%; 463 | border-radius: 50%; 464 | margin-top: -8px; 465 | margin-left: -8px; 466 | opacity: 0; 467 | transition: opacity 0.2s 0.1s ease; 468 | } 469 | .ui-loading-02.is-active:before { 470 | transform: scaleY(1); 471 | } 472 | .ui-loading-02.is-active:after { 473 | animation: rotation 0.5s infinite linear; 474 | opacity: 1; 475 | } 476 | @-moz-keyframes rotation { 477 | from { 478 | transform: rotate(0); 479 | } 480 | to { 481 | transform: rotate(359deg); 482 | } 483 | } 484 | @-webkit-keyframes rotation { 485 | from { 486 | transform: rotate(0); 487 | } 488 | to { 489 | transform: rotate(359deg); 490 | } 491 | } 492 | @-o-keyframes rotation { 493 | from { 494 | transform: rotate(0); 495 | } 496 | to { 497 | transform: rotate(359deg); 498 | } 499 | } 500 | @keyframes rotation { 501 | from { 502 | transform: rotate(0); 503 | } 504 | to { 505 | transform: rotate(359deg); 506 | } 507 | } 508 | .ui-loading-03 { 509 | padding: 15px 25px; 510 | color: #2980b9; 511 | cursor: pointer; 512 | border: solid 1px #2980b9; 513 | font-size: 16px; 514 | position: relative; 515 | z-index: 1; 516 | overflow: hidden; 517 | transition: color 0.3s ease; 518 | } 519 | .ui-loading-03:before { 520 | left: 0; 521 | top: 0; 522 | width: 100%; 523 | height: 100%; 524 | position: absolute; 525 | content: ''; 526 | background-color: #2980b9; 527 | transform: translateX(-100%); 528 | opacity: 0; 529 | transition: opacity 0.3s ease, transform 0.1s 0.3s; 530 | } 531 | .ui-loading-03:after { 532 | content: ''; 533 | border: solid 2px #fff; 534 | border-left-color: transparent; 535 | width: 16px; 536 | height: 16px; 537 | position: absolute; 538 | left: 50%; 539 | top: 50%; 540 | border-radius: 50%; 541 | margin-top: -8px; 542 | margin-left: -8px; 543 | opacity: 0; 544 | transition: opacity 0.2s 0.1s ease; 545 | } 546 | .ui-loading-03.is-active:before { 547 | transition: opacity 0.3s ease; 548 | transform: translateX(0); 549 | opacity: 1; 550 | } 551 | .ui-loading-03.is-active:after { 552 | animation: rotation 0.5s infinite linear; 553 | opacity: 1; 554 | } 555 | .ui-plus-01 { 556 | position: relative; 557 | cursor: pointer; 558 | border: none; 559 | background-color: transparent; 560 | width: 30px; 561 | height: 30px; 562 | } 563 | .ui-plus-01:before, 564 | .ui-plus-01:after { 565 | content: ""; 566 | height: 20%; 567 | width: 100%; 568 | background-color: #2980b9; 569 | position: absolute; 570 | right: 0; 571 | top: 50%; 572 | margin-top: -10%; 573 | } 574 | .ui-plus-01:before { 575 | transform: rotate(90deg); 576 | } 577 | .ui-plus-01:before { 578 | transition: transform 0.3s ease; 579 | } 580 | .ui-plus-01.is-active:before { 581 | transform: rotate(0); 582 | } 583 | .ui-plus-02 { 584 | position: relative; 585 | cursor: pointer; 586 | border: none; 587 | background-color: transparent; 588 | width: 30px; 589 | height: 30px; 590 | } 591 | .ui-plus-02:before, 592 | .ui-plus-02:after { 593 | content: ""; 594 | height: 20%; 595 | width: 100%; 596 | background-color: #2980b9; 597 | position: absolute; 598 | right: 0; 599 | top: 50%; 600 | margin-top: -10%; 601 | } 602 | .ui-plus-02:before { 603 | transform: rotate(90deg); 604 | } 605 | .ui-plus-02:before { 606 | transition: transform 0.3s ease; 607 | } 608 | .ui-plus-02.is-active:before { 609 | transform: rotate(-180deg); 610 | } 611 | .ui-toggle-01 { 612 | padding: 15px 25px; 613 | color: #2980b9; 614 | cursor: pointer; 615 | border: solid 1px #2980b9; 616 | font-size: 16px; 617 | position: relative; 618 | z-index: 1; 619 | overflow: hidden; 620 | transition: color 0.3s ease; 621 | } 622 | .ui-toggle-01:before { 623 | left: 0; 624 | top: 0; 625 | position: absolute; 626 | width: 100%; 627 | height: 100%; 628 | content: ''; 629 | transition: transform 0.35s ease; 630 | z-index: -1; 631 | background-color: #2980b9; 632 | } 633 | .ui-toggle-01.is-active { 634 | color: #fff; 635 | } 636 | .ui-toggle-01:before { 637 | transform: translateX(calc(-100% - 1px)); 638 | } 639 | .ui-toggle-01.is-active:before { 640 | transform: translateX(0); 641 | } 642 | .ui-toggle-02 { 643 | padding: 15px 25px; 644 | color: #2980b9; 645 | cursor: pointer; 646 | border: solid 1px #2980b9; 647 | font-size: 16px; 648 | position: relative; 649 | z-index: 1; 650 | overflow: hidden; 651 | transition: color 0.3s ease; 652 | } 653 | .ui-toggle-02:before { 654 | left: 0; 655 | top: 0; 656 | position: absolute; 657 | width: 100%; 658 | height: 100%; 659 | content: ''; 660 | transition: transform 0.35s ease; 661 | z-index: -1; 662 | background-color: #2980b9; 663 | } 664 | .ui-toggle-02.is-active { 665 | color: #fff; 666 | } 667 | .ui-toggle-02:before { 668 | transform: translateX(calc(100% + 1px)); 669 | } 670 | .ui-toggle-02.is-active:before { 671 | transform: translateX(0); 672 | } 673 | .ui-toggle-03 { 674 | padding: 15px 25px; 675 | color: #2980b9; 676 | cursor: pointer; 677 | border: solid 1px #2980b9; 678 | font-size: 16px; 679 | position: relative; 680 | z-index: 1; 681 | overflow: hidden; 682 | transition: color 0.3s ease; 683 | } 684 | .ui-toggle-03:before { 685 | left: 0; 686 | top: 0; 687 | position: absolute; 688 | width: 100%; 689 | height: 100%; 690 | content: ''; 691 | transition: transform 0.35s ease; 692 | z-index: -1; 693 | background-color: #2980b9; 694 | } 695 | .ui-toggle-03.is-active { 696 | color: #fff; 697 | } 698 | .ui-toggle-03:before { 699 | transform: translateY(-100%); 700 | } 701 | .ui-toggle-03.is-active:before { 702 | transform: translateY(0); 703 | } 704 | .ui-toggle-04 { 705 | padding: 15px 25px; 706 | color: #2980b9; 707 | cursor: pointer; 708 | border: solid 1px #2980b9; 709 | font-size: 16px; 710 | position: relative; 711 | z-index: 1; 712 | overflow: hidden; 713 | transition: color 0.3s ease; 714 | } 715 | .ui-toggle-04:before { 716 | left: 0; 717 | top: 0; 718 | position: absolute; 719 | width: 100%; 720 | height: 100%; 721 | content: ''; 722 | transition: transform 0.35s ease; 723 | z-index: -1; 724 | background-color: #2980b9; 725 | } 726 | .ui-toggle-04.is-active { 727 | color: #fff; 728 | } 729 | .ui-toggle-04:before { 730 | transform: translateY(100%); 731 | } 732 | .ui-toggle-04.is-active:before { 733 | transform: translateY(0); 734 | } 735 | .ui-toggle-05 { 736 | padding: 15px 25px; 737 | color: #2980b9; 738 | cursor: pointer; 739 | border: solid 1px #2980b9; 740 | font-size: 16px; 741 | position: relative; 742 | z-index: 1; 743 | overflow: hidden; 744 | transition: color 0.3s ease; 745 | } 746 | .ui-toggle-05:before, 747 | .ui-toggle-05:after { 748 | position: absolute; 749 | content: ''; 750 | background-color: #2980b9; 751 | width: 50%; 752 | top: 0; 753 | height: 100%; 754 | transition: transform 0.3s ease; 755 | z-index: -1; 756 | } 757 | .ui-toggle-05:before { 758 | left: 0; 759 | transform: translateX(-100%); 760 | } 761 | .ui-toggle-05:after { 762 | right: 0; 763 | transform: translateX(100%); 764 | } 765 | .ui-toggle-05.is-active { 766 | color: #fff; 767 | } 768 | .ui-toggle-05.is-active:before, 769 | .ui-toggle-05.is-active:after { 770 | transform: translateX(0); 771 | } 772 | .ui-toggle-06 { 773 | padding: 15px 25px; 774 | color: #2980b9; 775 | cursor: pointer; 776 | border: solid 1px #2980b9; 777 | font-size: 16px; 778 | position: relative; 779 | z-index: 1; 780 | overflow: hidden; 781 | transition: color 0.3s ease; 782 | } 783 | .ui-toggle-06:before, 784 | .ui-toggle-06:after { 785 | position: absolute; 786 | content: ''; 787 | background-color: #2980b9; 788 | width: 100%; 789 | left: 0; 790 | height: 50%; 791 | transition: transform 0.3s ease; 792 | z-index: -1; 793 | } 794 | .ui-toggle-06:before { 795 | top: 0; 796 | transform: translateY(-100%); 797 | } 798 | .ui-toggle-06:after { 799 | bottom: 0; 800 | transform: translateY(100%); 801 | } 802 | .ui-toggle-06.is-active { 803 | color: #fff; 804 | } 805 | .ui-toggle-06.is-active:before, 806 | .ui-toggle-06.is-active:after { 807 | transform: translateY(0); 808 | } 809 | .ui-toggle-07 { 810 | padding: 15px 25px; 811 | color: #2980b9; 812 | cursor: pointer; 813 | border: solid 1px #2980b9; 814 | font-size: 16px; 815 | position: relative; 816 | z-index: 1; 817 | overflow: hidden; 818 | transition: color 0.3s ease; 819 | } 820 | .ui-toggle-07:before { 821 | position: absolute; 822 | width: 100%; 823 | height: 100%; 824 | content: ''; 825 | transition: transform 0.35s ease; 826 | z-index: -1; 827 | background-color: #2980b9; 828 | left: 0; 829 | top: 0; 830 | transform-origin: top left; 831 | transform: rotate(-90deg); 832 | } 833 | .ui-toggle-07.is-active { 834 | color: #fff; 835 | } 836 | .ui-toggle-07.is-active:before { 837 | transform: rotate(0); 838 | } 839 | .ui-toggle-08 { 840 | padding: 15px 25px; 841 | color: #2980b9; 842 | cursor: pointer; 843 | border: solid 1px #2980b9; 844 | font-size: 16px; 845 | position: relative; 846 | z-index: 1; 847 | overflow: hidden; 848 | transition: color 0.3s ease; 849 | } 850 | .ui-toggle-08:before { 851 | position: absolute; 852 | width: 100%; 853 | height: 100%; 854 | content: ''; 855 | transition: transform 0.35s ease; 856 | z-index: -1; 857 | background-color: #2980b9; 858 | left: 0; 859 | top: 0; 860 | transform-origin: top left; 861 | transform: rotate(90deg); 862 | } 863 | .ui-toggle-08.is-active { 864 | color: #fff; 865 | } 866 | .ui-toggle-08.is-active:before { 867 | transform: rotate(0); 868 | } 869 | .ui-toggle-09 { 870 | padding: 15px 25px; 871 | color: #2980b9; 872 | cursor: pointer; 873 | border: solid 1px #2980b9; 874 | font-size: 16px; 875 | position: relative; 876 | z-index: 1; 877 | overflow: hidden; 878 | transition: color 0.3s ease; 879 | } 880 | .ui-toggle-09:before { 881 | position: absolute; 882 | width: 100%; 883 | height: 100%; 884 | content: ''; 885 | transition: transform 0.35s ease; 886 | z-index: -1; 887 | background-color: #2980b9; 888 | left: 0; 889 | bottom: 0; 890 | transform-origin: bottom left; 891 | transform: rotate(-90deg); 892 | } 893 | .ui-toggle-09.is-active { 894 | color: #fff; 895 | } 896 | .ui-toggle-09.is-active:before { 897 | transform: rotate(0); 898 | } 899 | .ui-toggle-10 { 900 | padding: 15px 25px; 901 | color: #2980b9; 902 | cursor: pointer; 903 | border: solid 1px #2980b9; 904 | font-size: 16px; 905 | position: relative; 906 | z-index: 1; 907 | overflow: hidden; 908 | transition: color 0.3s ease; 909 | } 910 | .ui-toggle-10:before { 911 | position: absolute; 912 | width: 100%; 913 | height: 100%; 914 | content: ''; 915 | transition: transform 0.35s ease; 916 | z-index: -1; 917 | background-color: #2980b9; 918 | left: 0; 919 | bottom: 0; 920 | transform-origin: bottom left; 921 | transform: rotate(90deg); 922 | } 923 | .ui-toggle-10.is-active { 924 | color: #fff; 925 | } 926 | .ui-toggle-10.is-active:before { 927 | transform: rotate(0); 928 | } 929 | .ui-toggle-11 { 930 | padding: 15px 25px; 931 | color: #2980b9; 932 | cursor: pointer; 933 | border: solid 1px #2980b9; 934 | font-size: 16px; 935 | position: relative; 936 | z-index: 1; 937 | overflow: hidden; 938 | transition: color 0.3s ease; 939 | } 940 | .ui-toggle-11:before { 941 | position: absolute; 942 | width: 100%; 943 | height: 100%; 944 | content: ''; 945 | transition: transform 0.35s ease; 946 | z-index: -1; 947 | background-color: #2980b9; 948 | right: -1px; 949 | width: calc(100% + 1px); 950 | top: 0; 951 | transform-origin: top right; 952 | transform: rotate(-90deg); 953 | } 954 | .ui-toggle-11.is-active { 955 | color: #fff; 956 | } 957 | .ui-toggle-11.is-active:before { 958 | transform: rotate(0); 959 | } 960 | .ui-toggle-12 { 961 | padding: 15px 25px; 962 | color: #2980b9; 963 | cursor: pointer; 964 | border: solid 1px #2980b9; 965 | font-size: 16px; 966 | position: relative; 967 | z-index: 1; 968 | overflow: hidden; 969 | transition: color 0.3s ease; 970 | } 971 | .ui-toggle-12:before { 972 | position: absolute; 973 | width: 100%; 974 | height: 100%; 975 | content: ''; 976 | transition: transform 0.35s ease; 977 | z-index: -1; 978 | background-color: #2980b9; 979 | right: 0; 980 | top: -1px; 981 | height: calc(100% + 1px); 982 | transform-origin: top right; 983 | transform: rotate(90deg); 984 | } 985 | .ui-toggle-12.is-active { 986 | color: #fff; 987 | } 988 | .ui-toggle-12.is-active:before { 989 | transform: rotate(0); 990 | } 991 | .ui-toggle-13 { 992 | padding: 15px 25px; 993 | color: #2980b9; 994 | cursor: pointer; 995 | border: solid 1px #2980b9; 996 | font-size: 16px; 997 | position: relative; 998 | z-index: 1; 999 | overflow: hidden; 1000 | transition: color 0.3s ease; 1001 | } 1002 | .ui-toggle-13:before { 1003 | position: absolute; 1004 | width: 100%; 1005 | height: 100%; 1006 | content: ''; 1007 | transition: transform 0.35s ease; 1008 | z-index: -1; 1009 | background-color: #2980b9; 1010 | right: 0; 1011 | bottom: -1px; 1012 | height: calc(100% + 1px); 1013 | transform-origin: bottom right; 1014 | transform: rotate(-90deg); 1015 | } 1016 | .ui-toggle-13.is-active { 1017 | color: #fff; 1018 | } 1019 | .ui-toggle-13.is-active:before { 1020 | transform: rotate(0); 1021 | } 1022 | .ui-toggle-14 { 1023 | padding: 15px 25px; 1024 | color: #2980b9; 1025 | cursor: pointer; 1026 | border: solid 1px #2980b9; 1027 | font-size: 16px; 1028 | position: relative; 1029 | z-index: 1; 1030 | overflow: hidden; 1031 | transition: color 0.3s ease; 1032 | } 1033 | .ui-toggle-14:before { 1034 | position: absolute; 1035 | width: 100%; 1036 | height: 100%; 1037 | content: ''; 1038 | transition: transform 0.35s ease; 1039 | z-index: -1; 1040 | background-color: #2980b9; 1041 | right: -1px; 1042 | bottom: 0; 1043 | width: calc(100% + 1px); 1044 | transform-origin: bottom right; 1045 | transform: rotate(90deg); 1046 | } 1047 | .ui-toggle-14.is-active { 1048 | color: #fff; 1049 | } 1050 | .ui-toggle-14.is-active:before { 1051 | transform: rotate(0); 1052 | } 1053 | .ui-toggle-15 { 1054 | padding: 15px 25px; 1055 | color: #2980b9; 1056 | cursor: pointer; 1057 | border: solid 1px #2980b9; 1058 | font-size: 16px; 1059 | position: relative; 1060 | z-index: 1; 1061 | overflow: hidden; 1062 | transition: color 0.3s ease; 1063 | } 1064 | .ui-toggle-15:before, 1065 | .ui-toggle-15:after { 1066 | top: 0; 1067 | position: absolute; 1068 | width: calc(50% + 21px); 1069 | height: 100%; 1070 | content: ''; 1071 | background-color: #2980b9; 1072 | transition: transform 0.35s ease; 1073 | z-index: -1; 1074 | } 1075 | .ui-toggle-15:before { 1076 | left: 0; 1077 | transform: skewX(-20deg) translateX(calc(-100% - 20px)); 1078 | } 1079 | .ui-toggle-15:after { 1080 | right: 0; 1081 | transform: skewX(-20deg) translateX(calc(100% + 20px)); 1082 | } 1083 | .ui-toggle-15.is-active { 1084 | color: #fff; 1085 | } 1086 | .ui-toggle-15.is-active:before { 1087 | transform: skewX(-20deg) translateX(-20px); 1088 | } 1089 | .ui-toggle-15.is-active:after { 1090 | transform: skewX(-20deg) translateX(20px); 1091 | } 1092 | .ui-toggle-16 { 1093 | padding: 15px 25px; 1094 | color: #2980b9; 1095 | cursor: pointer; 1096 | border: solid 1px #2980b9; 1097 | font-size: 16px; 1098 | position: relative; 1099 | z-index: 1; 1100 | overflow: hidden; 1101 | transition: color 0.3s ease; 1102 | transform-origin: center top; 1103 | } 1104 | .ui-toggle-16:before { 1105 | left: 0; 1106 | top: 0; 1107 | position: absolute; 1108 | width: 100%; 1109 | height: 100%; 1110 | content: ''; 1111 | transition: transform 0.35s ease; 1112 | z-index: -1; 1113 | background-color: #2980b9; 1114 | } 1115 | .ui-toggle-16.is-active { 1116 | color: #fff; 1117 | } 1118 | .ui-toggle-16:before { 1119 | transform: translateY(-100%); 1120 | transform-origin: center top; 1121 | } 1122 | .ui-toggle-16.is-active { 1123 | animation: cartoon-container 500ms ease-out forwards; 1124 | } 1125 | .ui-toggle-16.is-active:before { 1126 | animation: cartoon-before 450ms 390ms ease-out forwards; 1127 | } 1128 | @-moz-keyframes cartoon-container { 1129 | 0% { 1130 | transform: scale(1, 1); 1131 | color: #2980b9; 1132 | } 1133 | 50% { 1134 | transform: scale(1, 0.6); 1135 | } 1136 | 80% { 1137 | transform: scale(1, 1.4); 1138 | color: #2980b9; 1139 | } 1140 | 100% { 1141 | transform: scale(1, 1); 1142 | color: #fff; 1143 | } 1144 | } 1145 | @-webkit-keyframes cartoon-container { 1146 | 0% { 1147 | transform: scale(1, 1); 1148 | color: #2980b9; 1149 | } 1150 | 50% { 1151 | transform: scale(1, 0.6); 1152 | } 1153 | 80% { 1154 | transform: scale(1, 1.4); 1155 | color: #2980b9; 1156 | } 1157 | 100% { 1158 | transform: scale(1, 1); 1159 | color: #fff; 1160 | } 1161 | } 1162 | @-o-keyframes cartoon-container { 1163 | 0% { 1164 | transform: scale(1, 1); 1165 | color: #2980b9; 1166 | } 1167 | 50% { 1168 | transform: scale(1, 0.6); 1169 | } 1170 | 80% { 1171 | transform: scale(1, 1.4); 1172 | color: #2980b9; 1173 | } 1174 | 100% { 1175 | transform: scale(1, 1); 1176 | color: #fff; 1177 | } 1178 | } 1179 | @keyframes cartoon-container { 1180 | 0% { 1181 | transform: scale(1, 1); 1182 | color: #2980b9; 1183 | } 1184 | 50% { 1185 | transform: scale(1, 0.6); 1186 | } 1187 | 80% { 1188 | transform: scale(1, 1.4); 1189 | color: #2980b9; 1190 | } 1191 | 100% { 1192 | transform: scale(1, 1); 1193 | color: #fff; 1194 | } 1195 | } 1196 | @-moz-keyframes cartoon-before { 1197 | 0% { 1198 | transform: translateY(-100%); 1199 | } 1200 | 50% { 1201 | transform: translateY(30%); 1202 | } 1203 | 80% { 1204 | transform: translateY(-10%); 1205 | } 1206 | 100% { 1207 | transform: translateY(0); 1208 | } 1209 | } 1210 | @-webkit-keyframes cartoon-before { 1211 | 0% { 1212 | transform: translateY(-100%); 1213 | } 1214 | 50% { 1215 | transform: translateY(30%); 1216 | } 1217 | 80% { 1218 | transform: translateY(-10%); 1219 | } 1220 | 100% { 1221 | transform: translateY(0); 1222 | } 1223 | } 1224 | @-o-keyframes cartoon-before { 1225 | 0% { 1226 | transform: translateY(-100%); 1227 | } 1228 | 50% { 1229 | transform: translateY(30%); 1230 | } 1231 | 80% { 1232 | transform: translateY(-10%); 1233 | } 1234 | 100% { 1235 | transform: translateY(0); 1236 | } 1237 | } 1238 | @keyframes cartoon-before { 1239 | 0% { 1240 | transform: translateY(-100%); 1241 | } 1242 | 50% { 1243 | transform: translateY(30%); 1244 | } 1245 | 80% { 1246 | transform: translateY(-10%); 1247 | } 1248 | 100% { 1249 | transform: translateY(0); 1250 | } 1251 | } 1252 | 1253 | --------------------------------------------------------------------------------