Skip to content

Commit 4aa2763

Browse files
100stacks100stacks
authored
Merge pull request #589 from HelixDesignSystem/surf-1892-deprecate-form-less-mixins
refactor(mixins): copy Form-related mixins to SCSS
2 parents 7a869f9 + af20ff2 commit 4aa2763

32 files changed

+327
-336
lines changed

‎src/less/components/form/FieldName.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// ===================================== //
2+
// Mixins DEPRECATED! Use SCSS, instead! //
3+
// ===================================== //
4+
15
.FieldName() {
26
color: @gray-800;
37
font-size: 0.875rem; // ~14px

‎src/less/components/form/TextControl.less‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
// ===================================== //
2+
// Mixins DEPRECATED! Use SCSS, instead! //
3+
// ===================================== //
4+
15
@import (reference) 'mixins';
26

37
/*

‎src/less/components/form/index.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
@form-asterisk-offset: @form-asterisk-size + @form-asterisk-gap;
77

88
// ---------- MIXINS ----------
9+
// Mixins DEPRECATED! Use SCSS instead.
910
@import (reference) './FieldName';
1011
@import (reference) './TextControl';
11-
1212
.HelpText() {
1313
color: @gray-750;
1414
font-size: 0.75rem;

‎src/less/mixins.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
// INTERNALLY DEPRECATED! - Use SCSS!
2-
1+
// ========================================= //
2+
// INTERNALLY DEPRECATED! Use SCSS, instead! //
3+
// ========================================= //
34
@import './mixins/microsoft';
45
@import './mixins/mozilla';
56
@import './mixins/standard';

‎src/less/mixins/microsoft.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
// INTERNALLY DEPRECATED! - Use SCSS!
1+
// ========================================= //
2+
// INTERNALLY DEPRECATED! Use SCSS, instead! //
3+
// ========================================= //
24

35
// Mixins for microsoft browsers (-ms- prefixed CSS)
46
#MS() {

‎src/less/mixins/mozilla.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
// INTERNALLY DEPRECATED! - Use SCSS!
1+
// ========================================= //
2+
// INTERNALLY DEPRECATED! Use SCSS, instead! //
3+
// ========================================= //
24

35
// Mixins for Firefox (-moz- prefixed CSS)
46
#Moz() {

‎src/less/mixins/standard.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
// INTERNALLY DEPRECATED! - Use SCSS!
1+
// ========================================= //
2+
// INTERNALLY DEPRECATED! Use SCSS, instead! //
3+
// ========================================= //
24

35
// Mixins for browsers that are compliant with CSS specs (unprefixed CSS)
46
#Std() {

‎src/less/mixins/webkit.less‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
// INTERNALLY DEPRECATED! - Use SCSS!
1+
// ========================================= //
2+
// INTERNALLY DEPRECATED! Use SCSS, instead! //
3+
// ========================================= //
24

35
// Mixins for Webkit-based browsers (-webkit- prefixed CSS)
46
#Webkit() {

‎src/scss/_config.scss‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
/* ========== CONFIGURATION ========== *\
2-
- @import
3-
- @keyframes
4-
- LESS/CSS Variables
5-
- LESS Mixins
6-
- NO Element Selectors
7-
- NO Pseudo Selectors
8-
- NO !important
9-
\* ========== CONFIGURATION ========== */
1+
/// ========== CONFIGURATION ==========
2+
/// - @import
3+
/// - @keyframes
4+
/// - SASS/CSS Variables
5+
/// - SASS Mixins
6+
/// - NO Element Selectors
7+
/// - NO Pseudo Selectors
8+
/// - NO !important
9+
/// ===================================
1010
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic");
1111
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic");
1212
@import "vars";
1313

1414
@keyframes hx-spin {
15-
0% { transform: rotate(0deg); }
16-
100% { transform: rotate(360deg); }
15+
0% {
16+
transform: rotate(0deg);
17+
}
18+
100% {
19+
transform: rotate(360deg);
20+
}
1721
}

‎src/scss/_mixins.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/// Mixin for standard `appearance` property
2+
@mixin appearance($value) {
3+
-moz-appearance: $value;
4+
-webkit-appearance: $value;
5+
appearance: $value;
6+
}
7+
8+
/// Mixin for standard `:focus-visible` pseudo-class
9+
@mixin focus-visible {
10+
// Firefox uses non-standard selector
11+
&:-moz-focusring { @content; }
12+
// standards-compliant selector
13+
&:focus-visible { @content; }
14+
}
15+
16+
/// Mixin for standard `::placeholder` pseudo-element
17+
/// https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#Browser_compatibility
18+
/// https://css-tricks.com/snippets/css/style-placeholder-text/
19+
@mixin placeholder {
20+
// Firefox (< 51)
21+
&::-moz-placeholder { @content; }
22+
// Edge
23+
&::-ms-input-placeholder { @content; }
24+
// Chrome (< 57), Opera (< 44), Safari (< 10.1), Edge
25+
&::-webkit-input-placeholder { @content; }
26+
// standards-compliant selector
27+
&::placeholder { @content; }
28+
}
29+
30+
/// Mixin for standard `:placeholder-shown` pseudo-class
31+
/// https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown#Browser_compatibility
32+
//
33+
/// - Edge hasn't added support for ANY selector
34+
@mixin placeholder-shown {
35+
// Firefox (< 51) uses non-standard, prefixed selector
36+
&:-moz-placeholder { @content; }
37+
// IE10+ uses non-standard, prefixed selector
38+
&:-ms-input-placeholder { @content; }
39+
// standards-compliant selector
40+
&:placeholder-shown { @content; }
41+
}
42+
43+
/// -------------------- TRAITS --------------------
44+
45+
@mixin is-positionable { // replaces #Positionable.base()
46+
display: none;
47+
left: 0;
48+
position: fixed;
49+
top: 0;
50+
51+
&[open] {
52+
margin: 0;
53+
}
54+
}
55+
56+
/// -------------------- LEGACY --------------------
57+
58+
@mixin reset-focus { // replaces #Mix.resetFocus()
59+
&::-moz-focus-inner {
60+
border: 0;
61+
outline: none;
62+
}
63+
64+
&:focus {
65+
outline: none;
66+
}
67+
}

0 commit comments

Comments
 (0)