Darren/dpaste
1
0
Fork 0
mirror of https://github.com/DarrenOfficial/dpaste.git synced 2024-11-15 08:02:54 +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 { body {
min-width: 800px; // FIXME: MOBILE
font-family: $baseFont; font-family: $baseFont;
font-weight: $baseFontRegular; font-weight: $baseFontRegular;
@ -66,8 +65,8 @@ body[data-platform=mac] .platform-win { display: none; }
transition: max-height .15s ease-in; transition: max-height .15s ease-in;
form { form {
@include boxPadding(20px, 20px);
display: block; display: block;
padding: 20px $boxPadding;
} }
.btn { .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 // Vertical dotted separtor
@mixin separator($color: white, $margin: 4px) { @mixin separator($color: white, $margin: 4px) {
width: 0; width: 0;

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

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

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

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

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

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

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

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

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

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

3
client/scss/dpaste.scss
View file

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