key-pad-styles.html

<dom-module id="key-pad-styles">
    <template>
        <style>
            :host {
                
            }

            .key-pad__containerPoints {
                margin-bottom: 50px;
                @apply(--layout);
            }

            .key-pad__points {
                @apply(--layout);
                @apply(--layout-flex);
                @apply(--layout-center-justified);
            }

            .key-pad__point {
                border: 1px solid #ccc;
                border-radius: 50%;
                margin: 0 5px;
                padding: 10px 0;
                width: 20px;
            }
                .key-pad__point.key-pad__point--selected {
                    background-color: #ccc;
                }

            .key-pad__reset {
                @apply(--layout);
            }

            .key-pad__keyNums {
                font-size: 16px;
                @apply(--layout);
                @apply(--layout-wrap);
                @apply(--key-pad-nums);
            }

                .key-pad__keyNums > *:not(template) {
                    flex: 1 0 33.3%;
                    @apply(--layout);
                    @apply(--layout-center-justified);
                }

                .key-pad__keyNums >*:nth-child(10) {
                    flex-basis: 66.6%;
                }
        </style>
    </template>
</dom-module>

<dom-module id="key-pad-animations">
    <template>
        <style>
            
            @-webkit-keyframes shake {
                0%   { -webkit-transform: translateX( 2px); }
                20%  { -webkit-transform: translateX(-4px); }
                40%  { -webkit-transform: translateX( 2px); }
                60%  { -webkit-transform: translateX(-2px); }
                80%  { -webkit-transform: translateX( 4px); }
                100% { -webkit-transform: translateX(-2px); }
            }

            @keyframes shake {
                0%   { transform: translateX( 2px);}
                20%  { transform: translateX( -4px);}
                40%  { transform: translateX( 2px);}
                60%  { transform: translateX( -2px);}
                80%  { transform: translateX( 4px);}
                100% { transform: translateX( -2px);}
            }

            .shake {
                animation-name: shake;
                animation-duration: 0.6s;
                transform-origin: 50% 50%;
                animation-iteration-count: 1;
                animation-timing-function: linear;
                -webkit-animation-name: shake;
                -webkit-animation-duration: 0.6s;
                -webkit-transform-origin: 50% 50%;
                -webkit-animation-iteration-count: 1;
                -webkit-animation-timing-function: linear;

            }       
        </style>
    </template>
</dom-module>