add proper style for primary button

This commit is contained in:
Kacper Donat 2020-10-19 23:11:37 +02:00
parent 2a96c5a863
commit 4647bb2cc1
6 changed files with 31 additions and 10 deletions

View File

@ -5,9 +5,6 @@
<input class="form-control form-control-sm" placeholder="np. Z pracy"
:class="{ 'is-invalid': errors.name.length > 0 }" id="favourite_add_name"
v-model="name" v-autofocus/>
<button class="btn btn-sm btn-dark" type="submit">
<ui-icon icon="add" />
</button>
<div v-if="errors.name.length > 0" class="invalid-feedback">
<p v-for="error in errors.name">{{ error }}</p>
</div>
@ -18,4 +15,10 @@
<stop :stop="stop"/>
</li>
</ul>
<div class="favourite-add-form__actions">
<button class="btn btn-sm btn-primary" type="submit">
<ui-icon icon="add" />
zapisz
</button>
</div>
</form>

View File

@ -1,9 +1,9 @@
<div class="ui-backdrop" @click="handleBackdropClick" v-if="currentBehaviour === 'modal'">
<div class="ui-backdrop" @click="handleBackdropClick" v-if="currentBehaviour === 'modal'" role="dialog">
<div class="ui-modal" v-bind="attrs" v-on="$listeners">
<div class="ui-modal__top-bar">
<div class="ui-modal__header">
<slot name="header">
<div class="ui-modal__title"><slot name="title">{{ title }}</slot></div>
<div class="ui-modal__title" role="heading"><slot name="title">{{ title }}</slot></div>
</slot>
</div>
<button class="btn btn-action ui-modal__close" @click.prevent="handleCloseClick">
@ -16,10 +16,12 @@
</div>
</div>
</div>
<div :class="[ 'ui-popup', arrow && 'ui-popup--arrow' ]" v-bind="attrs" :style="{ zIndex: zIndex }" v-on="$listeners" v-else>
<div :class="[ 'ui-popup', arrow && 'ui-popup--arrow' ]" v-bind="attrs" :style="{ zIndex: zIndex }" v-on="$listeners" role="dialog" v-else>
<div class="ui-popup__arrow" ref="arrow" v-if="arrow"></div>
<div class="ui-popup__header" v-if="hasHeader">
<slot name="header" />
<div class="ui-popup__header" v-if="hasHeader || title">
<slot name="header">
<div class="ui-popup__heading" role="heading"><slot name="title">{{ title }}</slot></div>
</slot>
</div>
<slot />
<div class="ui-popup__footer" v-if="hasFooter">

View File

@ -13,9 +13,20 @@
}
}
border-radius: 1.5px;
display: inline-block;
&.btn-outline-action {
@extend .btn-outline-dark;
}
&.btn-primary {
background: $primary-gradient;
border-color: transparent;
&:hover {
border: 1px $primary solid;
}
}
}

View File

@ -1,4 +1,4 @@
$border-radius: 0;
$border-radius: 0;
$border-radius-lg: $border-radius;
$border-radius-sm: $border-radius;
@ -7,6 +7,7 @@ $border-radius-sm: $border-radius;
@import "~bootstrap/scss/variables";
$primary: #005ea8;
$primary-gradient: linear-gradient(120deg, #0083c5 10%, #005ea8 90%);
$custom-control-indicator-checked-bg: $dark;
$custom-control-indicator-active-bg: $dark;

View File

@ -84,6 +84,10 @@
padding: 0;
}
*.ui-popup__header {
margin-bottom: 0.5rem;
}
.ui-popup__heading {
font-size: $font-size-sm;
font-weight: bold;

View File

@ -105,7 +105,7 @@
</button>
</div>
<ui-dialog reference="save" v-if="visibility.save" arrow placement="bottom-end" @leave="visibility.save = false">
<ui-dialog reference="save" v-if="visibility.save" arrow placement="bottom-end" @leave="visibility.save = false" title="Dodaj do ulubionych">
<favourites-adder @saved="visibility.save = false"/>
</ui-dialog>
</section>