mirror of
https://github.com/flarum/framework.git
synced 2024-11-26 02:10:09 +08:00
40a6d77e74
- 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)
162 lines
3.0 KiB
Plaintext
Executable File
162 lines
3.0 KiB
Plaintext
Executable File
//
|
|
// 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;
|
|
} |