Skip to content

Commit 94a5c00

Browse files
author
Yeliazar
committed
updated Elements
1 parent 173896a commit 94a5c00

File tree

3 files changed

+69
-29
lines changed

3 files changed

+69
-29
lines changed

‎src/pages/Forms/Elements/Elements.vue

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,22 @@
66
<b-col lg='6' md='12'>
77
<Widget title="<h6> Inputs </h6>" customHeader settings refresh close>
88
<b-form-group>
9-
<b-form>
10-
<legend><strong>Horizontal</strong> form</legend>
11-
<b-form-group
12-
horizontal
13-
label="Normal field"
14-
label-for="normal-field"
15-
label-class="text-md-right"
16-
:label-cols="4"
17-
breakpoint="md"
18-
>
19-
<b-form-input type="text" id="normal-field" placeholder="May have placeholder" />
20-
</b-form-group>
9+
<b-form row>
10+
<legend><strong>Horizontal</strong> form</legend>
11+
<b-form-group
12+
horizontal
13+
label="Normal field"
14+
label-for="normal-field"
15+
label-class="text-md-right"
16+
:label-cols="4"
17+
breakpoint="md"
18+
>
19+
<b-form-input type="text" id="normal-field" placeholder="May have placeholder" />
20+
</b-form-group>
2121
<b-form-group
2222
horizontal
2323
label-for="normal-field"
24-
label-class="text-md-right"
24+
label-class="text-start"
2525
:label-cols="4"
2626
breakpoint="md"
2727
>
@@ -139,13 +139,13 @@
139139
</b-form-group>
140140
<b-form-group
141141
horizontal
142-
class="form-action bg-transparent pl-1"
142+
class="form-action bg-transparent ps-1"
143143
label=""
144144
label-for="transparent-field"
145145
:label-cols="4"
146146
breakpoint="md"
147147
>
148-
<b-button variant="primary" type="submit" class="ml-0 mr-3">Save Changes</b-button>
148+
<b-button variant="success text-white" type="submit" class="me-3">Save Changes</b-button>
149149
<b-button variant="inverse">Cancel</b-button>
150150
</b-form-group>
151151
</b-form>
@@ -280,8 +280,8 @@
280280
</b-col>
281281
</b-row>
282282
</b-form-group>
283-
<b-form-group class="form-action bg-transparent pl-1">
284-
<b-button variant="inverse" type="submit" class="mr-xs">Save Changes</b-button>
283+
<b-form-group class="form-action bg-transparent ps-1">
284+
<b-button variant="success" type="submit" class="me-1">Save Changes</b-button>
285285
<b-button variant="default">Cancel</b-button>
286286
</b-form-group>
287287
</b-form>
@@ -402,8 +402,8 @@
402402
<span class="help-block">With bottom toolbar appended</span>
403403
</div>
404404
<ckeditor :editor="wygEditor" v-model="wygContent"></ckeditor>
405-
<div class="text-md-right mt-sm">
406-
<b-button variant="danger" class="mr-2">Save</b-button>
405+
<div class="text-md-end mt-sm">
406+
<b-button variant="success" class="me-2">Save</b-button>
407407
<b-button variant="default">Clear</b-button>
408408
</div>
409409
</b-form-group>
@@ -422,7 +422,7 @@
422422
<path fill-rule="evenodd" fill="#798892" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
423423
</svg>
424424
<!-- eslint-enable -->
425-
<span class="ml-xs">Markdown styling is supported</span>
425+
<span class="ms-1">Markdown styling is supported</span>
426426
</a>
427427
</b-form-group>
428428
</b-form>
@@ -503,7 +503,7 @@
503503
Colored ones <br>
504504
<span class="help">A bit of Japanese</span>
505505
</div>
506-
<b-dropdown id="danger-select" :text="dangerDropdownVariant" variant="danger" class="mr-2">
506+
<b-dropdown id="danger-select text-white" :text="dangerDropdownVariant" variant="danger" class="me-2">
507507
<b-dropdown-item-button
508508
@click="changeSelectOption('dangerDropdownVariant', 'Ichi')"
509509
>Ichi</b-dropdown-item-button>
@@ -514,7 +514,7 @@
514514
@click="changeSelectOption('dangerDropdownVariant', 'San')"
515515
>San</b-dropdown-item-button>
516516
</b-dropdown>
517-
<b-dropdown :text="warningDropdownVariant" variant="warning" class="mr-2">
517+
<b-dropdown :text="warningDropdownVariant" variant="warning" class="me-2">
518518
<b-dropdown-item-button
519519
@click="changeSelectOption('warningDropdownVariant', 'Shi')"
520520
>Shi</b-dropdown-item-button>
@@ -795,7 +795,7 @@
795795
checkbox inputs into beautiful iOS 7 style switches in
796796
just few simple steps.
797797
</p>
798-
<b-form-group class="display-inline-block checkbox-ios mr-2">
798+
<b-form-group class="display-inline-block checkbox-ios me-2">
799799
<label for="checkbox-ios1" class="switch form-control-label">
800800
<input type="checkbox" id="checkbox-ios1"
801801
class="ios form-check-input" value="off">
@@ -873,7 +873,7 @@
873873
Phone
874874
<span class="help-block">(123) 456-7890</span>
875875
</div>
876-
<b-col md="9" class="pl-0">
876+
<b-col md="9" class="ps-0">
877877
<input class="form-control" id="phone-mask" type="text"
878878
placeholder="(___) ___-____"
879879
v-mask="'(###) ###-####'"
@@ -885,7 +885,7 @@
885885
International Phone
886886
<span class="help-block">+375 123 456 789</span>
887887
</div>
888-
<b-col md="9" class="pl-0">
888+
<b-col md="9" class="ps-0">
889889
<input class="form-control" id="int-phone-mask" type="text"
890890
placeholder="+___ ___ ___ ___"
891891
v-mask="'+### ### ### ###'"
@@ -897,7 +897,7 @@
897897
Date Format
898898
<span class="help-block">07-03-2013</span>
899899
</div>
900-
<b-col md="9" class="pl-0">
900+
<b-col md="9" class="ps-0">
901901
<input class="form-control" id="date-mask" type="text"
902902
placeholder="__-__-____"
903903
v-mask="'##-##-####'"
@@ -909,7 +909,7 @@
909909
Time
910910
<span class="help-block">13:43</span>
911911
</div>
912-
<b-col md="9" class="pl-0">
912+
<b-col md="9" class="ps-0">
913913
<input class="form-control" id="time-mask" type="text"
914914
placeholder="__:__"
915915
v-mask="'##:##'"
@@ -1123,7 +1123,7 @@
11231123
</div>
11241124
</div>
11251125
<div>
1126-
<b-button type="button" variant="default" class="mt-sm">
1126+
<b-button type="button" variant="inverse" class="mt-sm">
11271127
<label for="fileupload2">
11281128
Select image
11291129
</label>

‎src/styles/_overrides.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1035,3 +1035,43 @@ $slider-handle-size: 26px;
10351035
border-radius: 0.3rem;
10361036
}
10371037
}
1038+
1039+
.form-row {
1040+
display: flex;
1041+
flex-wrap: wrap;
1042+
margin-right: -5px;
1043+
margin-left: -5px;
1044+
}
1045+
1046+
.form-group {
1047+
margin-bottom: 1rem;
1048+
}
1049+
1050+
.input-group {
1051+
1052+
.input-group-prepend {
1053+
margin-right: -1px;
1054+
display: flex;
1055+
1056+
.input-group-text {
1057+
border-top-right-radius: 0;
1058+
border-bottom-right-radius: 0;
1059+
}
1060+
}
1061+
1062+
.input-group-append {
1063+
.btn,
1064+
.input-group-text {
1065+
border-top-left-radius: 0;
1066+
border-bottom-left-radius: 0;
1067+
}
1068+
}
1069+
1070+
.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle),
1071+
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
1072+
border-top-right-radius: 0;
1073+
border-bottom-right-radius: 0;
1074+
}
1075+
}
1076+
1077+

‎src/styles/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $font-size-larger: 1.1rem;
2020
$font-size-mini: 0.9rem;
2121
$font-size-index: 0.7rem;
2222

23-
$font-family-base: 'Montserrat', sans-serif;
23+
$font-family-base: 'Poppins', sans-serif;
2424

2525
// Color system
2626
//

0 commit comments

Comments
 (0)