CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 💡 make input and select field styles independent

Browse Source
This commit is contained in:
Randall Morey committed 2020-08-05 12:27:34 -04:00
1 parent bf16b8db64
commit 547f218145
3 files changed
+83 -75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/addon/styles/rose/_typography.scss
+5
View File
@@ -16,6 +16,11 @@ body {
background-color: var(--subtle);
}
input,
textarea {
font-family: typography.$family-primary;
}
pre,
code {
font-family: typography.$family-monospace;
addons/rose/addon/styles/rose/components/form/_input.scss
+36 -35
View File
@@ -4,40 +4,6 @@
.rose-form-input {
margin-bottom: sizing.rems(m);
.rose-form-input-field {
@include type.type(m);
box-sizing: border-box;
margin-bottom: sizing.rems(xs);
padding: sizing.rems(xs);
color: var(--stark);
background-color: var(--subtle);
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
border-radius: sizing.rems(xxxs);
box-shadow: inset 0px 3px 1px
rgba(var(--stark-components), var(--opacity-4));
&:not(:disabled):not([readonly]) {
&:hover {
border-color: var(--ui-gray);
}
&:focus {
border-color: var(--info);
}
}
&:disabled {
cursor: not-allowed;
color: var(--ui-gray);
background-color: var(--ui-gray-subtler-6);
}
&[readonly] {
border-color: transparent;
box-shadow: none;
}
}
&.error {
color: var(--failure);
@@ -46,8 +12,43 @@
}
.rose-form-input-field {
color: var(--failure);
color: currentColor;
border-color: currentColor;
}
}
}
.rose-form-input-field {
@include type.type(m);
display: inline-block;
box-sizing: border-box;
margin-bottom: sizing.rems(xs);
padding: sizing.rems(xs);
color: var(--stark);
background-color: var(--subtle);
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
border-radius: sizing.rems(xxxs);
box-shadow: inset 0px 3px 1px
rgba(var(--stark-components), var(--opacity-4));
&:not(:disabled):not([readonly]) {
&:hover {
border-color: var(--ui-gray);
}
&:focus {
border-color: var(--info);
}
}
&:disabled {
cursor: not-allowed;
color: var(--ui-gray);
background-color: var(--ui-gray-subtler-6);
}
&[readonly] {
border-color: transparent;
box-shadow: none;
}
}
addons/rose/addon/styles/rose/components/form/_select.scss
+42 -40
View File
@@ -4,45 +4,6 @@
.rose-form-select {
margin-bottom: sizing.rems(m);
.rose-form-select-field {
@include type.type(s);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
display: inline-block;
margin-bottom: sizing.rems(xs);
padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
border-radius: sizing.rems(xxxs);
box-shadow: 0 $size-xxs $size-xxs
rgba(var(--stark-components), var(--opacity-2));
background: var(--ui-gray-subtler-5)
url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%23525761%22%2F%3E%3C%2Fsvg%3E')
no-repeat right sizing.rems(xs) center;
background-size: sizing.rems(l);
&:not(:disabled) {
&:hover {
border-color: var(--ui-gray-subtler-1);
background-color: transparent;
box-shadow: none;
}
&:focus {
border-color: var(--info);
background-color: var(--ui-gray-subtler-5);
box-shadow: none;
}
}
&:disabled {
cursor: not-allowed;
color: var(--ui-gray-subtler-1);
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E');
}
}
&.error {
color: var(--failure);
@@ -51,7 +12,48 @@
}
.rose-form-select-field {
border-color: var(--failure);
color: currentColor;
border-color: currentColor;
}
}
}
.rose-form-select-field {
@include type.type(m);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
margin-bottom: sizing.rems(xs);
padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
border-radius: sizing.rems(xxxs);
box-shadow: 0 $size-xxs $size-xxs
rgba(var(--stark-components), var(--opacity-2));
background: var(--ui-gray-subtler-5)
url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%23525761%22%2F%3E%3C%2Fsvg%3E')
no-repeat right sizing.rems(xs) center;
background-size: sizing.rems(l);
&:not(:disabled) {
&:hover {
border-color: var(--ui-gray-subtler-1);
background-color: transparent;
box-shadow: none;
}
&:focus {
border-color: var(--info);
background-color: var(--ui-gray-subtler-5);
box-shadow: none;
}
}
&:disabled {
cursor: not-allowed;
color: var(--ui-gray-subtler-1);
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E');
}
}