Darren/dpaste
1
0
Fork 0
mirror of https://github.com/DarrenOfficial/dpaste.git synced 2024-12-23 23:23:06 +11:00
Code Issues Projects Releases Packages Wiki Activity

Make padding resuable.

Browse source
This commit is contained in:
Martin Mahner 2018-04-13 18:44:33 +02:00
parent bc7f12f377
commit 6810f86f70
8 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/scss/_globals.scss
View file

@ -1,5 +1,4 @@
body {
min-width: 800px; // FIXME: MOBILE
font-family: $baseFont;
font-weight: $baseFontRegular;
@ -66,8 +65,8 @@ body[data-platform=mac] .platform-win { display: none; }
transition: max-height .15s ease-in;
form {
@include boxPadding(20px, 20px);
display: block;
padding: 20px $boxPadding;
}
.btn {

5
client/scss/_mixins.scss
View file

@ -1,4 +1,9 @@
// Global padding across all first level elements
@mixin boxPadding($paddingTop: 20px, $paddingBottom: 20px) {
padding: $paddingTop $boxPadding $paddingBottom $boxPadding;
}
// Vertical dotted separtor
@mixin separator($color: white, $margin: 4px) {
width: 0;

8
client/scss/components/_code.scss
View file

@ -8,22 +8,24 @@
h2 {
margin: 0;
padding: 20px $boxPadding 20px $boxPadding;
@include boxPadding(20px, 20px);
color: $codeTextColor;
font-weight: $baseFontDemiBold;
font-size: 14px;
}
.snippet-code {
@include boxPadding(10px, 10px);
background-color: $codeDiffBgColor;
padding: 10px $boxPadding 10px $boxPadding;
white-space: pre;
font-size: 12px;
}
}
.snippet-code {
padding: 20px $boxPadding;
@include boxPadding(20px, 20px);
font-family: $codeFont;
font-size: 13px;

5
client/scss/components/_form.scss
View file

@ -48,7 +48,8 @@
}
.options {
padding: 0 $boxPadding;
@include boxPadding(0, 0);
height: 60px;
display: flex;
align-items: center;
@ -65,7 +66,7 @@
}
.content {
padding: 20px $boxPadding;
@include boxPadding(20px, 20px);
textarea {
padding: 20px;

6
client/scss/components/_header.scss
View file

@ -1,5 +1,5 @@
header {
padding: 0 $boxPadding;
@include boxPadding(0, 0);
height: 60px;
display: flex;
@ -61,8 +61,8 @@ header {
ul#snippetOptions {
@include boxPadding(0, 0);
margin: 0;
padding: 0 $boxPadding;
height: 40px;
background-color: $metaBgColor;
@ -123,7 +123,7 @@ ul#snippetOptions {
.snippet-message {
margin: 20px $boxPadding 0 $boxPadding;
@include boxPadding(20px, 0);
padding: 8px 20px;
max-width: 660px;

4
client/scss/components/_history.scss
View file

@ -2,8 +2,8 @@
.history-header {
@include boxPadding(15px, 15px);
margin: 0;
padding: 15px $boxPadding;
color: $textColor;
font-size: 14px;
@ -29,7 +29,7 @@
}
.history-empty {
padding: 40px $boxPadding;
@include boxPadding(40px, 40px);
color: $textColor;
}

3
client/scss/components/_text.scss
View file

@ -2,8 +2,7 @@
// Generic content pages such as About/404/500
// and base styles for text based lexer.
article {
padding: 0 $boxPadding 40px $boxPadding;
padding-top: 30px;
@include boxPadding(30px, 40px);
font-size: 16px;
font-weight: $baseFontRegular;

3
client/scss/dpaste.scss
View file

@ -73,8 +73,9 @@ $columnWidth: 60px;
$columnGap: 20px;
$boxPadding: 30px; // Left/Right padding of all views
$mobileBoxPadding: 20px;
$mobileBoxPadding: 10px;
$mobileBreakpoint: 600px;
/* -----------------------------------------------------------------------------
Imports