mirror of
https://github.com/flarum/core.git
synced 2025-07-30 21:20:24 +02:00
Big front-end asset/filestructure refactor
- Extract shared Ember components into a “flarum-common” ember-cli addon. This can be used by both the forum + admin Ember apps, keeping things DRY - Move LESS styles into their own top-level directory and do a similar thing (extract common styles) - Add LESS/JS compilation and versioning to PHP (AssetManager) - Set up admin entry point (Theoretical) upgrade instructions: - Delete everything in [app_root]/public - Set up tooling in forum/admin Ember apps (npm install/update, bower install/update) and then build them (ember build) - php artisan vendor:publish - Upgrade flarum/flarum repo (slight change in a config file) - If you need to trigger a LESS/JS recompile, delete the .css/.js files in [app_root]/public/flarum. I set up LiveReload to do this for me when I change files in less/ or ember/ Todo: - Start writing admin app! - Remove bootstrap/font-awesome from repo and instead depend on their composer packages? Maybe? (Bower is not an option here)
This commit is contained in:
153
less/common/forms.less
Normal file
153
less/common/forms.less
Normal file
@@ -0,0 +1,153 @@
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.form-control {
|
||||
.box-shadow(none);
|
||||
&:focus,
|
||||
&.focus {
|
||||
background-color: #fff;
|
||||
color: @fl-body-color;
|
||||
.box-shadow(none);
|
||||
}
|
||||
}
|
||||
legend {
|
||||
font-size: 14px;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Search inputs
|
||||
// @todo Extract some of this into header-specific definitions
|
||||
.search-input {
|
||||
overflow: hidden;
|
||||
|
||||
&:before {
|
||||
.fa();
|
||||
content: @fa-var-search;
|
||||
float: left;
|
||||
margin-right: -36px;
|
||||
width: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: @fl-body-muted-color;
|
||||
position: relative;
|
||||
padding: @padding-base-vertical - 1 0;
|
||||
line-height: @line-height-base;
|
||||
pointer-events: none;
|
||||
}
|
||||
& .form-control {
|
||||
float: left;
|
||||
width: 225px;
|
||||
padding-left: 36px;
|
||||
padding-right: 36px;
|
||||
.transition(~"all 0.4s");
|
||||
}
|
||||
& .clear {
|
||||
float: left;
|
||||
margin-left: -36px;
|
||||
vertical-align: top;
|
||||
opacity: 0;
|
||||
width: 36px !important;
|
||||
.rotate(-180deg);
|
||||
.transition(~"transform 0.2s, opacity 0.2s");
|
||||
}
|
||||
&.clearable .clear {
|
||||
opacity: 1;
|
||||
.rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Select inputs
|
||||
.select-input {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.select-input select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
-webkit-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;
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user