major changes

This commit is contained in:
Rohit
2019-06-05 23:10:46 -04:00
parent 3d8246dc09
commit 28f9d5041d
59 changed files with 4147 additions and 217 deletions

View File

@@ -0,0 +1,27 @@
@import './scss/variables';
@import './scss/core';
@import './scss/essentials/keyframes';
@import './scss/essentials/functions';
@import './scss/essentials/mixins';
@import './scss/elements/default/fill';
@import './scss/elements/default/outline';
@import './scss/elements/default/thick';
@import './scss/elements/font-icon/general';
@import './scss/elements/svg/general';
@import './scss/elements/image/general';
@import './scss/elements/switch/general';
@import './scss/elements/switch/fill';
@import './scss/elements/switch/slim';
@import './scss/states/hover';
@import './scss/states/focus';
@import './scss/states/indeterminate';
@import './scss/extras/toggle';
@import './scss/extras/plain';
@import './scss/extras/round';
@import './scss/extras/curve';
@import './scss/extras/animation';
@import './scss/extras/disabled';
@import './scss/extras/locked';
@import './scss/extras/colors';
@import './scss/extras/bigger';
@import './scss/extras/print';

View File

@@ -0,0 +1,85 @@
@charset 'utf-8';
.#{$pretty--class-name} * {
box-sizing: border-box;
}
//Throw error on invalid input types.
.#{$pretty--class-name} input:not([type='checkbox']):not([type='radio']) {
display: none;
@if $pretty--debug {
+ *:after {
content: $pretty--err-message;
border: 1px solid #dedede;
border-left: 3px solid #d9534f;
padding: 9px;
font-size: 1em;
font-weight: 600;
color: #d9534f;
position: absolute;
z-index: 3;
background: #fbfbfb;
top: 0;
left: 0;
}
}
}
.#{$pretty--class-name} {
position: relative;
display: inline-block;
margin-right: 1em;
white-space: nowrap;
line-height: 1;
input {
position: absolute;
left: 0;
top: 0;
min-width: 1em;
width: 100%;
height: 100%;
z-index: $pretty--z-index-front;
opacity: 0;
margin: 0;
padding: 0;
cursor: pointer;
}
.state {
label {
position: initial;
display: inline-block;
font-weight: normal;
margin: 0;
text-indent: $pretty--label-text-offset;
min-width: $pretty--box-size;
&:before,
&:after {
content: '';
width: $pretty--box-size;
height: $pretty--box-size;
display: block;
box-sizing: border-box;
border-radius: 0;
border: 1px solid transparent;
z-index: $pretty--z-index-back;
position: absolute;
left: 0;
top: $pretty-top-offset;
background-color: transparent;
}
&:before {
border-color: $pretty--color-default;
}
}
&.p-is-hover,
&.p-is-indeterminate {
display: none;
}
}
}

View File

@@ -0,0 +1,39 @@
$pretty--class-name: pretty !default;
// colors
$pretty--color-default: #bdc3c7 !default;
$pretty--color-primary: #428bca !default;
$pretty--color-info: #5bc0de !default;
$pretty--color-success: #5cb85c !default;
$pretty--color-warning: #f0ad4e !default;
$pretty--color-danger: #d9534f !default;
$pretty--color-dark: #5a656b !default;
// z-index
$pretty--z-index-back: 0 !default;
$pretty--z-index-between: 1 !default;
$pretty--z-index-front: 2 !default;
// box
$pretty--curve-radius: 20% !default;
$pretty--box-size: calc(1em + 2px) !default;
// text
$pretty--label-text-offset: 1.5em !default;
$pretty--label-text-offset-switch: 2.5em !default;
// scale
$pretty--2x: 1.2em !default;
// color set
$pretty--colors: (primary, $pretty--color-primary), (info, $pretty--color-info), (success, $pretty--color-success), (warning, $pretty--color-warning), (danger, $pretty--color-danger) !default;
// position
$pretty-top: 8;
$pretty-top-switch: ($pretty-top * 2) * 1%;
$pretty-top-offset: calc((0% - (100% - 1em)) - #{$pretty-top * 1%});
$pretty-top-offset-switch: calc((0% - (100% - 1em)) - #{$pretty-top-switch});
// dev
$pretty--debug: false !default;
$pretty--err-message: 'Error: Invalid input type!' !default;

View File

@@ -0,0 +1,7 @@
.#{$pretty--class-name}.p-default.p-fill {
.state label {
&:after {
transform: scale(1);
}
}
}

View File

@@ -0,0 +1,13 @@
.#{$pretty--class-name}.p-default {
.state label {
&:after {
transform: scale(0.6);
}
}
input:checked ~ .state label {
&:after {
background-color: $pretty--color-default !important;
}
}
}

View File

@@ -0,0 +1,12 @@
.#{$pretty--class-name}.p-default.p-thick {
.state label {
&:before,
&:after {
border-width: calc(1em / 7);
}
&:after {
transform: scale(0.4) !important;
}
}
}

View File

@@ -0,0 +1,39 @@
.#{$pretty--class-name}.p-icon {
.state {
.icon {
position: absolute;
font-size: 1em;
width: $pretty--box-size;
height: $pretty--box-size;
left: 0;
z-index: $pretty--z-index-between;
text-align: center;
line-height: normal;
top: $pretty-top-offset;
border: 1px solid transparent;
opacity: 0;
}
.icon:before {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
line-height: 1;
}
}
input:checked ~ .state {
.icon {
opacity: 1;
}
label:before {
border-color: #5a656b;
}
}
}

View File

@@ -0,0 +1,21 @@
.#{$pretty--class-name}.p-image {
.state {
img {
opacity: 0;
position: absolute;
width: $pretty--box-size;
height: $pretty--box-size;
top: 0;
top: $pretty-top-offset;
left: 0;
z-index: $pretty--z-index-back;
text-align: center;
line-height: normal;
transform: scale(0.8);
}
}
input:checked ~ .state img {
opacity: 1;
}
}

View File

@@ -0,0 +1,33 @@
.#{$pretty--class-name}.p-svg {
.state {
.svg {
position: absolute;
font-size: 1em;
width: $pretty--box-size;
height: $pretty--box-size;
left: 0;
z-index: $pretty--z-index-between;
text-align: center;
line-height: normal;
top: $pretty-top-offset;
border: 1px solid transparent;
opacity: 0;
}
svg {
margin: 0;
width: 100%;
height: 100%;
text-align: center;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
line-height: 1;
}
}
input:checked ~ .state .svg {
opacity: 1;
}
}

View File

@@ -0,0 +1,15 @@
.#{$pretty--class-name}.p-switch.p-fill {
input:checked~.state {
&:before {
border-color: $pretty--color-dark;
background-color: $pretty--color-dark !important;
}
label:before {
opacity: 0;
}
label:after {
background-color: #fff !important;
left: 1em;
}
}
}

View File

@@ -0,0 +1,54 @@
.#{$pretty--class-name}.p-switch {
input{
min-width:2em;
}
.state {
position: relative;
&:before {
content: '';
border: 1px solid $pretty--color-default;
border-radius: 60px;
width: 2em;
box-sizing: unset;
height: $pretty--box-size;
position: absolute;
top: 0;
top: $pretty-top-offset-switch;
z-index: $pretty--z-index-back;
transition: all 0.5s ease;
}
label {
text-indent: $pretty--label-text-offset-switch;
&:before,
&:after {
transition: all 0.5s ease;
border-radius: 100%;
left: 0;
border-color: transparent;
transform: scale(0.8);
}
&:after {
background-color: $pretty--color-default !important;
}
}
}
input:checked ~ .state {
&:before {
border-color: $pretty--color-dark;
}
label:before {
opacity: 0;
}
label:after {
background-color: $pretty--color-dark !important;
left: 1em;
}
}
}

View File

@@ -0,0 +1,16 @@
.#{$pretty--class-name}.p-switch.p-slim {
.state {
&:before {
height: 0.1em;
background: $pretty--color-default !important;
top: calc(50% - 0.1em);
}
}
input:checked ~ .state {
&:before {
border-color: $pretty--color-dark;
background-color: $pretty--color-dark !important;
}
}
}

View File

@@ -0,0 +1 @@
// empty

View File

@@ -0,0 +1,102 @@
@keyframes zoom {
0% {
opacity: 0;
transform: scale(0);
}
}
@keyframes tada {
0% {
animation-timing-function: ease-in;
opacity: 0;
transform: scale(7);
}
38% {
animation-timing-function: ease-out;
opacity: 1;
transform: scale(1);
}
55% {
animation-timing-function: ease-in;
transform: scale(1.5);
}
72% {
animation-timing-function: ease-out;
transform: scale(1);
}
81% {
animation-timing-function: ease-in;
transform: scale(1.24);
}
89% {
animation-timing-function: ease-out;
transform: scale(1);
}
95% {
animation-timing-function: ease-in;
transform: scale(1.04);
}
100% {
animation-timing-function: ease-out;
transform: scale(1);
}
}
@keyframes jelly {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(.75, 1.25, 1);
}
40% {
transform: scale3d(1.25, .75, 1);
}
50% {
transform: scale3d(.85, 1.15, 1);
}
65% {
transform: scale3d(1.05, .95, 1);
}
75% {
transform: scale3d(.95, 1.05, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@keyframes rotate {
0% {
opacity: 0;
transform: translateZ(-200px) rotate(-45deg);
}
100% {
opacity: 1;
transform: translateZ(0) rotate(0);
}
}
@keyframes pulse {
0% {
box-shadow: 0px 0px 0px 0px transparentize($pretty--color-default, 0);
}
100% {
box-shadow: 0px 0px 0px 1.5em transparentize($pretty--color-default, 1);
}
}

View File

@@ -0,0 +1 @@
// empty

View File

@@ -0,0 +1,89 @@
.#{$pretty--class-name}.p-smooth {
label:before,
label:after,
.icon,
.svg {
transition: all 0.5s ease;
}
input:checked + .state {
label:after {
transition: all 0.3s ease;
}
.icon,
.svg,
img {
animation: zoom 0.2s ease;
}
}
&.p-default input:checked + .state {
label:after {
animation: zoom 0.2s ease;
}
}
&.p-plain input:checked + .state {
label:before {
content: '';
transform: scale(0);
transition: all 0.5s ease;
}
}
}
.#{$pretty--class-name}.p-tada:not(.p-default) {
input:checked + .state {
.icon,
.svg,
img,
label:before,
label:after {
animation: tada 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1 alternate;
opacity: 1;
}
}
}
.#{$pretty--class-name}.p-jelly:not(.p-default) {
input:checked + .state {
.icon,
.svg,
img,
label:before,
label:after {
animation: jelly 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
opacity: 1;
}
label:before {
border-color: transparent;
}
}
}
.#{$pretty--class-name}.p-rotate:not(.p-default) {
input:checked ~ .state {
.icon,
.svg,
img,
label:before,
label:after {
animation: rotate 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940);
opacity: 1;
}
label:before {
border-color: transparent;
}
}
}
.#{$pretty--class-name}.p-pulse:not(.p-switch) {
input:checked ~ .state {
label:before {
animation: pulse 1s;
}
}
}

View File

@@ -0,0 +1,14 @@
.#{$pretty--class-name}.p-bigger {
label:before,
label:after,
.icon,
.svg,
.img {
font-size: $pretty--2x !important;
top: calc((0% - (100% - 1em)) - 35%) !important;
}
label {
text-indent: 1.7em;
}
}

View File

@@ -0,0 +1,53 @@
.#{$pretty--class-name} {
@each $name, $color in $pretty--colors {
input:checked ~ .state.p-#{$name},
&.p-toggle .state.p-#{$name} {
label:after {
background-color: $color !important;
}
.icon,
.svg {
color: #fff;
stroke: #fff;
}
}
input:checked ~ .state.p-#{$name}-o,
&.p-toggle .state.p-#{$name}-o {
label:before {
border-color: $color;
}
label:after {
background-color: transparent;
}
.icon,
.svg,
svg {
color: $color;
stroke: $color;
}
}
&.p-default:not(.p-fill) input:checked ~ .state.p-#{$name}-o label {
&:after {
background-color: $color !important;
}
}
&.p-switch input:checked ~ .state.p-#{$name}:before {
border-color: $color;
}
&.p-switch.p-fill input:checked ~ .state.p-#{$name}:before {
background-color: $color !important;
}
&.p-switch.p-slim input:checked ~ .state.p-#{$name}:before {
border-color: darken($color, 20%);
background-color: darken($color, 20%) !important;
}
}
}

View File

@@ -0,0 +1,8 @@
.#{$pretty--class-name}.p-curve {
.state label {
&:before,
&:after {
border-radius: $pretty--curve-radius;
}
}
}

View File

@@ -0,0 +1,12 @@
.#{$pretty--class-name} {
input {
&[disabled] {
cursor: not-allowed;
display: none;
& ~ * {
opacity: .5;
}
}
}
}

View File

@@ -0,0 +1,6 @@
.#{$pretty--class-name}.p-locked {
input {
display: none;
cursor: not-allowed;
}
}

View File

@@ -0,0 +1,12 @@
.#{$pretty--class-name}.p-plain {
input:checked ~ .state label,
&.p-toggle .state label {
&:before {
content: none;
}
}
&.p-plain .icon {
transform: scale(1.1);
}
}

View File

@@ -0,0 +1,13 @@
@media print {
.#{$pretty--class-name} {
.state:before,
.state label:before,
.state label:after,
.state .icon {
color-adjust: exact;
/* stylelint-disable */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
}

View File

@@ -0,0 +1,17 @@
.#{$pretty--class-name}.p-round {
.state label {
&:before,
&:after {
border-radius: 100%;
}
}
&.p-icon .state .icon {
border-radius: 100%;
overflow: hidden;
&:before {
transform: scale(0.8);
}
}
}

View File

@@ -0,0 +1,32 @@
.#{$pretty--class-name}.p-toggle {
.state {
&.p-on {
opacity: 0;
display: none;
}
&.p-off,
.icon,
.svg,
img {
opacity: 1;
display: inherit;
}
&.p-off .icon {
color: $pretty--color-default;
}
}
input:checked ~ .state {
&.p-on {
opacity: 1;
display: inherit;
}
&.p-off {
opacity: 0;
display: none;
}
}
}

View File

@@ -0,0 +1,7 @@
.#{$pretty--class-name}.p-has-focus {
input:focus {
~ .state label:before {
box-shadow: 0px 0px 3px 0px rgb(189, 195, 199);
}
}
}

View File

@@ -0,0 +1,13 @@
.#{$pretty--class-name}.p-has-hover {
input:hover ~ .state:not(.p-is-hover) {
display: none;
}
input:hover ~ .state.p-is-hover {
display: block;
.icon {
display: block;
}
}
}

View File

@@ -0,0 +1,14 @@
.#{$pretty--class-name}.p-has-indeterminate {
input[type='checkbox']:indeterminate ~.state:not(.p-is-indeterminate) {
display: none;
}
input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {
display: block;
.icon {
display: block;
opacity: 1;
}
}
}

File diff suppressed because it is too large Load Diff