From c708b68c0a9f3e1e47440ad79591b2b50fdce931 Mon Sep 17 00:00:00 2001 From: "Anantachai Saothong (Manta)" Date: Sat, 30 Sep 2017 16:32:31 +0700 Subject: [PATCH] Added go-to-menu floating button to the static site --- docs/icon-menu.svg | 4 ++++ docs/index.css | 19 +++++++++++++++++++ docs/index.html | 16 +++++++++++++++- edge/reviseDocumentation.js | 2 +- 4 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 docs/icon-menu.svg diff --git a/docs/icon-menu.svg b/docs/icon-menu.svg new file mode 100644 index 0000000..3521f19 --- /dev/null +++ b/docs/icon-menu.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs/index.css b/docs/index.css index d6cd39b..73843a7 100644 --- a/docs/index.css +++ b/docs/index.css @@ -423,6 +423,21 @@ label, input[type=checkbox] { padding: 0; } +#go-to-menu { + display: none; + position: fixed; + background: #D50000; + bottom: 28px; + right: 28px; + width: 56px; + height: 56px; + border-radius: 50%; + align-items: center; + justify-content: center; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); + cursor: pointer; +} + @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) { main { padding-bottom: 2rem; @@ -448,4 +463,8 @@ label, input[type=checkbox] { display: block; width: auto; } + + #go-to-menu { + display: flex; + } } diff --git a/docs/index.html b/docs/index.html index 56b6716..31a17bd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -151,7 +151,7 @@

Formatting options

The below is a JSON containing the default formatting options. The prefix stylusSupremacy. was added since version 2.4, and because of that, passing .vscode/settings.json as an argument of --options is possible, but you can omit them for backward compatibility.

- {
  "stylusSupremacy.insertColons": true,
  "stylusSupremacy.insertSemicolons": true,
  "stylusSupremacy.insertBraces": true,
  "stylusSupremacy.insertNewLineAroundImports": true,
  "stylusSupremacy.insertNewLineAroundBlocks": true,
  "stylusSupremacy.insertNewLineAroundProperties": false,
  "stylusSupremacy.insertNewLineAroundOthers": false,
  "stylusSupremacy.insertNewLineBetweenSelectors": false,
  "stylusSupremacy.insertSpaceBeforeComment": true,
  "stylusSupremacy.insertSpaceAfterComment": true,
  "stylusSupremacy.insertSpaceAfterComma": true,
  "stylusSupremacy.insertSpaceInsideParenthesis": false,
  "stylusSupremacy.insertParenthesisAfterNegation": false,
  "stylusSupremacy.insertParenthesisAroundIfCondition": true,
  "stylusSupremacy.insertNewLineBeforeElse": false,
  "stylusSupremacy.insertLeadingZeroBeforeFraction": true,
  "stylusSupremacy.tabStopChar": "\t",
  "stylusSupremacy.newLineChar": "\n",
  "stylusSupremacy.quoteChar": "'",
  "stylusSupremacy.sortProperties": false,
  "stylusSupremacy.alwaysUseImport": false,
  "stylusSupremacy.alwaysUseNot": false,
  "stylusSupremacy.alwaysUseAtBlock": false,
  "stylusSupremacy.alwaysUseExtends": false,
  "stylusSupremacy.alwaysUseNoneOverZero": false,
  "stylusSupremacy.alwaysUseZeroWithoutUnit": false,
  "stylusSupremacy.reduceMarginAndPaddingValues": false
}

insertColons= true: boolean

Insert or remove a colon between a property name and its value.

true
false
.class1 {
  background: red;
}
.class1 {
  background red;
}
true
.class1 {
  background: red;
}
false
.class1 {
  background red;
}

insertSemicolons= true: boolean

Insert or remove a semi-colon after a property value, a variable declaration, a variable assignment and a mixin/function call.

true
false
.class1 {
  background: red;
}
.class1 {
  background: red
}
true
.class1 {
  background: red;
}
false
.class1 {
  background: red
}

insertBraces= true: boolean

Insert or remove a pair of curly braces where they are supposed to be. Note that this option does not affect @block construction, see alwaysUseAtBlock.

true
false
.class1 {
  background: red;
}
.class1
  background: red;
true
.class1 {
  background: red;
}
false
.class1
  background: red;

insertNewLineAroundImports= true: true | false | "root" | "nested"

Insert a new-line around a group of @import/@require(s).

Only apply to imports outside a block when set to "root", or only apply to imports inside a block when set to "nested".

Check the detailed examples below.

insertNewLineAroundBlocks= true: true | false | "root" | "nested"

Insert a new-line around blocks.

Only apply to top-level blocks when set to "root", or only apply to nested blocks when set to "nested".

Check the detailed examples below.

insertNewLineAroundProperties= false: boolean

Insert a new-line around a group of CSS properties.

Unlike insertNewLineAroundBlocks and insertNewLineAroundOthers, this option cannot be set to "root" nor "nested" because CSS properties cannot be placed at the top level.

Check the detailed examples below.

insertNewLineAroundOthers= false: true | false | "root" | "nested"

Insert a new-line around a group of non-properties, non-imports and non-blocks.

Only apply to others outside a block when set to "root", or only apply to others inside a block when set to "nested".

Check the detailed examples below.

insertNewLineBetweenSelectors= false: boolean

Insert or remove a new-line between selectors.

true
false
.class1,
.class2 {
  background: red;
}
.class1, .class2 {
  background: red;
}
true
.class1,
.class2 {
  background: red;
}
false
.class1, .class2 {
  background: red;
}

insertSpaceBeforeComment= true: boolean

Insert or remove a white-space before a comment.

true
false
.class1 {
  background: red; // comment
}
.class1 {
  background: red;// comment
}
true
.class1 {
  background: red; // comment
}
false
.class1 {
  background: red;// comment
}

insertSpaceAfterComment= true: boolean

Insert or remove a white-space after a comment.

true
false
.class1 {
  background: red; // comment
}
.class1 {
  background: red; //comment
}
true
.class1 {
  background: red; // comment
}
false
.class1 {
  background: red; //comment
}

insertSpaceAfterComma= true: boolean

Insert or remove a white-space after a comma.

true
false
mixin(a, b) {
  margin: a b;
}
mixin(a,b) {
  margin: a b;
}
true
mixin(a, b) {
  margin: a b;
}
false
mixin(a,b) {
  margin: a b;
}

insertSpaceInsideParenthesis= false: boolean

Insert or remove a white-space after an open parenthesis and before a close parenthesis.

true
false
mixin( a, b ) {
  margin: a b;
}
mixin(a, b) {
  margin: a b;
}
true
mixin( a, b ) {
  margin: a b;
}
false
mixin(a, b) {
  margin: a b;
}

insertParenthesisAfterNegation= false: boolean

Insert a pair of parentheses or a white-space after a negation operator. This does nothing if a pair of parentheses is already after the negation operator.

true
false
.class1 {
  top: -(10px);
  left: -(10px);
}
.class1 {
  top: - 10px;
  left: -(10px);
}
true
.class1 {
  top: -(10px);
  left: -(10px);
}
false
.class1 {
  top: - 10px;
  left: -(10px);
}

insertParenthesisAroundIfCondition= true: boolean

Insert or remove a pair of parentheses around if-condition.

true
false
if ((a > b)) {
  background: red;
}
if (a > b) {
  background: red;
}
true
if ((a > b)) {
  background: red;
}
false
if (a > b) {
  background: red;
}

insertNewLineBeforeElse= false: boolean

Insert or remove a new-line before else keyword.

true
false
if ((a > b)) {
  background: red;
}
else {
  background: blue;
}
if ((a > b)) {
  background: red;
} else {
  background: blue;
}
true
if ((a > b)) {
  background: red;
}
else {
  background: blue;
}
false
if ((a > b)) {
  background: red;
} else {
  background: blue;
}

insertLeadingZeroBeforeFraction= true: boolean

Insert or remove a zero before a number that between 1 and 0.

true
false
.class1 {
  margin: 0.5px;
}
.class1 {
  margin: .5px;
}
true
.class1 {
  margin: 0.5px;
}
false
.class1 {
  margin: .5px;
}

tabStopChar= "\t": string

Represent an indentation. You may change this to any sequence of white-spaces.

This option is not available in the Visual Studio Code extension.

newLineChar= "\n": "\n" | "\r\n"

Represent a new-line character. You may want to change this to "\r\n" for Microsoft Windows.

This option is not available in the Visual Studio Code extension.

quoteChar= "'": "'" | "\""

Represent a quote character that is used to begin and terminate a string. You must choose either a single-quote or a double-quote.

"'"
"\""
.class1 {
  font-family: 'Open Sans';
}
.class1 {
  font-family: "Open Sans";
}
"'"
.class1 {
  font-family: 'Open Sans';
}
"\""
.class1 {
  font-family: "Open Sans";
}

sortProperties= false: false | "alphabetical" | "grouped" | array<string>

Can be either false for not sorting, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint and nib -- click here to show the full list of sorted properties, or an array of property names that defines the property order, for example ["color", "background", "display"].

false
"alphabetical"
.class1 {
  background: red;
  display: block;
  color: white;
}
.class1 {
  background: red;
  color: white;
  display: block;
}
false
.class1 {
  background: red;
  display: block;
  color: white;
}
"alphabetical"
.class1 {
  background: red;
  color: white;
  display: block;
}
"grouped"
["color", "background", "display"]
.class1 {
  display: block;
  background: red;
  color: white;
}
.class1 {
  color: white;
  background: red;
  display: block;
}
"grouped"
.class1 {
  display: block;
  background: red;
  color: white;
}
["color", "background", "display"]
.class1 {
  color: white;
  background: red;
  display: block;
}

alwaysUseImport= false: boolean

Replace @require with @import, or do nothing.

true
false
@import './file.styl';
@require './file.styl';
true
@import './file.styl';
false
@require './file.styl';

alwaysUseNot= false: boolean

Replace ! operator with not keyword, or vice versa.

true
false
.class1 {
  if (not condition) {
    background: red;
  }
}
.class1 {
  if (!condition) {
    background: red;
  }
}
true
.class1 {
  if (not condition) {
    background: red;
  }
}
false
.class1 {
  if (!condition) {
    background: red;
  }
}

alwaysUseAtBlock= false: boolean

Replace an increased-indent at-block construction with an explicit one with @block keyword or vice versa.

Note that this option does not incorporate insertBraces option.

true
false
block = @block {
  background: red;
}
block =
  background: red;
true
block = @block {
  background: red;
}
false
block =
  background: red;

alwaysUseExtends= false: boolean

Convert @extend keyword to @extends keyword, or vice versa.

true
false
.class1 {
  background: red;
}

.class2 {
  @extends .class1;
  color: white;
}
.class1 {
  background: red;
}

.class2 {
  @extend .class1;
  color: white;
}
true
.class1 {
  background: red;
}

.class2 {
  @extends .class1;
  color: white;
}
false
.class1 {
  background: red;
}

.class2 {
  @extend .class1;
  color: white;
}

alwaysUseNoneOverZero= false: boolean

Replace 0 (regardless of its unit) with none for border and outline properties, or do nothing.

true
false
.class1 {
  border: none;
}
.class1 {
  border: 0px;
}
true
.class1 {
  border: none;
}
false
.class1 {
  border: 0px;
}

alwaysUseZeroWithoutUnit= false: boolean

Replace 0 (regardless of its unit) with 0 (without units), or do nothing.

true
false
.class1 {
  margin: 0;
}
.class1 {
  margin: 0px;
}
true
.class1 {
  margin: 0;
}
false
.class1 {
  margin: 0px;
}

reduceMarginAndPaddingValues= false: boolean

Reduce margin and padding duplicate values by converting margin x x x x to margin x, margin x y x y to margin x y, and margin x y y y to margin x y y where x, y is a unique property value.

true
false
.class1 {
  margin: 0px;
  padding: 0px 5px;
}
.class1 {
  margin: 0px 0px;
  padding: 0px 5px 0px 5px;
}
true
.class1 {
  margin: 0px;
  padding: 0px 5px;
}
false
.class1 {
  margin: 0px 0px;
  padding: 0px 5px 0px 5px;
}
+ {
  "stylusSupremacy.insertColons": true,
  "stylusSupremacy.insertSemicolons": true,
  "stylusSupremacy.insertBraces": true,
  "stylusSupremacy.insertNewLineAroundImports": true,
  "stylusSupremacy.insertNewLineAroundBlocks": true,
  "stylusSupremacy.insertNewLineAroundProperties": false,
  "stylusSupremacy.insertNewLineAroundOthers": false,
  "stylusSupremacy.insertNewLineBetweenSelectors": false,
  "stylusSupremacy.insertSpaceBeforeComment": true,
  "stylusSupremacy.insertSpaceAfterComment": true,
  "stylusSupremacy.insertSpaceAfterComma": true,
  "stylusSupremacy.insertSpaceInsideParenthesis": false,
  "stylusSupremacy.insertParenthesisAfterNegation": false,
  "stylusSupremacy.insertParenthesisAroundIfCondition": true,
  "stylusSupremacy.insertNewLineBeforeElse": false,
  "stylusSupremacy.insertLeadingZeroBeforeFraction": true,
  "stylusSupremacy.tabStopChar": "\t",
  "stylusSupremacy.newLineChar": "\n",
  "stylusSupremacy.quoteChar": "'",
  "stylusSupremacy.sortProperties": false,
  "stylusSupremacy.alwaysUseImport": false,
  "stylusSupremacy.alwaysUseNot": false,
  "stylusSupremacy.alwaysUseAtBlock": false,
  "stylusSupremacy.alwaysUseExtends": false,
  "stylusSupremacy.alwaysUseNoneOverZero": false,
  "stylusSupremacy.alwaysUseZeroWithoutUnit": false,
  "stylusSupremacy.reduceMarginAndPaddingValues": false
}

insertColons= true: boolean

Insert or remove a colon between a property name and its value.

true
false
.class1 {
  background: red;
}
.class1 {
  background red;
}
true
.class1 {
  background: red;
}
false
.class1 {
  background red;
}

insertSemicolons= true: boolean

Insert or remove a semi-colon after a property value, a variable declaration, a variable assignment and a mixin/function call.

true
false
.class1 {
  background: red;
}
.class1 {
  background: red
}
true
.class1 {
  background: red;
}
false
.class1 {
  background: red
}

insertBraces= true: boolean

Insert or remove a pair of curly braces where they are supposed to be. Note that this option does not affect @block construction, see alwaysUseAtBlock.

true
false
.class1 {
  background: red;
}
.class1
  background: red;
true
.class1 {
  background: red;
}
false
.class1
  background: red;

insertNewLineAroundImports= true: true | false | "root" | "nested"

Insert a new-line around a group of @import/@require(s).

Only apply to imports outside a block when set to "root", or only apply to imports inside a block when set to "nested".

Check the detailed examples below.

insertNewLineAroundBlocks= true: true | false | "root" | "nested"

Insert a new-line around blocks.

Only apply to top-level blocks when set to "root", or only apply to nested blocks when set to "nested".

Check the detailed examples below.

insertNewLineAroundProperties= false: boolean

Insert a new-line around a group of CSS properties.

Unlike insertNewLineAroundBlocks and insertNewLineAroundOthers, this option cannot be set to "root" nor "nested" because CSS properties cannot be placed at the top level.

Check the detailed examples below.

insertNewLineAroundOthers= false: true | false | "root" | "nested"

Insert a new-line around a group of non-properties, non-imports and non-blocks.

Only apply to others outside a block when set to "root", or only apply to others inside a block when set to "nested".

Check the detailed examples below.

insertNewLineBetweenSelectors= false: boolean

Insert or remove a new-line between selectors.

true
false
.class1,
.class2 {
  background: red;
}
.class1, .class2 {
  background: red;
}
true
.class1,
.class2 {
  background: red;
}
false
.class1, .class2 {
  background: red;
}

insertSpaceBeforeComment= true: boolean

Insert or remove a white-space before a comment.

true
false
.class1 {
  background: red; // comment
}
.class1 {
  background: red;// comment
}
true
.class1 {
  background: red; // comment
}
false
.class1 {
  background: red;// comment
}

insertSpaceAfterComment= true: boolean

Insert or remove a white-space after a comment.

true
false
.class1 {
  background: red; // comment
}
.class1 {
  background: red; //comment
}
true
.class1 {
  background: red; // comment
}
false
.class1 {
  background: red; //comment
}

insertSpaceAfterComma= true: boolean

Insert or remove a white-space after a comma.

true
false
mixin(a, b) {
  margin: a b;
}
mixin(a,b) {
  margin: a b;
}
true
mixin(a, b) {
  margin: a b;
}
false
mixin(a,b) {
  margin: a b;
}

insertSpaceInsideParenthesis= false: boolean

Insert or remove a white-space after an open parenthesis and before a close parenthesis.

true
false
mixin( a, b ) {
  margin: a b;
}
mixin(a, b) {
  margin: a b;
}
true
mixin( a, b ) {
  margin: a b;
}
false
mixin(a, b) {
  margin: a b;
}

insertParenthesisAfterNegation= false: boolean

Insert a pair of parentheses or a white-space after a negation operator. This does nothing if a pair of parentheses is already after the negation operator.

true
false
.class1 {
  top: -(10px);
  left: -(10px);
}
.class1 {
  top: - 10px;
  left: -(10px);
}
true
.class1 {
  top: -(10px);
  left: -(10px);
}
false
.class1 {
  top: - 10px;
  left: -(10px);
}

insertParenthesisAroundIfCondition= true: boolean

Insert or remove a pair of parentheses around if-condition.

true
false
if ((a > b)) {
  background: red;
}
if (a > b) {
  background: red;
}
true
if ((a > b)) {
  background: red;
}
false
if (a > b) {
  background: red;
}

insertNewLineBeforeElse= false: boolean

Insert or remove a new-line before else keyword.

true
false
if ((a > b)) {
  background: red;
}
else {
  background: blue;
}
if ((a > b)) {
  background: red;
} else {
  background: blue;
}
true
if ((a > b)) {
  background: red;
}
else {
  background: blue;
}
false
if ((a > b)) {
  background: red;
} else {
  background: blue;
}

insertLeadingZeroBeforeFraction= true: boolean

Insert or remove a zero before a number that between 1 and 0.

true
false
.class1 {
  margin: 0.5px;
}
.class1 {
  margin: .5px;
}
true
.class1 {
  margin: 0.5px;
}
false
.class1 {
  margin: .5px;
}

tabStopChar= "\t": string

Represent an indentation. You may change this to any sequence of white-spaces.

This option is not available in the Visual Studio Code extension.

newLineChar= "\n": "\n" | "\r\n"

Represent a new-line character. You may want to change this to "\r\n" for Microsoft Windows.

This option is not available in the Visual Studio Code extension.

quoteChar= "'": "'" | "\""

Represent a quote character that is used to begin and terminate a string. You must choose either a single-quote or a double-quote.

"'"
"\""
.class1 {
  font-family: 'Open Sans';
}
.class1 {
  font-family: "Open Sans";
}
"'"
.class1 {
  font-family: 'Open Sans';
}
"\""
.class1 {
  font-family: "Open Sans";
}

sortProperties= false: false | "alphabetical" | "grouped" | array<string>

Can be either false for not sorting, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint and nib -- click here to show the full list of sorted properties, or an array of property names that defines the property order, for example ["color", "background", "display"].

false
"alphabetical"
.class1 {
  background: red;
  display: block;
  color: white;
}
.class1 {
  background: red;
  color: white;
  display: block;
}
false
.class1 {
  background: red;
  display: block;
  color: white;
}
"alphabetical"
.class1 {
  background: red;
  color: white;
  display: block;
}
"grouped"
["color", "background", "display"]
.class1 {
  display: block;
  background: red;
  color: white;
}
.class1 {
  color: white;
  background: red;
  display: block;
}
"grouped"
.class1 {
  display: block;
  background: red;
  color: white;
}
["color", "background", "display"]
.class1 {
  color: white;
  background: red;
  display: block;
}

alwaysUseImport= false: boolean

Replace @require with @import, or do nothing.

true
false
@import './file.styl';
@require './file.styl';
true
@import './file.styl';
false
@require './file.styl';

alwaysUseNot= false: boolean

Replace ! operator with not keyword, or vice versa.

true
false
.class1 {
  if (not condition) {
    background: red;
  }
}
.class1 {
  if (!condition) {
    background: red;
  }
}
true
.class1 {
  if (not condition) {
    background: red;
  }
}
false
.class1 {
  if (!condition) {
    background: red;
  }
}

alwaysUseAtBlock= false: boolean

Replace an increased-indent at-block construction with an explicit one with @block keyword or vice versa.

Note that this option does not incorporate insertBraces option.

true
false
block = @block {
  background: red;
}
block =
  background: red;
true
block = @block {
  background: red;
}
false
block =
  background: red;

alwaysUseExtends= false: boolean

Convert @extend keyword to @extends keyword, or vice versa.

true
false
.class1 {
  background: red;
}

.class2 {
  @extends .class1;
  color: white;
}
.class1 {
  background: red;
}

.class2 {
  @extend .class1;
  color: white;
}
true
.class1 {
  background: red;
}

.class2 {
  @extends .class1;
  color: white;
}
false
.class1 {
  background: red;
}

.class2 {
  @extend .class1;
  color: white;
}

alwaysUseNoneOverZero= false: boolean

Replace 0 (regardless of its unit) with none for border and outline properties, or do nothing.

true
false
.class1 {
  border: none;
}
.class1 {
  border: 0px;
}
true
.class1 {
  border: none;
}
false
.class1 {
  border: 0px;
}

alwaysUseZeroWithoutUnit= false: boolean

Replace 0 (regardless of its unit) with 0 (without units), or do nothing.

true
false
.class1 {
  margin: 0;
}
.class1 {
  margin: 0px;
}
true
.class1 {
  margin: 0;
}
false
.class1 {
  margin: 0px;
}

reduceMarginAndPaddingValues= false: boolean

Reduce margin and padding duplicate values by converting margin x x x x to margin x, margin x y x y to margin x y, and margin x y y y to margin x y y where x, y is a unique property value.

true
false
.class1 {
  margin: 0px;
  padding: 0px 5px;
}
.class1 {
  margin: 0px 0px;
  padding: 0px 5px 0px 5px;
}
true
.class1 {
  margin: 0px;
  padding: 0px 5px;
}
false
.class1 {
  margin: 0px 0px;
  padding: 0px 5px 0px 5px;
}

insertNewLineAroundImports, insertNewLineAroundBlocks, insertNewLineAroundProperties and insertNewLineAroundOthers are meant to be configured together. First of all, you have to understand what is what.

@@ -443,5 +443,19 @@

Atom package

This package only supports reading formatting options from .stylintrc file and in-package Format on Save setting. Please find an example of .stylintrc file in Stylint compatibility section.

+ \ No newline at end of file diff --git a/edge/reviseDocumentation.js b/edge/reviseDocumentation.js index a9509c2..5290b5e 100644 --- a/edge/reviseDocumentation.js +++ b/edge/reviseDocumentation.js @@ -88,7 +88,7 @@ function createFormattingDescription() { '' + defaultOptionJSON .replace(/
/g, '\n') - .replace(/^  "(\w+)"/gm, (full, part) => full.replace(part, `${createBreakableWords('stylusSupremacy.' + part)}`)) + .replace(/^  "(\w+)"/gm, (full, part) => full.replace(part, `stylusSupremacy.${createBreakableWords(part)}`)) .replace(/\n/g, '
') + '' )