mirror of
https://github.com/flarum/framework.git
synced 2024-11-29 04:33:47 +08:00
e466dcc626
Most of #137 done. - Use FastClick to make everything feel more responsive - Use transforms for animations to make them silky smooth - Style the drawer the same as the header to keep things simple - Revert to fixed composer, but allow it to be minimised - Add a separate notifications page for mobile so it’s easy to go back - Add indicator to the menu button when there are unread notifications - Close the drawer when navigating away - Make dropdowns/modals scrollable - Many other mobile tweaks and bug fixes Didn’t take much care to keep CSS clean, due to #103
118 lines
1.9 KiB
Plaintext
118 lines
1.9 KiB
Plaintext
.form-group {
|
|
margin-bottom: 12px;
|
|
}
|
|
.form-control {
|
|
.box-shadow(none);
|
|
border-width: 2px;
|
|
-webkit-appearance: none;
|
|
|
|
&:focus,
|
|
&.focus {
|
|
background-color: #fff;
|
|
color: @fl-body-color;
|
|
.box-shadow(none);
|
|
border: 2px solid @fl-body-primary-color;
|
|
}
|
|
}
|
|
legend {
|
|
font-size: 14px;
|
|
border: 0;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
// Select inputs
|
|
.select-input {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.select-input select {
|
|
display: inline-block;
|
|
width: auto;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
padding-right: @padding-base-horizontal + 16;
|
|
cursor: pointer;
|
|
}
|
|
.select-input .fa {
|
|
margin-left: -@padding-base-horizontal - 16;
|
|
pointer-events: none;
|
|
color: @fl-body-muted-color;
|
|
}
|
|
|
|
.checkbox-switch {
|
|
& label {
|
|
padding-left: 65px;
|
|
}
|
|
& .switch-control {
|
|
float: left;
|
|
margin-left: -65px;
|
|
margin-top: -4px;
|
|
}
|
|
& .loading-indicator {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.switch-control, .yesno-control {
|
|
& input[type=checkbox] {
|
|
display: none;
|
|
}
|
|
}
|
|
.switch {
|
|
width: 50px;
|
|
height: 28px;
|
|
padding: 3px;
|
|
position: relative;
|
|
border-radius: 14px;
|
|
background: @fl-body-control-bg;
|
|
.transition(background-color 0.2s);
|
|
|
|
input:checked + & {
|
|
background: @fl-body-primary-color;
|
|
}
|
|
|
|
& .loading-indicator {
|
|
opacity: 0;
|
|
|
|
.loading& {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&:before, & .loading-indicator {
|
|
position: absolute;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding: 0;
|
|
left: 3px;
|
|
.transition(~"opacity 0.2s, left 0.2s");
|
|
|
|
input:checked + & {
|
|
left: 25px;
|
|
}
|
|
}
|
|
&:before {
|
|
content: ' ';
|
|
background: @fl-body-bg;
|
|
border-radius: 11px;
|
|
box-shadow: 0 2px 4px @fl-shadow-color;
|
|
}
|
|
}
|
|
.yesno-control {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
.yesno {
|
|
font-size: 14px;
|
|
|
|
&.yes {
|
|
color: #58A400;
|
|
}
|
|
&.no {
|
|
color: #D0021B;
|
|
}
|
|
&.disabled {
|
|
color: @fl-body-muted-more-color !important;
|
|
}
|
|
}
|