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)
661 lines
14 KiB
Plaintext
Executable File
661 lines
14 KiB
Plaintext
Executable File
//
|
|
// Navbars
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Wrapper and base class
|
|
//
|
|
// Provide a static navbar from which we expand to create full-width, fixed, and
|
|
// other navbar variations.
|
|
|
|
.navbar {
|
|
position: relative;
|
|
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
|
|
margin-bottom: @navbar-margin-bottom;
|
|
border: 1px solid transparent;
|
|
|
|
// Prevent floats from breaking the navbar
|
|
&:extend(.clearfix all);
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
border-radius: @navbar-border-radius;
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar heading
|
|
//
|
|
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
|
|
// styling of responsive aspects.
|
|
|
|
.navbar-header {
|
|
&:extend(.clearfix all);
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar collapse (body)
|
|
//
|
|
// Group your navbar content into this for easy collapsing and expanding across
|
|
// various device sizes. By default, this content is collapsed when <768px, but
|
|
// will expand past that for a horizontal display.
|
|
//
|
|
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
|
|
// vertically and include a `max-height` to overflow in case you have too much
|
|
// content for the user's viewport.
|
|
|
|
.navbar-collapse {
|
|
overflow-x: visible;
|
|
padding-right: @navbar-padding-horizontal;
|
|
padding-left: @navbar-padding-horizontal;
|
|
border-top: 1px solid transparent;
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
|
|
&:extend(.clearfix all);
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
&.in {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
width: auto;
|
|
border-top: 0;
|
|
box-shadow: none;
|
|
|
|
&.collapse {
|
|
display: block !important;
|
|
height: auto !important;
|
|
padding-bottom: 0; // Override default setting
|
|
overflow: visible !important;
|
|
}
|
|
|
|
&.in {
|
|
overflow-y: visible;
|
|
}
|
|
|
|
// Undo the collapse side padding for navbars with containers to ensure
|
|
// alignment of right-aligned contents.
|
|
.navbar-fixed-top &,
|
|
.navbar-static-top &,
|
|
.navbar-fixed-bottom & {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-fixed-top,
|
|
.navbar-fixed-bottom {
|
|
.navbar-collapse {
|
|
max-height: @navbar-collapse-max-height;
|
|
|
|
@media (max-device-width: @screen-xs-min) and (orientation: landscape) {
|
|
max-height: 200px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Both navbar header and collapse
|
|
//
|
|
// When a container is present, change the behavior of the header and collapse.
|
|
|
|
.container,
|
|
.container-fluid {
|
|
> .navbar-header,
|
|
> .navbar-collapse {
|
|
margin-right: -@navbar-padding-horizontal;
|
|
margin-left: -@navbar-padding-horizontal;
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Navbar alignment options
|
|
//
|
|
// Display the navbar across the entirety of the page or fixed it to the top or
|
|
// bottom of the page.
|
|
|
|
// Static top (unfixed, but 100% wide) navbar
|
|
.navbar-static-top {
|
|
z-index: @zindex-navbar;
|
|
border-width: 0 0 1px;
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
// Fix the top/bottom navbars when screen real estate supports it
|
|
.navbar-fixed-top,
|
|
.navbar-fixed-bottom {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: @zindex-navbar-fixed;
|
|
|
|
// Undo the rounded corners
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.navbar-fixed-top {
|
|
top: 0;
|
|
border-width: 0 0 1px;
|
|
}
|
|
.navbar-fixed-bottom {
|
|
bottom: 0;
|
|
margin-bottom: 0; // override .navbar defaults
|
|
border-width: 1px 0 0;
|
|
}
|
|
|
|
|
|
// Brand/project name
|
|
|
|
.navbar-brand {
|
|
float: left;
|
|
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
|
font-size: @font-size-large;
|
|
line-height: @line-height-computed;
|
|
height: @navbar-height;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
> img {
|
|
display: block;
|
|
}
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
.navbar > .container &,
|
|
.navbar > .container-fluid & {
|
|
margin-left: -@navbar-padding-horizontal;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar toggle
|
|
//
|
|
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
|
|
// JavaScript plugin.
|
|
|
|
.navbar-toggle {
|
|
position: relative;
|
|
float: right;
|
|
margin-right: @navbar-padding-horizontal;
|
|
padding: 9px 10px;
|
|
.navbar-vertical-align(34px);
|
|
background-color: transparent;
|
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
|
border: 1px solid transparent;
|
|
border-radius: @border-radius-base;
|
|
|
|
// We remove the `outline` here, but later compensate by attaching `:hover`
|
|
// styles to `:focus`.
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
// Bars
|
|
.icon-bar {
|
|
display: block;
|
|
width: 22px;
|
|
height: 2px;
|
|
border-radius: 1px;
|
|
}
|
|
.icon-bar + .icon-bar {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar nav links
|
|
//
|
|
// Builds on top of the `.nav` components with its own modifier class to make
|
|
// the nav the full height of the horizontal nav (above 768px).
|
|
|
|
.navbar-nav {
|
|
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
|
|
|
|
> li > a {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
line-height: @line-height-computed;
|
|
}
|
|
|
|
@media (max-width: @grid-float-breakpoint-max) {
|
|
// Dropdowns get custom display when collapsed
|
|
.open .dropdown-menu {
|
|
position: static;
|
|
float: none;
|
|
width: auto;
|
|
margin-top: 0;
|
|
background-color: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
> li > a,
|
|
.dropdown-header {
|
|
padding: 5px 15px 5px 25px;
|
|
}
|
|
> li > a {
|
|
line-height: @line-height-computed;
|
|
&:hover,
|
|
&:focus {
|
|
background-image: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Uncollapse the nav
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
float: left;
|
|
margin: 0;
|
|
|
|
> li {
|
|
float: left;
|
|
> a {
|
|
padding-top: @navbar-padding-vertical;
|
|
padding-bottom: @navbar-padding-vertical;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Navbar form
|
|
//
|
|
// Extension of the `.form-inline` with some extra flavor for optimum display in
|
|
// our navbars.
|
|
|
|
.navbar-form {
|
|
margin-left: -@navbar-padding-horizontal;
|
|
margin-right: -@navbar-padding-horizontal;
|
|
padding: 10px @navbar-padding-horizontal;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
|
|
.box-shadow(@shadow);
|
|
|
|
// Mixin behavior for optimum display
|
|
.form-inline();
|
|
|
|
.form-group {
|
|
@media (max-width: @grid-float-breakpoint-max) {
|
|
margin-bottom: 5px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertically center in expanded, horizontal navbar
|
|
.navbar-vertical-align(@input-height-base);
|
|
|
|
// Undo 100% width for pull classes
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
width: auto;
|
|
border: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
|
|
// Dropdown menus
|
|
|
|
// Menu position and menu carets
|
|
.navbar-nav > li > .dropdown-menu {
|
|
margin-top: 0;
|
|
.border-top-radius(0);
|
|
}
|
|
// Menu position and menu caret support for dropups via extra dropup class
|
|
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
|
margin-bottom: 0;
|
|
.border-top-radius(@navbar-border-radius);
|
|
.border-bottom-radius(0);
|
|
}
|
|
|
|
|
|
// Buttons in navbars
|
|
//
|
|
// Vertically center a button within a navbar (when *not* in a form).
|
|
|
|
.navbar-btn {
|
|
.navbar-vertical-align(@input-height-base);
|
|
|
|
&.btn-sm {
|
|
.navbar-vertical-align(@input-height-small);
|
|
}
|
|
&.btn-xs {
|
|
.navbar-vertical-align(22);
|
|
}
|
|
}
|
|
|
|
|
|
// Text in navbars
|
|
//
|
|
// Add a class to make any element properly align itself vertically within the navbars.
|
|
|
|
.navbar-text {
|
|
.navbar-vertical-align(@line-height-computed);
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
float: left;
|
|
margin-left: @navbar-padding-horizontal;
|
|
margin-right: @navbar-padding-horizontal;
|
|
}
|
|
}
|
|
|
|
|
|
// Component alignment
|
|
//
|
|
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
|
|
// issues with parents and chaining. Only do this when the navbar is uncollapsed
|
|
// though so that navbar contents properly stack and align in mobile.
|
|
//
|
|
// Declared after the navbar components to ensure more specificity on the margins.
|
|
|
|
@media (min-width: @grid-float-breakpoint) {
|
|
.navbar-left { .pull-left(); }
|
|
.navbar-right {
|
|
.pull-right();
|
|
margin-right: -@navbar-padding-horizontal;
|
|
|
|
~ .navbar-right {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Alternate navbars
|
|
// --------------------------------------------------
|
|
|
|
// Default navbar
|
|
.navbar-default {
|
|
background-color: @navbar-default-bg;
|
|
border-color: @navbar-default-border;
|
|
|
|
.navbar-brand {
|
|
color: @navbar-default-brand-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-brand-hover-color;
|
|
background-color: @navbar-default-brand-hover-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-text {
|
|
color: @navbar-default-color;
|
|
}
|
|
|
|
.navbar-nav {
|
|
> li > a {
|
|
color: @navbar-default-link-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-hover-color;
|
|
background-color: @navbar-default-link-hover-bg;
|
|
}
|
|
}
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-active-color;
|
|
background-color: @navbar-default-link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-disabled-color;
|
|
background-color: @navbar-default-link-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-toggle {
|
|
border-color: @navbar-default-toggle-border-color;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @navbar-default-toggle-hover-bg;
|
|
}
|
|
.icon-bar {
|
|
background-color: @navbar-default-toggle-icon-bar-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-collapse,
|
|
.navbar-form {
|
|
border-color: @navbar-default-border;
|
|
}
|
|
|
|
// Dropdown menu items
|
|
.navbar-nav {
|
|
// Remove background color from open dropdown
|
|
> .open > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @navbar-default-link-active-bg;
|
|
color: @navbar-default-link-active-color;
|
|
}
|
|
}
|
|
|
|
@media (max-width: @grid-float-breakpoint-max) {
|
|
// Dropdowns get custom display when collapsed
|
|
.open .dropdown-menu {
|
|
> li > a {
|
|
color: @navbar-default-link-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-hover-color;
|
|
background-color: @navbar-default-link-hover-bg;
|
|
}
|
|
}
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-active-color;
|
|
background-color: @navbar-default-link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-disabled-color;
|
|
background-color: @navbar-default-link-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Links in navbars
|
|
//
|
|
// Add a class to ensure links outside the navbar nav are colored correctly.
|
|
|
|
.navbar-link {
|
|
color: @navbar-default-link-color;
|
|
&:hover {
|
|
color: @navbar-default-link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
color: @navbar-default-link-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-hover-color;
|
|
}
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-default-link-disabled-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Inverse navbar
|
|
|
|
.navbar-inverse {
|
|
background-color: @navbar-inverse-bg;
|
|
border-color: @navbar-inverse-border;
|
|
|
|
.navbar-brand {
|
|
color: @navbar-inverse-brand-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-brand-hover-color;
|
|
background-color: @navbar-inverse-brand-hover-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-text {
|
|
color: @navbar-inverse-color;
|
|
}
|
|
|
|
.navbar-nav {
|
|
> li > a {
|
|
color: @navbar-inverse-link-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-hover-color;
|
|
background-color: @navbar-inverse-link-hover-bg;
|
|
}
|
|
}
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-active-color;
|
|
background-color: @navbar-inverse-link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-disabled-color;
|
|
background-color: @navbar-inverse-link-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Darken the responsive nav toggle
|
|
.navbar-toggle {
|
|
border-color: @navbar-inverse-toggle-border-color;
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @navbar-inverse-toggle-hover-bg;
|
|
}
|
|
.icon-bar {
|
|
background-color: @navbar-inverse-toggle-icon-bar-bg;
|
|
}
|
|
}
|
|
|
|
.navbar-collapse,
|
|
.navbar-form {
|
|
border-color: darken(@navbar-inverse-bg, 7%);
|
|
}
|
|
|
|
// Dropdowns
|
|
.navbar-nav {
|
|
> .open > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @navbar-inverse-link-active-bg;
|
|
color: @navbar-inverse-link-active-color;
|
|
}
|
|
}
|
|
|
|
@media (max-width: @grid-float-breakpoint-max) {
|
|
// Dropdowns get custom display
|
|
.open .dropdown-menu {
|
|
> .dropdown-header {
|
|
border-color: @navbar-inverse-border;
|
|
}
|
|
.divider {
|
|
background-color: @navbar-inverse-border;
|
|
}
|
|
> li > a {
|
|
color: @navbar-inverse-link-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-hover-color;
|
|
background-color: @navbar-inverse-link-hover-bg;
|
|
}
|
|
}
|
|
> .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-active-color;
|
|
background-color: @navbar-inverse-link-active-bg;
|
|
}
|
|
}
|
|
> .disabled > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-disabled-color;
|
|
background-color: @navbar-inverse-link-disabled-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-link {
|
|
color: @navbar-inverse-link-color;
|
|
&:hover {
|
|
color: @navbar-inverse-link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn-link {
|
|
color: @navbar-inverse-link-color;
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-hover-color;
|
|
}
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-inverse-link-disabled-color;
|
|
}
|
|
}
|
|
}
|
|
}
|