mirror of
https://github.com/flarum/core.git
synced 2025-07-31 13:40:20 +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:
162
less/common/bootstrap/scaffolding.less
Executable file
162
less/common/bootstrap/scaffolding.less
Executable file
@@ -0,0 +1,162 @@
|
||||
//
|
||||
// Scaffolding
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Reset the box-sizing
|
||||
//
|
||||
// Heads up! This reset may cause conflicts with some third-party widgets.
|
||||
// For recommendations on resolving such conflicts, see
|
||||
// http://getbootstrap.com/getting-started/#third-box-sizing
|
||||
* {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
|
||||
// Body reset
|
||||
|
||||
html {
|
||||
font-size: 10px;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family-base;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @text-color;
|
||||
background-color: @body-bg;
|
||||
}
|
||||
|
||||
// Reset fonts for relevant elements
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: @link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @link-hover-color;
|
||||
text-decoration: @link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Figures
|
||||
//
|
||||
// We reset this here because previously Normalize had no `figure` margins. This
|
||||
// ensures we don't break anyone's use of the element.
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Images
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
.img-responsive {
|
||||
.img-responsive();
|
||||
}
|
||||
|
||||
// Rounded corners
|
||||
.img-rounded {
|
||||
border-radius: @border-radius-large;
|
||||
}
|
||||
|
||||
// Image thumbnails
|
||||
//
|
||||
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
|
||||
.img-thumbnail {
|
||||
padding: @thumbnail-padding;
|
||||
line-height: @line-height-base;
|
||||
background-color: @thumbnail-bg;
|
||||
border: 1px solid @thumbnail-border;
|
||||
border-radius: @thumbnail-border-radius;
|
||||
.transition(all .2s ease-in-out);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
.img-responsive(inline-block);
|
||||
}
|
||||
|
||||
// Perfect circle
|
||||
.img-circle {
|
||||
border-radius: 50%; // set radius in percents
|
||||
}
|
||||
|
||||
|
||||
// Horizontal rules
|
||||
|
||||
hr {
|
||||
margin-top: @line-height-computed;
|
||||
margin-bottom: @line-height-computed;
|
||||
border: 0;
|
||||
border-top: 1px solid @hr-border;
|
||||
}
|
||||
|
||||
|
||||
// Only display content to screen readers
|
||||
//
|
||||
// See: http://a11yproject.com/posts/how-to-hide-content/
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
clip: rect(0,0,0,0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Use in conjunction with .sr-only to only display content when it's focused.
|
||||
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
|
||||
// Credit: HTML5 Boilerplate
|
||||
|
||||
.sr-only-focusable {
|
||||
&:active,
|
||||
&:focus {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// iOS "clickable elements" fix for role="button"
|
||||
//
|
||||
// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
// for traditionally non-focusable elements with role="button"
|
||||
// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
// Upstream patch for normalize.css submitted: https://github.com/necolas/normalize.css/pull/379 - remove this fix once that is merged
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
Reference in New Issue
Block a user