refactor: 💡 extract form label styles

2020-08-05 11:57:01 -04:00
1 parent ce6fb31c96
commit bf16b8db64
@@ -1,6 +1,7 @@
+@import 'label';
+@import 'errors';
+@import 'helper-text';
@import 'input';
@import 'checkbox';
@import 'select';
@import 'radio';
-@import 'errors';
-@import 'helper-text';
@@ -4,12 +4,6 @@
 .rose-form-input {
  margin-bottom: sizing.rems(m);

-  .rose-form-input-label {
-    @include type.type(s, semibold);
-    display: block;
-    margin-bottom: sizing.rems(xxs);
-  }
-
  .rose-form-input-field {
    @include type.type(m);
    box-sizing: border-box;
@@ -0,0 +1,8 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-form-label {
+  @include type.type(s, semibold);
+  display: block;
+  margin-bottom: sizing.rems(xxs);
+}
@@ -4,12 +4,6 @@
 .rose-form-select {
  margin-bottom: sizing.rems(m);

-  .rose-form-select-label {
-    @include type.type(s, semibold);
-    display: block;
-    margin-bottom: sizing.rems(xxs);
-  }
-
  .rose-form-select-field {
    @include type.type(s);
    -webkit-appearance: none;
@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">

-  <label class="rose-form-input-label" for={{this.id}}>
+  <label class="rose-form-label" for={{this.id}}>
    {{@label}}
  </label>

@@ -1,6 +1,6 @@
 <div class="rose-form-select{{if @error " error"}}">

-  <label class="rose-form-select-label" for={{this.id}}>
+  <label class="rose-form-label" for={{this.id}}>
    {{@label}}
  </label>

@@ -1,6 +1,6 @@
 <div class="rose-form-input{{if @error " error"}}">

-  <label class="rose-form-input-label" for={{this.id}}>
+  <label class="rose-form-label" for={{this.id}}>
    {{@label}}
  </label>