dibk-design 0.4.41 → 0.4.44

package/dist/components/RadioButtonInput.module.scss

@@ -1,26 +1,26 @@
-@import "../style/global.scss";
-
-:local(.radioButtonInput) {
-  display: flex;
-  cursor: pointer;
-  margin-right: 1em;
-
-  &:not(:local(.contentOnly)):not(:local(.disabled)) {
-    cursor: pointer;
-    input {
-      cursor: pointer;
-    }
-  }
-
-
-  &:local(.hasErrors) {
-    span {
-      color: #9d2024;
-    }
-  }
-
-  input[type="radio"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.radioButtonInput) {
+  display: flex;
+  cursor: pointer;
+  margin-right: 1em;
+
+  &:not(:local(.contentOnly)):not(:local(.disabled)) {
+    cursor: pointer;
+    input {
+      cursor: pointer;
+    }
+  }
+
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
+  input[type="radio"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/RadioButtonListItem.md

@@ -1,70 +1,70 @@
-Radio button list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-1" checked={true}>
-  Checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-2">
-  Unchecked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-3" checked={true} disabled={true}>
-  Disabled checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-4" disabled={true}>
-  Disabled Unchecked radio button
-</RadioButtonListItem>
-```
-
-Radio button with errors list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-1" checked={true} hasErrors={true}>
-  Checked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-2" hasErrors={true}>
-  Unchecked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-3" checked={true} disabled={true} hasErrors={true}>
-  Disabled checked radio button with errors
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-4" disabled={true} hasErrors={true}>
-  Disabled Unchecked radio button with errors
-</RadioButtonListItem>
-```
-
-Compact radio button list item example:
-
-```js
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-1" checked={true} compact>
-  Checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-2" compact>
-  Unchecked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-3" checked={true} compact disabled={true}>
-  Disabled checked radio button
-</RadioButtonListItem>
-<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-4" compact disabled={true}>
-  Disabled unchecked radio button
-</RadioButtonListItem>
-```
-
-Themed Radio button list item example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-1" checked={true} theme={customTheme}>
-    Checked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-2" theme={customTheme}>
-    Unchecked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-3" checked={true} theme={customTheme} disabled={true}>
-    Disabled checked radio button
-  </RadioButtonListItem>
-  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-4" theme={customTheme} disabled={true}>
-    Disabled unchecked radio button
-  </RadioButtonListItem>
-</React.Fragment>
-```
+Radio button list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-1" checked={true}>
+  Checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-2">
+  Unchecked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item" id="radio-button-list-item-3" checked={true} disabled={true}>
+  Disabled checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item" id="radio-button-list-item-4" disabled={true}>
+  Disabled Unchecked radio button
+</RadioButtonListItem>
+```
+
+Radio button with errors list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-1" checked={true} hasErrors={true}>
+  Checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-2" hasErrors={true}>
+  Unchecked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-3" checked={true} disabled={true} hasErrors={true}>
+  Disabled checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-4" disabled={true} hasErrors={true}>
+  Disabled Unchecked radio button with errors
+</RadioButtonListItem>
+```
+
+Compact radio button list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-1" checked={true} compact>
+  Checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-2" compact>
+  Unchecked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="compact-radio-button-list-item" id="compact-radio-button-list-item-3" checked={true} compact disabled={true}>
+  Disabled checked radio button
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="compact-radio-button-list-item" id="compact-radio-button-list-item-4" compact disabled={true}>
+  Disabled unchecked radio button
+</RadioButtonListItem>
+```
+
+Themed Radio button list item example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-1" checked={true} theme={customTheme}>
+    Checked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-2" theme={customTheme}>
+    Unchecked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="themed-radio-button-list-item-" id="themed-radio-button-list-item-3" checked={true} theme={customTheme} disabled={true}>
+    Disabled checked radio button
+  </RadioButtonListItem>
+  <RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="themed-radio-button-list-item" id="themed-radio-button-list-item-4" theme={customTheme} disabled={true}>
+    Disabled unchecked radio button
+  </RadioButtonListItem>
+</React.Fragment>
+```

package/dist/components/RadioButtonListItem.module.scss

@@ -1,71 +1,71 @@
-@import "../style/global.scss";
-
-:local(.radioButtonListItem) {
-  @include box-sizing(content-box);
-  @include border-radius(5px);
-  @include transition(all 0.1s ease-in-out);
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  cursor: pointer;
-  font-family: $default-font;
-  position: relative;
-  font-size: 17px;
-  color: #000;
-
-  &:not(:local(.contentOnly)):not(:local(.compact)) {
-    @include box-shadow(0 0 2px $color-dark-blue);
-    background: white;
-    margin-bottom: 10px;
-  }
-
-  &:local(.contentOnly) {
-    cursor: auto;
-    label {
-      cursor: auto;
-      padding: 5px 10px;
-    }
-  }
-
-  &:local(.disabled) {
-    label {
-      cursor: auto;
-    }
-  }
-
-  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
-    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
-  }
-
-  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
-    @include box-shadow(0 0 6px $color-dark-blue);
-  }
-
-  &:focus {
-    outline-color: #54acb8;
-  }
-
-  label {
-    width: 100%;
-    padding: 10px;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  &:local(.compact) {
-    display: table;
-    label {
-      padding: 6px 4px;
-    }
-  }
-
-  input[type="radio"] {
-    opacity: 0;
-    position: absolute;
-  }
-}
+@import "../style/global.scss";
+
+:local(.radioButtonListItem) {
+  @include box-sizing(content-box);
+  @include border-radius(5px);
+  @include transition(all 0.1s ease-in-out);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: flex-start;
+  -webkit-box-align: flex-start;
+  -ms-flex-align: flex-start;
+  align-items: flex-start;
+  cursor: pointer;
+  font-family: $default-font;
+  position: relative;
+  font-size: 17px;
+  color: #000;
+
+  &:not(:local(.contentOnly)):not(:local(.compact)) {
+    @include box-shadow(0 0 2px $color-dark-blue);
+    background: white;
+    margin-bottom: 10px;
+  }
+
+  &:local(.contentOnly) {
+    cursor: auto;
+    label {
+      cursor: auto;
+      padding: 5px 10px;
+    }
+  }
+
+  &:local(.disabled) {
+    label {
+      cursor: auto;
+    }
+  }
+
+  &:local(.checked):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)) {
+    @include box-shadow(0 0 0 1px $color-dark-blue, 0 0 4px 0 $color-dark-blue);
+  }
+
+  &:not(:local(.checked)):not(:local(.contentOnly)):not(:local(.compact)):not(:local(.disabled)):hover {
+    @include box-shadow(0 0 6px $color-dark-blue);
+  }
+
+  &:focus {
+    outline-color: #54acb8;
+  }
+
+  label {
+    width: 100%;
+    padding: 10px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  &:local(.compact) {
+    display: table;
+    label {
+      padding: 6px 4px;
+    }
+  }
+
+  input[type="radio"] {
+    opacity: 0;
+    position: absolute;
+  }
+}

package/dist/components/Select.md

@@ -1,28 +1,28 @@
-Select example:
-
-```js
-<Select id="select1" onChange={()=>{console.log('onchange')}} options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with label" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label and defaultValue" defaultValue="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select5" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" />
-<Select id="select6" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label and placeholder" placeholder="Select from list" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label, placeholder and placeholderValue" placeholder="Select from list" placeholderValue="notSelected" value="notSelected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value and contentOnly set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} />
-<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, contentOnly set to true and keyAsContent set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
-<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, selected value is string, contentOnly set to true and keyAsContent set to true" value="option 2" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
-<Select id="select12" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true, no value and defaultContent" contentOnly={true} defaultContent="No value selected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with custom width" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} width="250px" />
-```
-
-Themed select example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-    <Select id="themedSelect3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
-    <Select id="themedSelect4" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" theme={customTheme} />
-    <Select id="themedSelect5" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
-</React.Fragment>
-```
+Select example:
+
+```js
+<Select id="select1" onChange={()=>{console.log('onchange')}} options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with label" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label and defaultValue" defaultValue="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select5" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" />
+<Select id="select6" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label and placeholder" placeholder="Select from list" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label, placeholder and placeholderValue" placeholder="Select from list" placeholderValue="notSelected" value="notSelected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value and contentOnly set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} />
+<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, contentOnly set to true and keyAsContent set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
+<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, selected value is string, contentOnly set to true and keyAsContent set to true" value="option 2" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
+<Select id="select12" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true, no value and defaultContent" contentOnly={true} defaultContent="No value selected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with custom width" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} width="250px" />
+```
+
+Themed select example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <Select id="themedSelect3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
+    <Select id="themedSelect4" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" theme={customTheme} />
+    <Select id="themedSelect5" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/Select.module.scss

@@ -1,101 +1,100 @@
-@import "../style/global.scss";
-
-:local(.select) {
-	:local(.selectContainer) {
-		position: relative;
-
-		:local(.selectListArrow_old) {
-			position: absolute;
-			display: block;
-			content: "";
-			top: 14px;
-			right: 14px;
-			height: 0;
-			width: 0;
-			border-left: 6px solid transparent;
-			border-right: 6px solid transparent;
-			border-top: 12px solid $color-primary;
-			pointer-events: none;
-		}
-
-		:local(.selectListArrow) {
-			box-sizing: border-box;
-			position: absolute;
-			top: 20px;
-			right: 20px;
-			display: block;
-			width: 12px;
-			height: 12px;
-			border-radius: 100px;
-
-			&::after {
-				content: "";
-				display: block;
-				box-sizing: border-box;
-				position: absolute;
-				width: 12px;
-				height: 12px;
-				border-bottom: 2px solid;
-				border-right: 2px solid;
-				transform: translateY(-30%) rotate(45deg);
-				transition: transform 0.3s ease-in-out;
-			}
-		}
-
-		select {
-			@include border-radius(0);
-			@include transition(border-color 0.15s linear);
-			@include appearance(none);
-			@include box-shadow(none);
-			height: 56px;
-			color: rgba(0, 0, 0, 0.75);
-			width: 100%;
-			font-family: inherit;
-			font-size: 19px;
-			padding: 10px 40px 10px 10px;
-			border: 1px solid #afaba8;
-			border-radius: 0;
-			line-height: normal;
-			background: white;
-			cursor: pointer;
-
-			&:hover {
-				border-color: $color-dark-blue;
-			}
-
-			&:focus {
-				border-color: $color-dark-blue;
-				outline-color: #54acb8;
-			}
-
-			&[disabled],
-			&[readonly] {
-				background-color: #ddd;
-				cursor: default;
-			}
-
-			&:local(.hasErrors) {
-				border-color: $color-error;
-				&:focus {
-					border-color: $color-error;
-					outline-color: #b8565d;
-				}
-				&[disabled],
-				&[readonly] {
-					background-color: #ddd;
-					cursor: default;
-					border-color: #afaba8;
-				}
-			}
-		}
-	}
-	:local(.errorMessage) {
-		color: $color-error-text;
-		font-size: 19px;
-		font-weight: 400;
-		line-height: 1.6;
-		font-family: "Open Sans", sans-serif;
-		font-style: italic;
-		overflow-wrap: break-word;
-	}
-}
+@import "../style/global.scss";
+
+:local(.select) {
+	:local(.selectContainer) {
+		position: relative;
+
+		:local(.selectListArrow) {
+			box-sizing: border-box;
+			position: absolute;
+			top: 15px;
+			right: 15px;
+			display: block;
+			width: 12px;
+			height: 12px;
+			border-radius: 100px;
+			@media only screen and (min-width: $screen-sm) {
+				top: 20px;
+				right: 20px;
+			}
+
+			&::after {
+				content: "";
+				display: block;
+				box-sizing: border-box;
+				position: absolute;
+				width: 12px;
+				height: 12px;
+				border-bottom: 2px solid;
+				border-right: 2px solid;
+				transform: translateY(-30%) rotate(45deg);
+				transition: transform 0.3s ease-in-out;
+			}
+		}
+
+		select {
+			@include border-radius(0);
+			@include transition(border-color 0.15s linear);
+			@include appearance(none);
+			@include box-shadow(none);
+			height: 47px;
+			color: rgba(0, 0, 0, 0.75);
+			width: 100%;
+			font-family: inherit;
+			font-size: 16px;
+			padding: 10px 40px 10px 10px;
+			border: 1px solid #afaba8;
+			border-radius: 0;
+			line-height: normal;
+			background: white;
+			cursor: pointer;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 19px;
+				height: 56px;
+			}
+
+			&:hover {
+				border-color: $color-dark-blue;
+			}
+
+			&:focus {
+				border-color: $color-dark-blue;
+				outline-color: #54acb8;
+			}
+
+			&[disabled],
+			&[readonly] {
+				background-color: #ddd;
+				cursor: default;
+			}
+
+			&:local(.hasErrors) {
+				border-color: $color-error;
+				&:focus {
+					border-color: $color-error;
+					outline-color: #b8565d;
+				}
+				&[disabled],
+				&[readonly] {
+					background-color: #ddd;
+					cursor: default;
+					border-color: #afaba8;
+				}
+			}
+		}
+	}
+	:local(.errorMessage) {
+		display: block;
+		color: $color-error-text;
+		font-size: 16px;
+		font-weight: 400;
+		line-height: 1.2;
+		margin: 4px 0;
+		font-family: "Open Sans", sans-serif;
+		font-style: italic;
+		overflow-wrap: break-word;
+		@media only screen and (min-width: $screen-sm) {
+			font-size: 19px;
+		}
+	}
+}