mirror of
https://github.com/flarum/framework.git
synced 2024-12-14 08:03:37 +08:00
74e80ea2df
- Write CSS for everything, update templates. - Refactor discussion view. Stream is split into two components (content and scrubber) which have their own responsibilities. - Extract pane functionality into a mixin. - Implement global “back button” system. You give a “paneable” target to the application controller, the back button will modulate its pane-related properties as necessary, and call an action when the button is clicked. - Extract welcome-hero into its own component. - Lots of other general improvements/refactoring. The code is quite well-commented so take a look!
224 lines
3.6 KiB
Plaintext
224 lines
3.6 KiB
Plaintext
// ------------------------------------
|
|
// Buttons
|
|
|
|
.btn {
|
|
border: 0;
|
|
.box-shadow(none);
|
|
line-height: 20px;
|
|
|
|
& .fa {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
.btn-group .btn + .btn {
|
|
margin-left: 1px;
|
|
}
|
|
.btn-icon {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
}
|
|
.btn-link {
|
|
color: @fl-body-muted-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
.btn-primary {
|
|
font-weight: bold;
|
|
& .icon-glyph {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Redefine Bootstrap's mixin to make some general changes
|
|
.button-variant(@color; @background; @border) {
|
|
&:hover,
|
|
&:focus,
|
|
&.focus,
|
|
&:active,
|
|
&.active,
|
|
.open > .dropdown-toggle& {
|
|
background-color: darken(@background, 5%);
|
|
}
|
|
&.active {
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// Little round icon buttons
|
|
.btn-icon.btn-sm {
|
|
border-radius: 12px;
|
|
height: 24px;
|
|
width: 24px;
|
|
text-align: center;
|
|
padding: 3px 0;
|
|
|
|
& .label, & .icon-caret {
|
|
display: none;
|
|
}
|
|
& .fa-ellipsis-v {
|
|
font-size: 17px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// Buttons that blend into the background
|
|
.btn-blend {
|
|
background: transparent;
|
|
&:hover {
|
|
background: @fl-body-control-bg;
|
|
}
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Form Controls
|
|
|
|
.form-control {
|
|
.box-shadow(none);
|
|
&:focus,
|
|
&.focus {
|
|
background-color: @input-border-focus;
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
// Search inputs
|
|
// @todo Extract some of this into header-specific definitions
|
|
.search-input {
|
|
margin-right: 10px;
|
|
&: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;
|
|
}
|
|
}
|
|
.search-input .form-control {
|
|
float: left;
|
|
width: 225px;
|
|
padding-left: 36px;
|
|
padding-right: 36px;
|
|
.transition(~"all 0.4s");
|
|
|
|
&:focus {
|
|
width: 400px;
|
|
}
|
|
}
|
|
.search-input .clear {
|
|
float: left;
|
|
margin-left: -36px;
|
|
vertical-align: top;
|
|
.scale(0.001);
|
|
.transition(~"transform 0.15s");
|
|
}
|
|
.search-input.clearable .clear {
|
|
.scale(1);
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Dropdown Menus
|
|
|
|
.dropdown-menu {
|
|
border: 0;
|
|
padding: 8px 0;
|
|
margin-top: 7px;
|
|
.box-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
|
|
|
|
& > li > a {
|
|
padding: 8px 15px;
|
|
color: @fl-body-color;
|
|
&:hover, &:focus {
|
|
color: @fl-body-color;
|
|
background-color: @fl-secondary-color;
|
|
}
|
|
& .fa {
|
|
margin-right: 5px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
& .divider {
|
|
margin: 10px 0;
|
|
background-color: darken(@fl-secondary-color, 2%);
|
|
}
|
|
}
|
|
.dropdown-split.item-count-1 {
|
|
& .btn {
|
|
border-radius: @border-radius-base !important;
|
|
}
|
|
& .dropdown-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Tooltips
|
|
|
|
.tooltip-inner {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Loading Indicators
|
|
|
|
.loading-indicator {
|
|
position: relative;
|
|
color: @fl-primary-color;
|
|
}
|
|
.loading-indicator-block {
|
|
height: 100px;
|
|
}
|
|
|
|
// ------------------------------------
|
|
// Avatars
|
|
|
|
.avatar-size(@size) {
|
|
width: @size;
|
|
height: @size;
|
|
border-radius: @size / 2;
|
|
font-size: @size / 2;
|
|
line-height: @size;
|
|
}
|
|
.avatar {
|
|
display: inline-block;
|
|
color: #fff;
|
|
font-weight: 300;
|
|
text-align: center;
|
|
vertical-align: top;
|
|
.avatar-size(48px);
|
|
|
|
& img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 100%;
|
|
vertical-align: top;
|
|
}
|
|
} |