webpack-bootstrap-ui-kit/src/scss/_components/_ui.main.scss

374 lines
6.0 KiB
SCSS
Raw Normal View History

2019-06-08 17:20:51 +02:00
/*
* some basic styles
*/
@import '../_animations';
2019-06-08 17:20:51 +02:00
2019-12-17 18:36:25 +01:00
.pulse {
animation: pulse 0.8s linear infinite;
}
2019-06-08 17:20:51 +02:00
// don't let images be wider than the parent layer
div,
a,
span,
button,
i {
background-repeat: no-repeat;
background-size: contain;
}
2019-06-08 17:20:51 +02:00
iframe,
img {
max-width: 100%;
}
.a {
cursor: pointer;
}
2019-12-16 00:06:45 +01:00
.a,
a,
[data-toggle],
button,
.btn {
&:hover,
2019-12-29 06:04:00 +01:00
&.active,
&:focus {
opacity: 0.8;
2019-06-08 17:20:51 +02:00
> .fa,
> .far,
2019-12-16 00:06:45 +01:00
> .fas,
> .fab,
&.fa,
&.far,
2019-12-16 00:06:45 +01:00
&.fas,
&.fab {
transform: rotate(-180deg);
}
2019-06-08 17:20:51 +02:00
}
&.disabled {
opacity: 0.5;
2019-12-29 06:04:00 +01:00
cursor: default;
&:hover,
2019-12-29 06:04:00 +01:00
&.active,
&:focus {
> .fa,
> .far,
> .fas,
> .fab,
&.fa,
&.far,
&.fas,
&.fab {
transform: rotate(0deg);
}
}
}
2019-06-08 17:20:51 +02:00
}
2019-12-02 18:45:03 +01:00
// exclude bootstrap-table
[data-toggle='table'] {
&:hover,
2019-12-29 06:04:00 +01:00
&.active,
&:focus {
2019-12-02 18:45:03 +01:00
opacity: 1;
}
}
[data-toggle='collapse'] {
&[aria-expanded='true'] {
2019-06-08 17:20:51 +02:00
.accordion-icon {
&:before {
content: '\f068';
2019-06-08 17:20:51 +02:00
}
}
}
}
// transactions
.transition,
a,
a *,
.a,
.a *,
button,
input,
optgroup,
select,
textarea,
2019-06-08 17:20:51 +02:00
.btn,
.alert,
.dropdown,
[data-toggle],
[data-toggle] *,
2019-06-08 17:20:51 +02:00
.container,
.container-fluid,
.row,
[class='col-*'] {
2019-06-08 17:20:51 +02:00
transition: all 0.4s ease;
}
.btn-toolbar {
margin-top: $grid-gutter-height / 2;
}
.field {
2019-09-10 13:01:34 +02:00
position: relative;
2019-06-08 17:20:51 +02:00
margin: ($grid-gutter-height / 4) 0;
&.composite {
margin-top: 0;
margin-bottom: 0;
}
&.required {
&:after {
display: block;
position: absolute;
top: 2rem;
right: 0.5rem;
content: '*';
2019-06-08 17:20:51 +02:00
color: $red;
z-index: 2;
}
}
&.holder-error,
&.error {
input,
select,
textarea {
2019-06-08 17:20:51 +02:00
border-color: $red;
}
label {
color: $red;
}
}
.bootstrap-select:not([class*='col-']):not([class*='form-control']):not(.input-group-btn) {
2019-06-08 17:20:51 +02:00
width: 100%;
}
}
.message {
@extend .alert;
@extend .alert-info;
display: block;
margin: 0.5rem 0;
2019-06-08 17:20:51 +02:00
}
.message.validation,
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}
// element col paddings
.col-block {
2020-01-14 23:47:40 +01:00
padding-top: $grid-gutter-height / 4;
padding-bottom: $grid-gutter-height / 4;
2019-06-08 17:20:51 +02:00
}
// rewrite btn opacity on hover
.btn {
&:hover,
2019-12-29 06:04:00 +01:00
&.active,
&:focus {
2019-06-08 17:20:51 +02:00
opacity: 1;
}
}
// SS-messages
.message {
@extend .alert;
@extend .alert-info;
}
.message.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}
2019-08-19 09:57:49 +02:00
// dropdown icon
2019-11-14 22:31:19 +01:00
.navbar-toggler {
&[aria-expanded='true'] {
2019-11-14 22:42:02 +01:00
transform: rotate(90deg);
2019-11-14 22:31:19 +01:00
}
}
2019-08-19 09:57:49 +02:00
.dropdown.show .dropdown-toggle::after,
.dropdown-toggle.active-dropdown::after,
.dropdown-toggle.active::after {
transform: rotate(-90deg);
}
// dropdown hover
/*
.dropdown.show {
.dropdown {
2019-12-29 06:04:00 +01:00
&:hover,&.active,
&:focus {
.dropdown-menu {
display: block;
}
}
}
}
2019-08-19 09:57:49 +02:00
@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
.dropdown-hover ul li {
2019-08-19 09:57:49 +02:00
position: relative;
}
.dropdown-hover ul li {
2019-12-29 06:04:00 +01:00
&:hover,&.active,
&:focus {
> .dropdown-toggle::after {
transform: rotate(-90deg);
}
2019-08-19 09:57:49 +02:00
> ul {
display: block;
}
2019-08-19 09:57:49 +02:00
}
}
.dropdown-hover ul ul {
2019-08-19 09:57:49 +02:00
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul li {
2019-08-19 09:57:49 +02:00
position: relative;
}
.dropdown-hover ul ul li {
2019-12-29 06:04:00 +01:00
&:hover,&.active,
&:focus {
> ul {
display: block;
}
}
2019-08-19 09:57:49 +02:00
}
.dropdown-hover ul ul ul {
2019-08-19 09:57:49 +02:00
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
}
.dropdown-hover ul ul ul li {
2019-08-19 09:57:49 +02:00
position: relative;
}
.dropdown-hover ul ul ul li {
2019-12-29 06:04:00 +01:00
&:hover,&.active,
&:focus {
ul {
display: block;
}
}
2019-08-19 09:57:49 +02:00
}
.dropdown-hover ul ul ul ul {
2019-08-19 09:57:49 +02:00
position: absolute;
top: 0;
left: -100%;
min-width: 250px;
display: none;
z-index: 1;
}
}*/
2019-08-27 17:25:41 +02:00
// dark dropdowns
.navbar-dark {
.nav-link {
@include hover-focus {
background: $navbar-dark-hover-background;
}
}
.active > .nav-link,
.nav-link.active {
background: $navbar-dark-active-background;
}
.nav-link.show,
.navbar-nav .show > .nav-link {
background: $navbar-dark-show-background;
color: $navbar-dark-show-color;
}
}
2019-08-27 17:25:41 +02:00
.dropdown-menu.bg-dark {
border-color: $dark;
.nav-link {
color: $navbar-dark-color;
@include hover-focus {
2019-08-27 17:25:41 +02:00
color: $navbar-dark-hover-color;
}
&.disabled {
2019-12-29 06:04:00 +01:00
cursor: default;
2019-08-27 17:25:41 +02:00
color: $navbar-dark-disabled-color;
}
}
.show > .nav-link,
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-dark-active-color;
}
.dropdown-item {
@include hover-focus {
color: $navbar-dark-hover-color;
background: $navbar-dark-hover-background;
2019-08-27 17:25:41 +02:00
}
&.active,
&:active {
background: $navbar-dark-active-background;
}
.nav-link {
background: none;
}
}
}
.row,
.row-xs {
> [class^='col-'] > .card {
height: 100%;
}
}
2019-10-20 01:40:40 +02:00
.row-xs {
margin-right: -($grid-gutter-xs-width / 2);
margin-left: -($grid-gutter-xs-width / 2);
[class^='col-'] {
2019-10-20 01:40:40 +02:00
padding-left: $grid-gutter-xs-width / 2;
padding-right: $grid-gutter-xs-width / 2;
}
}