mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-09-21 00:45:57 +02:00
207 lines
3.3 KiB
SCSS
Executable File
207 lines
3.3 KiB
SCSS
Executable File
/*
|
|
* some basic styles
|
|
*/
|
|
|
|
// don't let images be wider than the parent layer
|
|
iframe,
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.a:hover,
|
|
.a:focus,
|
|
a:hover,
|
|
a:focus,
|
|
[data-toggle]:hover,
|
|
[data-toggle]:focus {
|
|
opacity: .8;
|
|
|
|
.fas,
|
|
.fab,
|
|
&.fas,
|
|
&.fab {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
|
|
[data-toggle="collapse"] {
|
|
&[aria-expanded="true"] {
|
|
.accordion-icon {
|
|
&:before {
|
|
content: "\f068";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// transactions
|
|
.transition,
|
|
a, a *,
|
|
.a, .a *,
|
|
button, input, optgroup, select, textarea,
|
|
.btn,
|
|
.alert,
|
|
.dropdown,
|
|
[data-toggle], [data-toggle] *,
|
|
.container,
|
|
.container-fluid,
|
|
.row,
|
|
[class="col-*"] {
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.btn-toolbar {
|
|
margin-top: $grid-gutter-height / 2;
|
|
}
|
|
|
|
.field {
|
|
margin: ($grid-gutter-height / 4) 0;
|
|
|
|
&.composite {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&.required {
|
|
&:after {
|
|
display: block;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: .5rem;
|
|
content: "*";
|
|
color: $red;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
&.holder-error,
|
|
&.error {
|
|
input, select, textarea {
|
|
border-color: $red;
|
|
}
|
|
|
|
label {
|
|
color: $red;
|
|
}
|
|
}
|
|
|
|
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.message {
|
|
@extend .alert;
|
|
|
|
@extend .alert-info;
|
|
|
|
display: block;
|
|
margin: .5rem 0;
|
|
}
|
|
|
|
.message.validation,
|
|
.message.required,
|
|
.message.error {
|
|
@extend .alert;
|
|
|
|
@extend .alert-danger;
|
|
}
|
|
|
|
// element col paddings
|
|
.col-block {
|
|
padding: $grid-gutter-height / 4;
|
|
}
|
|
|
|
// rewrite btn opacity on hover
|
|
.btn {
|
|
&:hover,
|
|
&:focus {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// SS-messages
|
|
.message {
|
|
@extend .alert;
|
|
|
|
@extend .alert-info;
|
|
}
|
|
|
|
.message.required,
|
|
.message.error {
|
|
@extend .alert;
|
|
|
|
@extend .alert-danger;
|
|
}
|
|
|
|
// dropdown icon
|
|
.dropdown.show .dropdown-toggle::after,
|
|
.dropdown-toggle.active-dropdown::after,
|
|
.dropdown-toggle.active::after {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
// dropdown hover
|
|
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
|
|
.dropdown-hover .collapse ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-hover .collapse ul li:hover {
|
|
> .dropdown-toggle::after {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
> ul {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.dropdown-hover .collapse ul ul {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
min-width: 250px;
|
|
display: none;
|
|
}
|
|
|
|
/*******/
|
|
.dropdown-hover .collapse ul ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-hover .collapse ul ul li:hover > ul {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-hover .collapse ul ul ul {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
min-width: 250px;
|
|
display: none;
|
|
}
|
|
|
|
/*******/
|
|
.dropdown-hover .collapse ul ul ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-hover .collapse ul ul ul li:hover ul {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-hover .collapse ul ul ul ul {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
min-width: 250px;
|
|
display: none;
|
|
z-index: 1;
|
|
}
|
|
}
|