survey-sdgs/public/assets/scss/layouts/_rtl-components.scss

171 lines
3.4 KiB
SCSS
Executable File

// ----------------------------------------------
// RTL Components Style
// ----------------------------------------------
:root {
--bs-offcanvas-transition: transform 0.3s ease-in-out-in;
}
// Checkbox
.form-check {
padding-left: 0;
padding-right: 1.75em;
.form-check-input {
float: right;
margin-left: 0;
margin-right: -1.75em;
}
}
.form-check-inline {
margin-left: 1rem;
margin-right: 0;
}
// Breadcrumb
.breadcrumb-item + .breadcrumb-item::before {
float: right;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0;
padding-right: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
padding-left: 0.5rem;
padding-right: 0;
}
// Form Select
.form-select {
padding: 0.375rem 0.75rem 0.375rem 1.875rem;
background-position: left 0.75rem center;
}
// Input groups
.input-group {
> .form-control,
> .custom-select {
&:not(:last-child) {
@include border-start-radius(0);
}
&:not(:first-child) {
@include border-end-radius(0);
}
}
// Custom file inputs have more complex markup, thus requiring different
// border-radius overrides.
> .custom-file {
display: flex;
align-items: center;
&:not(:last-child) .custom-file-label,
&:not(:last-child) .custom-file-label::after {
@include border-start-radius(0);
}
&:not(:first-child) .custom-file-label {
@include border-end-radius(0);
}
}
$validation-messages: "";
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
margin-right: -$input-border-width;
margin-left: 0;
@include border-start-radius(0);
}
}
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group
> .input-group-append:last-child
> .btn:not(:last-child):not(.dropdown-toggle),
.input-group
> .input-group-append:last-child
> .input-group-text:not(:last-child) {
@include border-end-radius(0.25rem);
@include border-start-radius(0);
}
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn {
@include border-end-radius(0);
}
.input-group .form-control:not(:first-child),
.input-group .form-control:not(:last-child) {
border-radius: 0 !important;
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group
> .input-group-prepend:first-child
> .input-group-text:not(:first-child) {
@include border-start-radius(0.25rem);
@include border-end-radius(0);
}
.form-floating > label {
right: 0;
left: auto;
}
.form-switch {
.form-check-input {
margin-left: 8px;
}
}
// Accordian
.accordion-button::after {
margin-left: unset;
margin-right: auto;
}
// Modal
.modal-header .btn-close {
margin: -0.5rem auto -0.5rem -0.5rem;
}
// Alert
.alert-dismissible.customize-alert {
padding-left: 25px !important;
}
.alert-dismissible .btn-close {
left: 0;
right: auto;
}
.alert.customize-alert .side-line {
left: unset;
right: 0;
}
// Toast
.toast-header .btn-close {
margin-left: -0.375rem;
margin-right: 0.75rem;
}
.toast {
.btn-close.ms-auto {
margin-left: 8px !important;
}
}
// Dropdown
.dropdown-toggle::after {
margin-right: 0.255em;
margin-left: 0;
}