Refactoring margin and padding mixins
This commit is contained in:
parent
6c3589fc51
commit
4158e67c8d
12 changed files with 46 additions and 32 deletions
|
@ -2,7 +2,7 @@
|
|||
<h1 class="visually-hidden" i18n>Follows</h1>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
<h2 i18n class="fs-5-5 mb-4 fw-semibold">Followers of {{ instanceName }} ({{ followersPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followersPagination.totalItems === 0">{{ instanceName }} does not have followers.</div>
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col-xl-6 col-md-12">
|
||||
<h2 i18n class="pt-fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
<h2 i18n class="fs-5-5 mb-4 fw-semibold">Subscriptions of {{ instanceName }} ({{ followingsPagination.totalItems }})</h2>
|
||||
|
||||
<div i18n class="no-results" *ngIf="followingsPagination.totalItems === 0">{{ instanceName }} does not have subscriptions.</div>
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.card {
|
||||
@include rfs(2rem, margin);
|
||||
@include margin(2rem);
|
||||
|
||||
flex-basis: 300px;
|
||||
}
|
||||
|
|
|
@ -8,8 +8,8 @@
|
|||
}
|
||||
|
||||
.channel {
|
||||
@include rfs(2rem, padding);
|
||||
@include rfs(2rem 0, margin);
|
||||
@include padding(1.75rem);
|
||||
@include margin(2rem, 0);
|
||||
|
||||
max-width: $max-channels-width;
|
||||
background-color: pvar(--channelBackgroundColor);
|
||||
|
@ -110,10 +110,6 @@ my-subscribe-button {
|
|||
}
|
||||
|
||||
@include on-small-main-col {
|
||||
.channel {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.channel-avatar-row {
|
||||
grid-template-columns: auto auto auto 1fr;
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
<h1 i18n-title [title]="'Created on ' + (account.createdAt | date)">{{ account.displayName }}</h1>
|
||||
|
||||
<my-user-moderation-dropdown
|
||||
class="mx-3" prependActions]="prependModerationActions"
|
||||
class="mx-3" [prependActions]="prependModerationActions"
|
||||
buttonSize="small" [account]="account" [user]="accountUser" placement="bottom-left auto"
|
||||
(userChanged)="onUserChanged()" (userDeleted)="onUserDeleted()"
|
||||
></my-user-moderation-dropdown>
|
||||
|
|
|
@ -109,8 +109,8 @@
|
|||
|
||||
@media screen and (max-width: $mobile-view) {
|
||||
.root {
|
||||
--myFontSize: $font-size-rem-14px;
|
||||
--myGreyFontSize: $font-size-rem-13px;
|
||||
--myFontSize: 14px;
|
||||
--myGreyFontSize: 13px;
|
||||
}
|
||||
|
||||
.links {
|
||||
|
|
|
@ -2,7 +2,7 @@ import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
|
|||
import { CustomPageService } from '@app/shared/shared-main/custom-page'
|
||||
|
||||
@Component({
|
||||
templateUrl: './home.component.html',
|
||||
templateUrl: './home.component.html'
|
||||
})
|
||||
|
||||
export class HomeComponent implements OnInit {
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
@use '_mixins' as *;
|
||||
|
||||
label {
|
||||
@include font-size(1.125rem);
|
||||
@include font-size(18px);
|
||||
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
|
@ -30,7 +30,7 @@ input[type=email] {
|
|||
}
|
||||
|
||||
.alert {
|
||||
@include margin(0, auto, 2rem, auto);
|
||||
@include margin(0, auto, 2rem);
|
||||
}
|
||||
|
||||
.login-form-and-externals {
|
||||
|
|
|
@ -264,10 +264,6 @@
|
|||
width: min-content;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.bottom-owner {
|
||||
padding: 15px;
|
||||
margin-bottom: 30px;
|
||||
|
|
|
@ -4,5 +4,5 @@
|
|||
// Font sizes
|
||||
|
||||
.fs-5-5 {
|
||||
@include font-size(1.125rem);
|
||||
@include font-size(18px);
|
||||
}
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
|
||||
@mixin show-more-description {
|
||||
@include rfs(10px auto 45px, margin);
|
||||
@include margin(10px, auto, 45px);
|
||||
|
||||
color: pvar(--mainColor);
|
||||
cursor: pointer;
|
||||
|
|
|
@ -919,20 +919,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
|
||||
@mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
|
||||
@if $arg2 ==null and $arg3 ==null and $arg4 ==null {
|
||||
@include margin-original($arg1, $arg1, $arg1, $arg1);
|
||||
} @else if $arg3 ==null and $arg4 ==null {
|
||||
@include margin-original($arg1, $arg2, $arg1, $arg2);
|
||||
} @else if $arg4 ==null {
|
||||
@include margin-original($arg1, $arg2, $arg3, $arg2);
|
||||
} @else {
|
||||
@include margin-original($arg1, $arg2, $arg3, $arg4);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
|
||||
@include margin-left($inline-start);
|
||||
@include margin-right($inline-end);
|
||||
@include margin-top($block-start);
|
||||
@include margin-bottom($block-end);
|
||||
}
|
||||
|
||||
@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
|
||||
@include padding-left($inline-start);
|
||||
@include padding-right($inline-end);
|
||||
@include padding-top($block-start);
|
||||
@include padding-bottom($block-end);
|
||||
}
|
||||
|
||||
@mixin margin-left ($value) {
|
||||
@supports (margin-inline-start: $value) {
|
||||
@include rfs($value, margin-inline-start);
|
||||
|
@ -953,6 +958,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
|
||||
@include padding-left($inline-start);
|
||||
@include padding-right($inline-end);
|
||||
@include padding-top($block-start);
|
||||
@include padding-bottom($block-end);
|
||||
}
|
||||
|
||||
|
||||
@mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
|
||||
@if $arg2 ==null and $arg3 ==null and $arg4 ==null {
|
||||
@include padding-original($arg1, $arg1, $arg1, $arg1);
|
||||
} @else if $arg3 ==null and $arg4 ==null {
|
||||
@include padding-original($arg1, $arg2, $arg1, $arg2);
|
||||
} @else if $arg4 ==null {
|
||||
@include padding-original($arg1, $arg2, $arg3, $arg2);
|
||||
} @else {
|
||||
@include padding-original($arg1, $arg2, $arg3, $arg4);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin padding-left ($value) {
|
||||
@supports (padding-inline-start: $value) {
|
||||
@include rfs($value, padding-inline-start);
|
||||
|
|
|
@ -10,9 +10,6 @@ $font-semibold: 600;
|
|||
$font-bold: 700;
|
||||
$line-height-normal: 1.2;
|
||||
|
||||
$font-size-rem-13px: 0.8125rem;
|
||||
$font-size-rem-14px: 0.875rem;
|
||||
|
||||
$grey-background-color: #E5E5E5;
|
||||
$grey-background-hover-color: #EFEFEF;
|
||||
$grey-foreground-color: #585858;
|
||||
|
|
Loading…
Reference in a new issue