add componets
This commit is contained in:
@@ -1,812 +0,0 @@
|
|||||||
@mixin publicGhostButtonsColors(
|
|
||||||
$background-image: linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-primary),
|
|
||||||
var(--pi-color-primary-900)
|
|
||||||
),
|
|
||||||
$color: primary
|
|
||||||
) {
|
|
||||||
color: var(--pi-color-#{$color});
|
|
||||||
background-image: $background-image;
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin publicButtonsBackgroundColors(
|
|
||||||
$color-disabled: var(--pi-color-primary-200),
|
|
||||||
$color-enabled: var(--pi-color-primary-900)
|
|
||||||
) {
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: repeat;
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
&:disabled {
|
|
||||||
background-color: $color-disabled;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
background-color: $color-enabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin publicFillButtonsGradients($color) {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
|
|
||||||
.pi-color__white
|
|
||||||
) {
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: repeat;
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
// Light
|
|
||||||
&.pi-color__mode--light {
|
|
||||||
&:not(:disabled) {
|
|
||||||
background-image: var(--pi-gradient-#{$color}-light);
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: var(--pi-color-grey-200);
|
|
||||||
background-image: var(--pi-gradient-light-disabled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Dark
|
|
||||||
&:not(.pi-color__mode--light) {
|
|
||||||
&:not(:disabled) {
|
|
||||||
background-image: var(--pi-gradient-#{$color}-dark);
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
background-image: var(--pi-gradient-dark-disabled);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Primary & White
|
|
||||||
&.pi-button__white {
|
|
||||||
color: var(--pi-color-#{$color});
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
background-color: var(--pi-color-#{$color});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sizes
|
|
||||||
@mixin publicButtonsSizes {
|
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
|
|
||||||
.pi-button__x-large
|
|
||||||
):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
|
|
||||||
.pi-button__icon--single
|
|
||||||
):not(.pi-button__type--menu-item) {
|
|
||||||
height: 2.875rem;
|
|
||||||
&.pi-button__icon--single {
|
|
||||||
width: var(--pi-spacing-xxxx-large);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.pi-button__toggle):not(.pi-button__x-large):not(
|
|
||||||
.pi-button__trimmed
|
|
||||||
):not(.pi-button__type--menu-item) {
|
|
||||||
height: 2.875rem;
|
|
||||||
&.pi-button__icon--single {
|
|
||||||
width: var(--pi-spacing-xxxx-large);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Default
|
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
|
||||||
.pi-button__toggle
|
|
||||||
):not(.pi-button__type--menu-item) {
|
|
||||||
// Sizes
|
|
||||||
// X small
|
|
||||||
&.pi-button {
|
|
||||||
&:not(.pi-button__icon--single):not(.pi-button__x-small):not(
|
|
||||||
.pi-button__small
|
|
||||||
):not(.pi-button__large):not(.pi-button__trimed):not(
|
|
||||||
.pi-button__xx-small
|
|
||||||
):not(.pi-button__trimmed) {
|
|
||||||
min-height: 2.875rem;
|
|
||||||
}
|
|
||||||
&:not(.pi-button__icon):not(.pi-button__x-small):not(
|
|
||||||
.pi-button__small
|
|
||||||
):not(.pi-button__large):not(.pi-button__large):not(
|
|
||||||
.pi-button__trimed
|
|
||||||
):not(.pi-button__xx-small):not(.pi-button__trimmed) {
|
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Shine hover effect
|
|
||||||
@mixin publicButtonsShineHoverEffect {
|
|
||||||
// Hover shine effect
|
|
||||||
&:not(.pi-button__appearance--ghost):not(.pi-button__type--menu-item):not(
|
|
||||||
.pi-color__black
|
|
||||||
) {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -50%;
|
|
||||||
right: 0;
|
|
||||||
bottom: -50%;
|
|
||||||
left: -50%;
|
|
||||||
transform: rotateZ(75deg) translate(-5rem, 7.5rem);
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover,
|
|
||||||
&:focus {
|
|
||||||
&::after {
|
|
||||||
animation: sheen 0.75s forwards;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translate(0, -0.125rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mode Light
|
|
||||||
&.pi-color__mode--light {
|
|
||||||
&::after {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(229, 172, 142, 0),
|
|
||||||
rgba(255, 255, 255, 0.25) 50%,
|
|
||||||
rgba(229, 172, 142, 0)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
box-shadow: 0px 0px 0px white;
|
|
||||||
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.25);
|
|
||||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.25);
|
|
||||||
box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Mode Dark
|
|
||||||
&.pi-color__mode--dark {
|
|
||||||
&::after {
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
rgba(229, 172, 142, 0),
|
|
||||||
rgba(255, 255, 255, 0.125) 50%,
|
|
||||||
rgba(229, 172, 142, 0)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
&:active {
|
|
||||||
box-shadow: 0px 0px 0px white;
|
|
||||||
-webkit-box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.125);
|
|
||||||
-moz-box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.125);
|
|
||||||
box-shadow: inset -0.125rem -0.125rem -0.125rem
|
|
||||||
rgba(255, 255, 255, 0.125);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sheen {
|
|
||||||
100% {
|
|
||||||
transform: rotateZ(30deg) translate(1rem, -9rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
@mixin publicButtonsColors {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// Shine hover effect
|
|
||||||
&:not(:disabled) {
|
|
||||||
@include publicButtonsShineHoverEffect;
|
|
||||||
}
|
|
||||||
// Default
|
|
||||||
&:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
|
|
||||||
.pi-button__toggle
|
|
||||||
):not(.pi-button__type--menu-item) {
|
|
||||||
font: {
|
|
||||||
weight: 600;
|
|
||||||
}
|
|
||||||
// Color
|
|
||||||
// White
|
|
||||||
// TODO: Add customized white 25 density color gradient for backgrounds
|
|
||||||
// TODO: Add text color gradients
|
|
||||||
&.pi-color__white {
|
|
||||||
background-image: var(--pi-gradient-white-rgba);
|
|
||||||
&:disabled {
|
|
||||||
background-color: rgba($color: white, $alpha: 0.6);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
color: var(--pi-color-primary-900);
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid var(--pi-color-primary-100);
|
|
||||||
&:enabled {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// White default
|
|
||||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
|
|
||||||
.pi-color__warn
|
|
||||||
):not(.pi-color__highlighted) {
|
|
||||||
&:not(:hover) {
|
|
||||||
color: var(--pi-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Primary
|
|
||||||
&.pi-color__primary {
|
|
||||||
@include publicFillButtonsGradients(primary);
|
|
||||||
}
|
|
||||||
// Accent
|
|
||||||
&.pi-color__accent {
|
|
||||||
@include publicFillButtonsGradients(accent);
|
|
||||||
}
|
|
||||||
// Highlighted
|
|
||||||
&.pi-color__highlighted {
|
|
||||||
@include publicFillButtonsGradients(highlighted);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Black
|
|
||||||
&.pi-color__black {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
300deg,
|
|
||||||
hsl(0deg 0% 62%) 0%,
|
|
||||||
hsl(344deg 0% 57%) 21%,
|
|
||||||
hsl(344deg 0% 53%) 30%,
|
|
||||||
hsl(344deg 0% 49%) 39%,
|
|
||||||
hsl(344deg 0% 44%) 46%,
|
|
||||||
hsl(344deg 0% 40%) 54%,
|
|
||||||
hsl(344deg 0% 36%) 61%,
|
|
||||||
hsl(344deg 0% 32%) 69%,
|
|
||||||
hsl(344deg 0% 28%) 79%,
|
|
||||||
hsl(0deg 0% 24%) 100%
|
|
||||||
);
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
&:disabled {
|
|
||||||
background-color: rgba($color: #3d3d3d, $alpha: 0.6);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
background-color: var(--pi-color-black);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// White default
|
|
||||||
&.pi-color__white:not(.pi-color__primary):not(.pi-color__accent):not(
|
|
||||||
.pi-color__warn
|
|
||||||
):not(.pi-color__highlighted) {
|
|
||||||
&:not(:hover) {
|
|
||||||
color: var(--pi-color-black);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Warn
|
|
||||||
&.pi-color__warn {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
@include publicButtonsBackgroundColors(
|
|
||||||
var(--pi-color-warn-200),
|
|
||||||
var(--pi-color-warn-900)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// Mode
|
|
||||||
// Default
|
|
||||||
&:not(.pi-color__mode--light) {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
300deg,
|
|
||||||
hsl(0deg 74% 71%) 0%,
|
|
||||||
hsl(0deg 71% 69%) 21%,
|
|
||||||
hsl(0deg 68% 66%) 30%,
|
|
||||||
hsl(1deg 65% 64%) 39%,
|
|
||||||
hsl(1deg 62% 61%) 46%,
|
|
||||||
hsl(1deg 60% 59%) 54%,
|
|
||||||
hsl(1deg 58% 56%) 61%,
|
|
||||||
hsl(1deg 56% 54%) 69%,
|
|
||||||
hsl(0deg 54% 51%) 79%,
|
|
||||||
hsl(0deg 56% 49%) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Light
|
|
||||||
&.pi-color__mode--light {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
300deg,
|
|
||||||
hsl(350deg 100% 93%) 0%,
|
|
||||||
hsl(351deg 95% 91%) 21%,
|
|
||||||
hsl(352deg 92% 89%) 30%,
|
|
||||||
hsl(353deg 89% 86%) 39%,
|
|
||||||
hsl(354deg 87% 84%) 46%,
|
|
||||||
hsl(356deg 84% 82%) 54%,
|
|
||||||
hsl(357deg 81% 79%) 61%,
|
|
||||||
hsl(358deg 79% 77%) 69%,
|
|
||||||
hsl(359deg 76% 74%) 79%,
|
|
||||||
hsl(0deg 74% 71%) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Warn & White
|
|
||||||
&.pi-color__white {
|
|
||||||
&:not(:hover) {
|
|
||||||
color: var(--pi-color-warn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Success
|
|
||||||
&.pi-color__success {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
@include publicButtonsBackgroundColors(
|
|
||||||
var(--pi-color-success-200),
|
|
||||||
var(--pi-color-success-900)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// Mode
|
|
||||||
// Default
|
|
||||||
&:not(.pi-color__mode--light) {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
300deg,
|
|
||||||
hsl(155deg 48% 79%) 0%,
|
|
||||||
hsl(154deg 45% 74%) 21%,
|
|
||||||
hsl(153deg 43% 69%) 30%,
|
|
||||||
hsl(152deg 42% 64%) 39%,
|
|
||||||
hsl(151deg 40% 60%) 46%,
|
|
||||||
hsl(151deg 39% 55%) 54%,
|
|
||||||
hsl(150deg 39% 50%) 61%,
|
|
||||||
hsl(150deg 48% 45%) 69%,
|
|
||||||
hsl(151deg 61% 39%) 79%,
|
|
||||||
hsl(155deg 100% 30%) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Light
|
|
||||||
&.pi-color__mode--light {
|
|
||||||
&:not(.pi-button__appearance--ghost):not(
|
|
||||||
.pi-button__appearance--outline
|
|
||||||
):not(.pi-color__white) {
|
|
||||||
background-image: linear-gradient(
|
|
||||||
300deg,
|
|
||||||
hsl(155deg 62% 91%) 0%,
|
|
||||||
hsl(155deg 60% 88%) 21%,
|
|
||||||
hsl(155deg 59% 84%) 30%,
|
|
||||||
hsl(155deg 58% 81%) 39%,
|
|
||||||
hsl(155deg 57% 78%) 46%,
|
|
||||||
hsl(155deg 57% 75%) 54%,
|
|
||||||
hsl(155deg 56% 72%) 61%,
|
|
||||||
hsl(155deg 56% 68%) 69%,
|
|
||||||
hsl(155deg 56% 65%) 79%,
|
|
||||||
hsl(155deg 56% 61%) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Highlighted & White
|
|
||||||
&.pi-color__white {
|
|
||||||
&:not(:hover) {
|
|
||||||
color: var(--pi-color-success);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ghost
|
|
||||||
&.pi-button__appearance--ghost {
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: underline;
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: repeat;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
-moz-background-clip: text;
|
|
||||||
-moz-text-fill-color: transparent;
|
|
||||||
|
|
||||||
// Ghost & Primary
|
|
||||||
&.pi-color__primary,
|
|
||||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
|
||||||
.pi-color__white
|
|
||||||
):not(.pi-color__black):not(.pi-color__highlighted):not(
|
|
||||||
.pi-color__grey
|
|
||||||
):not(.pi-color__success) {
|
|
||||||
@include publicGhostButtonsColors;
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-primary-100),
|
|
||||||
var(--pi-color-primary-200)
|
|
||||||
),
|
|
||||||
primary-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Accent
|
|
||||||
&.pi-color__accent {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-accent),
|
|
||||||
var(--pi-color-accent-900)
|
|
||||||
),
|
|
||||||
accent
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-accent-100),
|
|
||||||
var(--pi-color-accent-100)
|
|
||||||
),
|
|
||||||
accent-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Warn
|
|
||||||
&.pi-color__warn {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-warn),
|
|
||||||
var(--pi-color-warn-900)
|
|
||||||
),
|
|
||||||
warn
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-warn-100),
|
|
||||||
var(--pi-color-warn-200)
|
|
||||||
),
|
|
||||||
warn-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & White
|
|
||||||
&.pi-color__white {
|
|
||||||
@include publicGhostButtonsColors;
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-white),
|
|
||||||
rgba($color: white, $alpha: 0.6)
|
|
||||||
),
|
|
||||||
white
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Black
|
|
||||||
&.pi-color__black {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-black),
|
|
||||||
var(--pi-color-grey-900)
|
|
||||||
),
|
|
||||||
grey
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-black),
|
|
||||||
rgba($color: #3d3d3d, $alpha: 0.6)
|
|
||||||
),
|
|
||||||
grey-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Highlighted
|
|
||||||
&.pi-color__highlighted {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-highlighted),
|
|
||||||
var(--pi-color-highlighted-900)
|
|
||||||
),
|
|
||||||
highlighted
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-highlighted-100),
|
|
||||||
var(--pi-color-highlighted-200)
|
|
||||||
),
|
|
||||||
highlighted-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Grey
|
|
||||||
&.pi-color__grey {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-grey-100),
|
|
||||||
var(--pi-color-grey-400)
|
|
||||||
),
|
|
||||||
grey-400
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-grey-25),
|
|
||||||
var(--pi-color-grey-75)
|
|
||||||
),
|
|
||||||
grey-50
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Ghost & Success
|
|
||||||
&.pi-color__success {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-success),
|
|
||||||
var(--pi-color-success-900)
|
|
||||||
),
|
|
||||||
success
|
|
||||||
);
|
|
||||||
&:disabled {
|
|
||||||
@include publicGhostButtonsColors(
|
|
||||||
linear-gradient(
|
|
||||||
30deg,
|
|
||||||
var(--pi-color-success-100),
|
|
||||||
var(--pi-color-success-200)
|
|
||||||
),
|
|
||||||
success-200
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Outline
|
|
||||||
&.pi-button__appearance--outline {
|
|
||||||
background-color: transparent;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all 0.16s ease-in;
|
|
||||||
border: 1px solid;
|
|
||||||
|
|
||||||
// Outline & Primary
|
|
||||||
&.pi-color__primary,
|
|
||||||
&:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
|
|
||||||
.pi-color__white
|
|
||||||
):not(.pi-color__highlighted) {
|
|
||||||
color: var(--pi-color-primary);
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
border-color: var(--pi-color-primary);
|
|
||||||
background-color: var(--pi-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: var(--pi-color-primary-200);
|
|
||||||
}
|
|
||||||
// Is Active
|
|
||||||
&.is-active {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
border-color: var(--pi-color-primary);
|
|
||||||
background-color: var(--pi-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Outline & Accent
|
|
||||||
&.pi-color__accent {
|
|
||||||
color: var(--pi-color-accent);
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
border-color: var(--pi-color-accent);
|
|
||||||
background-color: var(--pi-color-accent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: var(--pi-color-accent-200);
|
|
||||||
border-color: var(--pi-color-accent-200);
|
|
||||||
}
|
|
||||||
// Is Active
|
|
||||||
&.is-active {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
background-color: var(--pi-color-accent);
|
|
||||||
border-color: var(--pi-color-accent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Outline & Warn
|
|
||||||
&.pi-color__warn {
|
|
||||||
color: var(--pi-color-warn);
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
background-color: var(--pi-color-warn);
|
|
||||||
border-color: var(--pi-color-warn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: var(--pi-color-warn-200);
|
|
||||||
}
|
|
||||||
// Is Active
|
|
||||||
&.is-active {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
background-color: var(--pi-color-warn);
|
|
||||||
border-color: var(--pi-color-warn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Outline & Highlighted
|
|
||||||
&.pi-color__highlighted {
|
|
||||||
color: var(--pi-color-highlighted);
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
background-color: var(--pi-color-highlighted);
|
|
||||||
border-color: var(--pi-color-highlighted);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: var(--pi-color-highlighted-200);
|
|
||||||
}
|
|
||||||
// Is Active
|
|
||||||
&.is-active {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
background-color: var(--pi-color-highlighted);
|
|
||||||
border-color: var(--pi-color-highlighted);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Outline & White
|
|
||||||
&.pi-color__white {
|
|
||||||
color: var(--pi-color-white);
|
|
||||||
&:hover {
|
|
||||||
&:enabled {
|
|
||||||
color: var(--pi-color-primary);
|
|
||||||
background-color: var(--pi-color-white);
|
|
||||||
border-color: var(--pi-color-white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:disabled {
|
|
||||||
color: rgba($color: #ffffff, $alpha: 0.6);
|
|
||||||
}
|
|
||||||
// Is Active
|
|
||||||
&.is-active {
|
|
||||||
color: var(--pi-color-primary);
|
|
||||||
background-color: var(--pi-color-white);
|
|
||||||
border-color: var(--pi-color-white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin publicFixedButtonSideSpacing(
|
|
||||||
$top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
|
||||||
$side-spacing: var(--pi-spacing-medium),
|
|
||||||
$bottom-left-spacing: calc(
|
|
||||||
var(--pi-spacing-medium) + env(safe-area-inset-bottom)
|
|
||||||
),
|
|
||||||
$bottom-right-spacing: calc(
|
|
||||||
5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
.pi-shell {
|
|
||||||
&.pi-shell__deale-website,
|
|
||||||
&.is-public {
|
|
||||||
// Fixed
|
|
||||||
button,
|
|
||||||
.pi-icon-button,
|
|
||||||
.pi-action-button {
|
|
||||||
&.is-fixed {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
&.is-fixed--top-left,
|
|
||||||
&.is-fixed--top-right {
|
|
||||||
top: $top-spacing;
|
|
||||||
right: $side-spacing;
|
|
||||||
}
|
|
||||||
&.is-fixed--bottom-left {
|
|
||||||
bottom: $bottom-left-spacing;
|
|
||||||
left: $side-spacing;
|
|
||||||
}
|
|
||||||
&.is-fixed--bottom-right {
|
|
||||||
bottom: $bottom-right-spacing;
|
|
||||||
right: $side-spacing;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pi-shell {
|
|
||||||
&.pi-shell__deale-website,
|
|
||||||
.is-public {
|
|
||||||
button {
|
|
||||||
// Colors
|
|
||||||
@include publicButtonsColors;
|
|
||||||
// Sizes
|
|
||||||
@include publicButtonsSizes;
|
|
||||||
}
|
|
||||||
// Common
|
|
||||||
button {
|
|
||||||
&.pi-button {
|
|
||||||
// X Large
|
|
||||||
&.pi-button__x-large {
|
|
||||||
padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-xxx-large);
|
|
||||||
border-radius: 1.4rem;
|
|
||||||
// Mobile
|
|
||||||
@media screen and (max-width: 40rem) {
|
|
||||||
height: 3.125rem;
|
|
||||||
min-width: 10.6875rem;
|
|
||||||
font: {
|
|
||||||
size: var(--pi-font-size-small);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Tablet & Desktop
|
|
||||||
@media screen and (min-width: 40rem) {
|
|
||||||
height: 3.75rem;
|
|
||||||
min-width: 11.25rem;
|
|
||||||
font: {
|
|
||||||
size: var(--pi-font-size-medium);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
html,
|
|
||||||
.cdk-overlay-container {
|
|
||||||
// Mobile
|
|
||||||
&.is-mobile {
|
|
||||||
@include publicFixedButtonSideSpacing(
|
|
||||||
calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
|
|
||||||
var(--pi-spacing-medium),
|
|
||||||
calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
|
|
||||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
&.is-tablet {
|
|
||||||
&.is-tablet__small {
|
|
||||||
@include publicFixedButtonSideSpacing(
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
|
||||||
var(--pi-spacing-x-large),
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
|
||||||
calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
&.is-tablet__large {
|
|
||||||
@include publicFixedButtonSideSpacing(
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
|
||||||
var(--pi-spacing-x-large),
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
|
||||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Tablet & Desktop
|
|
||||||
&.is-desktop {
|
|
||||||
@include publicFixedButtonSideSpacing(
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
|
|
||||||
var(--pi-spacing-x-large),
|
|
||||||
calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
|
|
||||||
calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './slide-toggle/slide-toggle.component';
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
<p>slide-toggle works!</p>
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
||||||
import { PiFormControl } from '../../../util/form-control';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'pi-slide-toggle',
|
|
||||||
templateUrl: './slide-toggle.component.html',
|
|
||||||
styleUrls: ['./slide-toggle.component.scss'],
|
|
||||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
||||||
})
|
|
||||||
export class PiSlideToggleComponent extends PiFormControl {}
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { Injectable, Injector } from '@angular/core';
|
|
||||||
import { ControlContainer, ControlValueAccessor } from '@angular/forms';
|
|
||||||
|
|
||||||
@Injectable()
|
|
||||||
export class PiFormControl implements ControlValueAccessor {
|
|
||||||
value!: number | string | Array<string> | boolean;
|
|
||||||
|
|
||||||
onChange = (value: number | string | Array<string> | boolean) => {};
|
|
||||||
|
|
||||||
onTouched = () => {};
|
|
||||||
|
|
||||||
disabled = false;
|
|
||||||
focused = false;
|
|
||||||
touched = false;
|
|
||||||
|
|
||||||
constructor(protected injector: Injector) {}
|
|
||||||
|
|
||||||
get controlContainer(): any {
|
|
||||||
return this.injector.get(ControlContainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
writeValue(value: number | string | Array<string> | boolean) {
|
|
||||||
this.value = value;
|
|
||||||
}
|
|
||||||
|
|
||||||
registerOnChange(onChange: any) {
|
|
||||||
this.onChange = onChange;
|
|
||||||
}
|
|
||||||
|
|
||||||
registerOnTouched(onTouched: any) {
|
|
||||||
this.onTouched = onTouched;
|
|
||||||
}
|
|
||||||
|
|
||||||
markAsTouched() {
|
|
||||||
if (!this.touched) {
|
|
||||||
this.onTouched();
|
|
||||||
this.touched = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setDisabledState(disabled: boolean) {
|
|
||||||
this.disabled = disabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
onFocus(): void {
|
|
||||||
this.focused = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
onBlur(): void {
|
|
||||||
this.focused = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export * from './form-control';
|
|
||||||
Reference in New Issue
Block a user