Skip to content

Commit dc017fb

Browse files
DottenpixelDottenpixel
authored
chore(kinetics): Organize kinetics styles into their own files (#4586)
* organize kinetics css into their own files * add kinetics import to ui/index.scss * update import paths to fix site build
1 parent eabde30 commit dc017fb

File tree

6 files changed

+310
-301
lines changed

6 files changed

+310
-301
lines changed

‎ui/components/_kinetics.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
2+
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
3+
4+
@import
5+
6+
// Breadcrumbs
7+
'breadcrumbs/kinetics/index',
8+
9+
// Button
10+
'buttons/kinetics/index';

‎ui/components/breadcrumbs/base/_index.scss

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -55,51 +55,3 @@
5555
margin-right: var(--sds-c-breadcrumbs-spacing-inline-end, $spacing-x-small);
5656
}
5757
}
58-
59-
// Styles specific to Kinetic Breadcrumbs
60-
[kx-scope='breadcrumbs-item'][kx-type='underline'] {
61-
62-
> a {
63-
position: relative;
64-
will-change: color, transform;
65-
transition: transform $kx-duration-normal $kx-ease-out;
66-
margin-right: var(--sds-c-breadcrumbs-spacing-inline-end, $spacing-x-small);
67-
margin-left: var(--sds-c-breadcrumbs-spacing-inline-start, $spacing-x-small);
68-
padding-right: 0;
69-
padding-left: 0;
70-
71-
&:active {
72-
transform: scale(0.95);
73-
74-
@media (prefers-reduced-motion: reduce) {
75-
transform: none;
76-
}
77-
}
78-
}
79-
80-
> a:after {
81-
will-change: transform-origin, transform;
82-
content: '';
83-
position: absolute;
84-
top: 80%; // CAUTION: magic number, refactor to calc() if line-height and padding props get added to breadcrumbs
85-
left: 0%;
86-
height: rem(1px);
87-
width: 100%;
88-
background: $color-brand-dark;
89-
background-position: left top;
90-
transform: scaleX(0);
91-
transform-origin: var(--slds-kx-breadcrumbs-pointer-position-x, 50%) 0;
92-
transition: transform $kx-duration-normal $kx-ease-out;
93-
}
94-
95-
> a:hover:after {
96-
transform: scaleX(1);
97-
}
98-
99-
&:first-child {
100-
101-
> a {
102-
margin-left: 0;
103-
}
104-
}
105-
}

‎ui/components/breadcrumbs/kinetics/_index.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
// Styles specific to Kinetic Breadcrumbs
2+
[kx-scope='breadcrumbs-item'][kx-type='underline'] {
3+
4+
> a {
5+
position: relative;
6+
will-change: color, transform;
7+
transition: transform $kx-duration-normal $kx-ease-out;
8+
margin-right: var(--sds-c-breadcrumbs-spacing-inline-end, $spacing-x-small);
9+
margin-left: var(--sds-c-breadcrumbs-spacing-inline-start, $spacing-x-small);
10+
padding-right: 0;
11+
padding-left: 0;
12+
13+
&:active {
14+
transform: scale(0.95);
15+
16+
@media (prefers-reduced-motion: reduce) {
17+
transform: none;
18+
}
19+
}
20+
}
21+
22+
> a:after {
23+
will-change: transform-origin, transform;
24+
content: '';
25+
position: absolute;
26+
top: 80%; // CAUTION: magic number, refactor to calc() if line-height and padding props get added to breadcrumbs
27+
left: 0%;
28+
height: rem(1px);
29+
width: 100%;
30+
background: $color-brand-dark;
31+
background-position: left top;
32+
transform: scaleX(0);
33+
transform-origin: var(--slds-kx-breadcrumbs-pointer-position-x, 50%) 0;
34+
transition: transform $kx-duration-normal $kx-ease-out;
35+
}
36+
37+
> a:hover:after {
38+
transform: scaleX(1);
39+
}
40+
41+
&:first-child {
42+
43+
> a {
44+
margin-left: 0;
45+
}
46+
}
47+
}

‎ui/components/buttons/base/_index.scss

Lines changed: 0 additions & 253 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,6 @@
44
@import "deprecate";
55
@import "../mixins/index";
66

7-
// Kinetics vars
8-
$kx-button-ripple-size: 20px;
9-
$kx-button-pointer-position: 50%;
10-
$kx-button-gradient-size: 140px;
11-
127
/**
138
* @summary This neutralizes all the base styles making it look like a text link
149
* @name base
@@ -104,59 +99,6 @@ $kx-button-gradient-size: 140px;
10499
}
105100
}
106101

107-
// Kinetic styles for Base Button
108-
[kx-scope="button"][kx-type="underline"] {
109-
will-change: color, transform;
110-
transition: $kx-duration-normal $kx-ease-out;
111-
transition-property: transform, color;
112-
113-
&:active {
114-
transform: scale(0.95);
115-
116-
@media (prefers-reduced-motion: reduce) {
117-
transform: none;
118-
}
119-
}
120-
121-
&:after {
122-
will-change: transform-origin, transform;
123-
content: "";
124-
position: absolute;
125-
// zero united value needed for calc to use the value in calculation
126-
top: calc(var(--sds-c-button-spacing-block-start, 0rem) + var(--sds-c-button-line-height, #{$line-height-button}) * 0.8); // stylelint-disable length-zero-no-unit
127-
height: rem(1px);
128-
width: 100%;
129-
background: var(--sds-c-button-text-color-hover, $brand-accessible-active);
130-
background-position: left top;
131-
transform: scaleX(0);
132-
transform-origin: var(--slds-kx-button-pointer-position-x, #{$kx-button-pointer-position}) 0;
133-
transition: transform $kx-duration-normal $kx-ease-out;
134-
135-
@media (prefers-reduced-motion: reduce) {
136-
transition: none;
137-
}
138-
}
139-
140-
&:hover:after,
141-
&:focus:after {
142-
transform: scaleX(1);
143-
}
144-
145-
&[disabled],
146-
&:disabled {
147-
cursor: default;
148-
149-
&:after {
150-
display: none;
151-
}
152-
153-
&,
154-
* {
155-
pointer-events: none;
156-
}
157-
}
158-
}
159-
160102
// Polyfill for slds-button on links
161103
a.slds-button {
162104
text-align: center;
@@ -277,148 +219,6 @@ a.slds-button--inverse:focus {
277219
}
278220
}
279221

280-
// Kinetic styles for "bordered" buttons
281-
[kx-scope="button-brand"],
282-
[kx-scope="button-neutral"],
283-
[kx-scope="button-outline"],
284-
[kx-scope="button-filled"] {
285-
position: relative;
286-
overflow: hidden;
287-
288-
transition: transform $kx-duration-short $kx-ease-in-out;
289-
290-
&:hover,
291-
&:active {
292-
transition: transform $kx-duration-short $kx-ease-in-out;
293-
}
294-
295-
@media (hover: none) {
296-
297-
&:active {
298-
transform: scale(0.97);
299-
300-
@media (prefers-reduced-motion: reduce) {
301-
transform: none;
302-
}
303-
}
304-
}
305-
306-
@media (hover: hover) and (pointer: fine) {
307-
308-
&:hover {
309-
transform: scale(1);
310-
311-
@media (prefers-reduced-motion: reduce) {
312-
transform: none;
313-
}
314-
}
315-
316-
&:active {
317-
transform: scale(0.97);
318-
}
319-
}
320-
}
321-
322-
// Kinetic styles for Brand Button
323-
[kx-scope="button-brand"] {
324-
// These purposefully override the interaction states to facilitate the Kinetics effect
325-
// kinetics overrides the darker $brand-accessible-active color with $brand-accessible
326-
// and the $brand-accessible-active color is then used in the hover gradient.
327-
&:focus,
328-
&:hover,
329-
&:active {
330-
background-color: var(--sds-c-button-brand-color-background, $brand-accessible);
331-
border-color: transparent;
332-
}
333-
334-
// Kinetics Button Brand hover gradient
335-
&:hover:before {
336-
content: "";
337-
position: absolute;
338-
left: var(--slds-kx-button-pointer-position-x, #{$kx-button-pointer-position});
339-
top: var(--slds-kx-button-pointer-position-y, #{$kx-button-pointer-position});
340-
width: var(--slds-kx-button-gradient-size, #{$kx-button-gradient-size});
341-
height: var(--slds-kx-button-gradient-size, #{$kx-button-gradient-size});
342-
opacity: 0.75;
343-
z-index: -1;
344-
background: radial-gradient(circle closest-side, var(--slds-kx-button-gradient-color, $brand-accessible-active), transparent);
345-
transform: translate(-50%, -50%);
346-
}
347-
348-
&[disabled]:before,
349-
&:disabled:before {
350-
display: none;
351-
}
352-
}
353-
354-
// Ripple
355-
[kx-scope^="button-"][kx-type="ripple"] {
356-
357-
&:focus {
358-
transition: transform $kx-duration-short $kx-ease-in-out,
359-
box-shadow $kx-duration-short $kx-ease-none $kx-duration-short,
360-
border-color $kx-duration-short $kx-ease-none $kx-duration-short;
361-
362-
@media (prefers-reduced-motion: reduce) {
363-
transition: none;
364-
}
365-
}
366-
367-
&:after {
368-
content: "";
369-
position: absolute;
370-
width: var(--slds-kx-button-ripple-size, #{$kx-button-ripple-size});
371-
height: var(--slds-kx-button-ripple-size, #{$kx-button-ripple-size});
372-
left: calc(
373-
var(--slds-kx-button-pointer-position-x, #{$kx-button-pointer-position}) - var(--slds-kx-button-ripple-size, #{$kx-button-ripple-size}) / 2
374-
);
375-
top: calc(
376-
var(--slds-kx-button-pointer-position-y, #{$kx-button-pointer-position}) - var(--slds-kx-button-ripple-size, #{$kx-button-ripple-size}) / 2
377-
);
378-
border-radius: $border-radius-circle;
379-
opacity: 0;
380-
}
381-
382-
&.slds-kx-is-animating-from-click {
383-
384-
&:after {
385-
animation: slds-kx-button_ripple $kx-duration-normal $kx-ease-ripple;
386-
387-
@media (prefers-reduced-motion: reduce) {
388-
animation: none;
389-
}
390-
}
391-
}
392-
393-
&[disabled],
394-
&:disabled {
395-
396-
&:after {
397-
display: none;
398-
}
399-
}
400-
}
401-
402-
// Kinetic styles for Brand and filled backgrounds
403-
[kx-scope="button-brand"],
404-
[kx-scope="button-filled"] {
405-
406-
&[kx-type="ripple"] {
407-
408-
&:after {
409-
background-color: $color-background-light;
410-
}
411-
}
412-
413-
&[disabled],
414-
&:disabled {
415-
// @todo: global shared disabled button hooks
416-
background-color: $brand-disabled;
417-
border-color: $brand-disabled;
418-
color: $color-text-button-brand-disabled;
419-
}
420-
}
421-
422222
/**
423223
* @name outline-brand
424224
* @summary Creates the outlined button with the brand color
@@ -457,46 +257,6 @@ a.slds-button--inverse:focus {
457257
}
458258
}
459259

460-
// Kinetic styles for Neutral/Outline and light backgrounds
461-
[kx-scope="button-neutral"] {
462-
463-
&:focus,
464-
&:hover,
465-
&:active {
466-
// These purposefully overrides the interaction states to facilitate the Kinetics effect
467-
background-color: var(--sds-c-button-neutral-color-background-hover, $button-color-background-primary);
468-
border-color: var(--sds-c-button-brand-color-border-hover, $brand-accessible);
469-
}
470-
}
471-
472-
[kx-scope="button-outline"] {
473-
474-
&:focus,
475-
&:hover,
476-
&:active {
477-
// This purposefully overrides the interaction states to facilitate the Kinetics effect
478-
background-color: var(--sds-c-button-outline-brand-color-background, $button-color-background-primary);
479-
}
480-
}
481-
482-
[kx-scope="button-neutral"],
483-
[kx-scope="button-outline"] {
484-
485-
&[kx-type="ripple"] {
486-
487-
&:after {
488-
background-color: var(--sds-c-button-brand-color-background, $brand-accessible);
489-
}
490-
}
491-
492-
&[disabled],
493-
&:disabled {
494-
// @todo: global shared disabled button hooks
495-
background-color: $color-background-button-default-disabled;
496-
border-color: $button-color-border-primary;
497-
}
498-
}
499-
500260
/**
501261
* @name inverse
502262
* @summary Creates the inverse style for dark backgrounds
@@ -803,16 +563,3 @@ a.slds-button--inverse:focus {
803563
justify-content: center;
804564
width: 100%;
805565
}
806-
807-
@keyframes slds-kx-button_ripple {
808-
809-
0% {
810-
opacity: 0.35;
811-
transform: scale(1);
812-
}
813-
814-
100% {
815-
opacity: 0;
816-
transform: scale(7);
817-
}
818-
}

0 commit comments

Comments
 (0)