silverstripe-webpack/app/client/src/scss/_components/_ui.main.scss

149 lines
2.3 KiB
SCSS

/*
* some basic styles
*/
// don't let images be wider than the parent layer
iframe,
img {
max-width: 100%;
}
a,
button,
.jqte_tool_icon {
&:hover,
&:focus {
opacity: .8;
.fas,
.fab,
.far,
&.fas,
&.fab,
&.far {
transform: scale(-1, 1);
}
}
}
.jqte_tool_icon {
&:hover,
&:focus {
transform: scale(-1, 1);
}
}
// transactions
.transition,
a, a img,
.jqte_tool_icon,
a .fas, a .fab, a .far,
a.fas, a.fab, a.far,
button .fas, button .fab, button .far,
button.fas, button.fab, button.far,
button, input, optgroup, select, textarea,
.btn,
.alert,
.dropdown,
[data-target],
.container,
.container-fluid,
.row,
[class="col-*"] {
transition: all 0.4s ease;
}
.alert-fixed-top {
position: fixed;
top: 0;
z-index: 999;
left: 4rem;
right: 4rem;
}
.btn-toolbar {
margin-top: $grid-gutter-height / 2;
}
.field {
position: relative;
margin: 2rem 0;
margin: ($grid-gutter-height / 4) 0;
&:first-child {
margin-top: 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;
}
}
label {
font-weight: bold;
}
.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.required,
.message.error {
@extend .alert;
@extend .alert-danger;
}
// stick navbar to top using mobile layout
#Header {
position: relative;
padding-top: $grid-gutter-height / 2;
padding-bottom: 1rem;
@media (min-width: map-get($grid-breakpoints, "lg")) {
padding-top: 1rem;
padding-bottom: 0;
}
}
#Navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
@media (min-width: map-get($grid-breakpoints, "lg")) {
position: relative;
margin-top: 1rem;
}
}