#36 little style to select

Author: Arenukvern

src/GraphicCore/StatefullWidget/SettingsModal.vue

@@ -54,7 +54,7 @@
 				</div>
 				<div class="form__field">
 					{{ $t('settings.chooseLanguage') }}
-					<select v-model="$i18n.locale">
+					<select class="select" v-model="$i18n.locale">
 						<option
 							v-for="(lang, i) in langs"
 							:key="`Lang${i}`"

src/GraphicCore/framework/Stateless/_index.scss

@@ -2,4 +2,5 @@
 @forward 'buttons';
 @forward 'checkbox';
 @forward 'alert';
-@forward 'textarea';
+@forward 'textarea';
+@forward 'select';

src/GraphicCore/framework/Stateless/_select.scss

@@ -0,0 +1,41 @@
+@use '../Library/colours';
+@use '../Library/fonts';
+.select{
+    transition: 0.1s;
+    @include colours.corner-radius;
+    @include fonts.font('primary');
+    width: 5rem;
+    text-rendering: auto;
+    color: inherit;
+    background-color: inherit;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-indent: 3px;
+    text-shadow: none;
+    padding: 7px;
+    display: inline-block;
+    text-align: start;
+    box-sizing: border-box;
+    align-items: center;
+    white-space: pre;
+    cursor: pointer;
+    margin-left: 1em;
+    border-width: 1px;
+    border-style: solid;
+    border-color: rgb(169, 169, 169);
+    &:hover, &:focus{
+        color: inherit;
+        background-color: inherit;    
+        @include colours.corner-radius;
+        outline: none;
+        border-color: rgb(169, 169, 169);
+    }
+    & > option {
+        color: colours.theme-color('primary','base');
+        background-color: colours.theme-color('background','base');
+        &:focus{
+            outline: none;
+        }
+    }
+}