mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-10 18:35:56 +02:00
Code Issues Releases Wiki Activity

CSS Code Housekeeping (#3026)

Browse Source 
* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal 
on successful sign up, which no longer exists.

https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>
This commit is contained in:
Sami Mazouz
2021-08-21 19:34:07 +01:00
committed by GitHub
parent 57eb621885
commit af89b23f67
29 changed files with 156 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
less/common/Alert.less
View File

@@ -3,6 +3,20 @@
border-radius: @border-radius;
line-height: 1.5;
background: var(--alert-bg);
&,
a,
a:hover,
.Button,
.Button:hover,
.Button:active,
.Button.active,
.Button:focus,
.Button.focus {
color: var(--alert-color);
}
.Alert--color(@alert-color, @alert-bg);
}
.Alert--error {
@@ -16,19 +30,8 @@
}
}
.Alert--color(@color; @background) {
background: @background;
&,
a,
a:hover,
.Button,
.Button:hover,
.Button:active,
.Button.active,
.Button:focus,
.Button.focus {
color: @color;
}
--alert-bg: @background;
--alert-color: @color;
}
.Alert-controls {
list-style-type: none;

2
less/common/AlertManager.less
View File

@@ -7,6 +7,6 @@
.Alert {
display: inline-block;
margin-top: 20px;
.box-shadow(0 2px 6px @shadow-color);
box-shadow: 0 2px 6px @shadow-color;
}
}

14
less/common/App.less
View File

@@ -24,7 +24,7 @@
}
.scrolled & {
.box-shadow(0 2px 6px @shadow-color);
box-shadow: 0 2px 6px @shadow-color;
}
}
.App-primaryControl, .App-titleControl, .App-backControl {
@@ -40,7 +40,7 @@
> .Button {
float: none;
background: transparent !important;
.box-shadow(~"none !important");
box-shadow: none !important;
height: @header-height-phone;
width: auto;
padding: 13px !important;
@@ -136,9 +136,9 @@
left: 0;
top: 0;
bottom: 0;
.box-shadow(0 2px 6px @shadow-color);
.translate3d(-@drawer-width - 6px, 0, 0);
.transition-transform(0.2s);
box-shadow: 0 2px 6px @shadow-color;
transform: translate(-@drawer-width - 6px, 0);
transition: transform 0.2s;
z-index: @zindex-modal;
.drawerOpen & {
@@ -155,7 +155,7 @@
z-index: @zindex-modal-background;
background-color: @overlay-bg;
opacity: 0;
.transition(0.2s opacity);
transition: opacity 0.2s;
&.in {
opacity: 0.9;
@@ -241,7 +241,7 @@
}
.scrolled & {
.box-shadow(0 2px 6px @shadow-color);
box-shadow: 0 2px 6px @shadow-color;
}
& when (@config-colored-header = true) {

15
less/common/Avatar.less
View File

@@ -1,12 +1,17 @@
.Avatar {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
color: #fff;
text-align: center;
vertical-align: top;
background-color: var(--avatar-bg);
font-weight: normal;
.Avatar--size(48px);
width: var(--size);
height: var(--size);
border-radius: 100%;
font-size: calc(~"var(--size) / 2");
img {
display: inline-block;
@@ -18,9 +23,5 @@
}
.Avatar--size(@size) {
width: @size;
height: @size;
border-radius: @size;
font-size: @size / 2;
line-height: @size;
--size: @size;
}

23
less/common/Badge.less
View File

@@ -1,26 +1,27 @@
.Badge {
.Badge--size(22px);
width: var(--size);
height: var(--size);
border-radius: calc(~"var(--size) / 2");
background: var(--badge-bg);
color: var(--badge-color);
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
text-align: center;
.box-shadow(0 2px 4px @shadow-color);
box-shadow: 0 2px 4px @shadow-color;
.Badge-label {
display: none;
}
&, .Badge-icon {
font-size: calc(~"0.56 * var(--size)");
}
}
.Badge--size(@size) {
width: @size;
height: @size;
border-radius: @size / 2;
line-height: @size - 1px;
&, .Badge-icon {
font-size: 0.56 * @size;
}
--size: @size;
}
.badges {

8
less/common/Button.less
View File

@@ -77,7 +77,7 @@
fieldset[disabled] & {
cursor: default;
opacity: 0.65;
.box-shadow(none);
box-shadow: none;
}
a& {
@@ -88,7 +88,7 @@
}
.Button-label {
.transition(margin-right 0.1s);
transition: margin-right 0.1s;
}
.LoadingIndicator-container {
@@ -148,7 +148,7 @@
&.focus,
.open > &.Dropdown-toggle {
background: transparent !important;
.box-shadow(none);
box-shadow: none;
color: @link-color;
}
}
@@ -164,7 +164,7 @@
&:active,
&.active,
.open > &.Dropdown-toggle {
.box-shadow(none);
box-shadow: none;
}
}
.Button--primary {

4
less/common/Checkbox.less
View File

@@ -49,7 +49,7 @@
position: relative;
border-radius: 14px;
background: @control-bg;
.transition(background-color 0.2s);
transition: background-color 0.2s;
.LoadingIndicator {
--size: 22px !important;
@@ -81,7 +81,7 @@
height: 22px;
padding: 0;
left: 3px;
.transition(~"opacity 0.2s, left 0.2s");
transition: opacity 0.2s, left 0.2s;
.on& {
left: 25px;

17
less/common/Dropdown.less
View File

@@ -12,7 +12,7 @@
margin: 7px 0;
background: @body-bg;
border-radius: @border-radius;
.box-shadow(0 2px 6px @shadow-color);
box-shadow: 0 2px 6px @shadow-color;
list-style: none;
text-align: left;
color: @text-color;
@@ -35,11 +35,12 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.box-shadow(none);
box-shadow: none;
text-align: left;
font-size: 13px;
font-weight: normal;
text-decoration: none;
cursor: pointer;
&.hasIcon {
padding-left: 40px;
@@ -154,7 +155,7 @@
float: none;
position: static;
background: none;
.box-shadow(none);
box-shadow: none;
}
}
@@ -176,12 +177,12 @@
display: block;
max-height: 70vh;
border-radius: 0;
.box-shadow(0 2px 6px @shadow-color);
box-shadow: 0 2px 6px @shadow-color;
visibility: hidden;
overflow: auto;
-webkit-overflow-scrolling: touch;
.translate3d(0, 70vh, 0);
.transition-transform(~" 0.3s, visibility 0s 0.3s");
transform: translate(0, 70vh);
transition: transform 0.3s, visibility 0s 0.3s;
> li {
> a, > button {
@@ -222,8 +223,8 @@
.dropdown-backdrop {
background: fade(@secondary-color, 90%);
opacity: 0;
.transition(~"opacity 0.3s");
.translate3d(0, 0, 0);
transition: opacity 0.3s;
transform: translate(0, 0);
.open & {
opacity: 1;

3
less/common/FormControl.less
View File

@@ -1,4 +1,5 @@
.FormControl {
--transition: border-color .15s, background .15s;
display: block;
width: 100%;
height: 36px;
@@ -9,7 +10,7 @@
background-color: @control-bg;
border: 2px solid transparent;
border-radius: @border-radius;
.transition(~"border-color .15s, background .15s");
transition: var(--transition);
-webkit-appearance: none;
&:focus,

4
less/common/LoadingIndicator.less
View File

@@ -2,7 +2,7 @@
// Loading Indicators
.LoadingIndicator {
@spin-time: 750ms;
--spin-time: 750ms;
// Use the value of `color` to maintain backwards compatibility
border-color: currentColor;
@@ -14,7 +14,7 @@
width: var(--size);
height: var(--size);
animation: spin @spin-time linear infinite;
animation: spin var(--spin-time) linear infinite;
// <div> container around the spinner
// Used for positioning

18
less/common/Modal.less
View File

@@ -16,7 +16,7 @@
z-index: @zindex-modal-background;
background-color: @overlay-bg;
opacity: 0;
.transition(0.2s opacity);
transition: opacity 0.2s;
&.in {
opacity: 1;
@@ -37,11 +37,11 @@
// When fading in the modal, animate it to slide down
.Modal {
.scale(0.9);
.transition-transform(0.2s ease-out);
transform: scale(0.9);
transition: transform 0.2s ease-out;
}
&.in .Modal {
.scale(1);
transform: scale(1);
}
}
.modal-open .ModalManager {
@@ -126,7 +126,7 @@
opacity: 0;
pointer-events: none;
border-radius: @border-radius;
.transition(opacity 0.2s);
transition: opacity 0.2s;
&.active {
opacity: 1;
@@ -146,8 +146,8 @@
bottom: 0;
top: 0;
overflow: auto;
.transition-transform(0.2s);
.translate3d(0, 100vh, 0);
transition: transform 0.2s ease-out;
transform: translate(0, 100vh);
&.in {
-webkit-transform: none !important;
@@ -170,7 +170,7 @@
border: 0;
min-height: 100vh;
padding-top: @header-height-phone;
.box-shadow(none);
box-shadow: none;
}
.Modal-header {
padding: 0;
@@ -193,7 +193,7 @@
border: 0;
border-radius: @border-radius;
.box-shadow(0 7px 15px @shadow-color);
box-shadow: 0 7px 15px @shadow-color;
}
.Modal--small {
max-width: 375px;

8
less/common/Navigation.less
View File

@@ -1,7 +1,7 @@
.Navigation-back {
z-index: 3 !important; // z-index of an active .btn-group .btn is 2
border-radius: @border-radius !important;
.transition(border-radius 0.2s);
transition: border-radius 0.2s;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
@@ -17,10 +17,10 @@
opacity: 0;
margin-left: -5px !important;
border-radius: 0 @border-radius @border-radius 0;
.transition(~"opacity 0.2s, margin-left 0.2s");
transition: opacity 0.2s, margin-left 0.2s;
.icon {
.rotate(45deg);
transform: rotate(45deg);
}
}
@@ -38,7 +38,7 @@
}
}
.hasPane.panePinned .Navigation-pin .icon {
.rotate(0deg);
transform: rotate(0);
}
}

4
less/common/Search.less
View File

@@ -3,7 +3,7 @@
}
@media @tablet-up {
.Search {
.transition(margin-left 0.4s);
transition: margin-left 0.4s;
&.focused {
margin-left: -400px;
@@ -59,7 +59,7 @@
width: 225px;
padding-left: 32px;
padding-right: 32px;
.transition(all 0.4s);
transition: var(--transition), width 0.4s;
box-sizing: inherit !important;
}

2
less/common/Tooltip.less
View File

@@ -10,7 +10,7 @@
font-weight: normal;
line-height: 1.4;
opacity: 0;
.transition(0.15s opacity linear);
transition: opacity 0.15s linear;
&.in { opacity: 1; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }

2
less/common/mixins/header-background.less
View File

@@ -6,7 +6,7 @@
right: 0;
z-index: @zindex-header;
border-bottom: 1px solid @control-bg;
.transition(~"box-shadow 0.2s, -webkit-transform 0.2s");
transition: box-shadow 0.2s, transform 0.2s;
@media @phone {
height: @header-height-phone;

31
less/common/mixins/vendor-prefixes.less
View File

@@ -6,27 +6,34 @@
// Animations
// These remain for backwards compatibility with existing styles.
/** @deprecated */
.animation(@animation) {
animation: @animation;
}
/** @deprecated */
.animation-name(@name) {
animation-name: @name;
}
.animation-duration(@duration) {
animation-duration: @duration;
}
/** @deprecated */
.animation-timing-function(@timing-function) {
animation-timing-function: @timing-function;
}
/** @deprecated */
.animation-delay(@delay) {
animation-delay: @delay;
}
/** @deprecated */
.animation-iteration-count(@iteration-count) {
animation-iteration-count: @iteration-count;
}
/** @deprecated */
.animation-direction(@direction) {
animation-direction: @direction;
}
/** @deprecated */
.animation-fill-mode(@fill-mode) {
animation-fill-mode: @fill-mode;
}
@@ -34,6 +41,7 @@
// Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden`
/** @deprecated */
.backface-visibility(@visibility) {
// Safari
-webkit-backface-visibility: @visibility;
@@ -42,17 +50,20 @@
// Drop shadows
// These remain for backwards compatibility with existing styles.
/** @deprecated */
.box-shadow(@shadow) {
box-shadow: @shadow;
}
// Box sizing
// These remain for backwards compatibility with existing styles.
/** @deprecated */
.box-sizing(@boxmodel) {
box-sizing: @boxmodel;
}
// CSS3 Content Columns
/** @deprecated */
.content-columns(@column-count; @column-gap: @grid-gutter-width) {
// Safari
-webkit-column-count: @column-count;
@@ -63,6 +74,7 @@
}
// Optional hyphenation
/** @deprecated */
.hyphens(@mode: auto) {
word-wrap: break-word;
// Safari
@@ -81,63 +93,82 @@
// Transformations
// These remain for backwards compatibility with existing styles.
/** @deprecated */
.scale(@ratio) {
transform: scale(@ratio);
}
/** @deprecated */
.scale(@ratioX; @ratioY) {
transform: scale(@ratioX, @ratioY);
}
/** @deprecated */
.scaleX(@ratio) {
transform: scaleX(@ratio);
}
/** @deprecated */
.scaleY(@ratio) {
transform: scaleY(@ratio);
}
/** @deprecated */
.skew(@x; @y) {
transform: skewX(@x) skewY(@y);
}
/** @deprecated */
.translate(@x; @y) {
transform: translate(@x, @y);
}
/** @deprecated */
.translate3d(@x; @y; @z) {
transform: translate3d(@x, @y, @z);
}
/** @deprecated */
.rotate(@degrees) {
transform: rotate(@degrees);
}
/** @deprecated */
.rotateX(@degrees) {
transform: rotateX(@degrees);
}
/** @deprecated */
.rotateY(@degrees) {
transform: rotateY(@degrees);
}
/** @deprecated */
.perspective(@perspective) {
perspective: @perspective;
}
/** @deprecated */
.perspective-origin(@perspective) {
perspective-origin: @perspective;
}
/** @deprecated */
.transform-origin(@origin) {
transform-origin: @origin;
}
// Transitions
// These remain for backwards compatibility with existing styles.
/** @deprecated */
.transition(@transition) {
transition: @transition;
}
/** @deprecated */
.transition-property(@transition-property) {
transition-property: @transition-property;
}
/** @deprecated */
.transition-delay(@transition-delay) {
transition-delay: @transition-delay;
}
/** @deprecated */
.transition-duration(@transition-duration) {
transition-duration: @transition-duration;
}
/** @deprecated */
.transition-timing-function(@timing-function) {
transition-timing-function: @timing-function;
}
/** @deprecated */
.transition-transform(@transition) {
transition: transform @transition;
}

4
less/common/scaffolding.less
View File

@@ -2,7 +2,7 @@
&,
&:before,
&:after {
.box-sizing(border-box);
box-sizing: border-box;
}
}
@@ -114,7 +114,7 @@ input[type="search"] {
.fade {
opacity: 0;
.transition(opacity .15s linear);
transition: opacity .15s linear;
&.in {
opacity: 1;
}