Skip to content

Commit

Permalink
docs: Added @require to a few theme items
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlaursen
mlaursen committed Jul 12, 2020
1 parent 7b37292 commit 989d0f3
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 54 deletions.
32 changes: 21 additions & 11 deletions packages/documentation/src/constants/sassdoc/form.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2093,9 +2093,19 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-background-color",
description:
"The background color for a switch's track. This is the element that the ball animates left and right on.",
source: "packages/form/src/toggle/_variables.scss#L48-L52",
source: "packages/form/src/toggle/_variables.scss#L50-L54",
requires: [
{ name: "rmd-black-base", type: "variable", packageName: "theme" },
{
name: "rmd-theme-dark-elevation",
type: "variable",
packageName: "theme",
},
{
name: "rmd-theme-dark-elevation-colors",
type: "variable",
packageName: "theme",
},
],
packageName: "form",
type: "Color",
Expand All @@ -2108,7 +2118,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-track-border-radius",
description:
"The border radius to apply to the switch's track. This is the element that the ball animates left and right on.\n",
source: "packages/form/src/toggle/_variables.scss#L57",
source: "packages/form/src/toggle/_variables.scss#L59",
usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2118,7 +2128,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-ball-size": {
name: "rmd-switch-ball-size",
description: "The size of the switch's ball.\n",
source: "packages/form/src/toggle/_variables.scss#L61",
source: "packages/form/src/toggle/_variables.scss#L63",
usedBy: [
{ name: "rmd-switch", type: "mixin", packageName: "form" },
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
Expand All @@ -2132,7 +2142,7 @@ const sassdoc: PackageSassDoc = {
"rmd-switch-ball-border-radius": {
name: "rmd-switch-ball-border-radius",
description: "The border radius for the switch's ball.\n",
source: "packages/form/src/toggle/_variables.scss#L65",
source: "packages/form/src/toggle/_variables.scss#L67",
usedBy: [{ name: "rmd-switch-ball", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2143,7 +2153,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-ball-offset",
description:
"The amount of offset that should be applied to the ball relative to its track. This is really used so the ball can overlap the track a bit to look a bit nicer.\n",
source: "packages/form/src/toggle/_variables.scss#L70",
source: "packages/form/src/toggle/_variables.scss#L72",
usedBy: [
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
{ name: "rmd-switch-ball", type: "mixin", packageName: "form" },
Expand All @@ -2157,7 +2167,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-container-vertical-padding",
description:
"The vertical padding for the switch container. This should generally be large enough so that the ball does not overlap any other elements.\n",
source: "packages/form/src/toggle/_variables.scss#L75",
source: "packages/form/src/toggle/_variables.scss#L77",
usedBy: [
{ name: "rmd-switch-container", type: "mixin", packageName: "form" },
],
Expand All @@ -2170,7 +2180,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-container-horizontal-padding",
description:
"The horizontal padding for the switch container. This should generally be large enough so that the ball does not overlap the label or other elements.",
source: "packages/form/src/toggle/_variables.scss#L81",
source: "packages/form/src/toggle/_variables.scss#L83",
usedBy: [
{ name: "rmd-switch-container", type: "mixin", packageName: "form" },
],
Expand All @@ -2184,7 +2194,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-ball-disabled-color",
description:
"The color to use for the switch's ball when it is toggled on and disabled.",
source: "packages/form/src/toggle/_variables.scss#L88-L94",
source: "packages/form/src/toggle/_variables.scss#L90-L96",
usedBy: [
{ name: "rmd-switch-input", type: "mixin", packageName: "form" },
],
Expand All @@ -2207,7 +2217,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-width",
description:
"The width of the circular progress bar. This will make the progress bar more prominent than the normal circular progress.\n",
source: "packages/form/src/toggle/_variables.scss#L99",
source: "packages/form/src/toggle/_variables.scss#L101",
usedBy: [{ name: "rmd-switch", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand All @@ -2218,7 +2228,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-background-color",
description:
"The background color to use for the switch's ball while the the switch is loading.",
source: "packages/form/src/toggle/_variables.scss#L105",
source: "packages/form/src/toggle/_variables.scss#L107",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
requires: [
{ name: "rmd-white-base", type: "variable", packageName: "theme" },
Expand All @@ -2233,7 +2243,7 @@ const sassdoc: PackageSassDoc = {
name: "rmd-switch-progress-padding",
description:
"The amount of padding to apply to the async switch's progress bar. This will make it so there is some space between the switch's ball and the progress bar.\n",
source: "packages/form/src/toggle/_variables.scss#L110",
source: "packages/form/src/toggle/_variables.scss#L112",
usedBy: [{ name: "react-md-toggle", type: "mixin", packageName: "form" }],
packageName: "form",
type: "Number",
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation/src/constants/sassdoc/list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ const sassdoc: PackageSassDoc = {
"rmd-list-item": {
name: "rmd-list-item",
description: "Creates all the styles for a list item.\n",
source: "packages/list/src/_mixins.scss#L148-L240",
source: "packages/list/src/_mixins.scss#L148-L242",
usedBy: [
{ name: "react-md-list", type: "mixin", packageName: "list" },
{ name: "rmd-tree-item", type: "mixin", packageName: "tree" },
Expand Down Expand Up @@ -425,13 +425,13 @@ const sassdoc: PackageSassDoc = {
packageName: "list",
code: "@mixin rmd-list-item { … }",
sourceCode:
'@mixin rmd-list-item {\n @include rmd-list-item-base;\n\n &--clickable {\n @include rmd-utils-hide-focus-outline;\n @include rmd-states-surface;\n }\n\n &[aria-disabled] {\n @include rmd-theme(color, text-disabled-on-background);\n }\n\n &--link {\n color: inherit;\n text-decoration: none;\n }\n\n &--medium {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-medium-height)\n );\n }\n\n &--large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-large-height)\n );\n }\n\n &--extra-large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-extra-large-height)\n );\n }\n\n &--three-lines {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-three-line-height)\n );\n\n .rmd-list-item__text--secondary {\n @include rmd-typography-line-clamp;\n @include rmd-list-theme(max-height, item-secondary-three-line-height);\n\n line-height: $rmd-list-item-secondary-text-line-height;\n white-space: normal;\n }\n }\n\n &--dense {\n @include rmd-list-item-dense-theme;\n }\n\n &__text {\n @include rmd-typography-text-overflow-ellipsis;\n @include rmd-utils-rtl {\n margin-left: auto;\n }\n\n display: block;\n flex-grow: 1;\n // this is so it overlays the background colors from the interaction states\n z-index: 1;\n\n &--secondary {\n @include rmd-theme(color, text-secondary-on-background);\n }\n }\n\n &__addon {\n flex-shrink: 0;\n\n &--top {\n align-self: flex-start;\n }\n\n &--bottom {\n align-self: flex-end;\n }\n\n &--before {\n // this should only be added on the first icon in the list item since it\'s the only\n // one that should match the "keyline" of the app. The right icon/avatars should\n // have the existing text icon spacing.\n @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));\n }\n\n &--avatar-before {\n @include rmd-list-item-addon-spacing(rmd-avatar-theme-var(size));\n }\n\n &--media {\n @include rmd-icon-theme-update-var(\n text-spacing,\n rmd-list-theme-var(media-spacing)\n );\n @include rmd-list-theme(width, media-size);\n }\n\n &--media-large {\n @include rmd-list-theme-update-var(\n media-size,\n rmd-list-theme-var(media-large-size)\n );\n }\n }\n}\n',
'@mixin rmd-list-item {\n @include rmd-list-item-base;\n\n &--clickable {\n @include rmd-utils-hide-focus-outline;\n @include rmd-states-surface;\n }\n\n &--disabled {\n @include rmd-theme(color, text-disabled-on-background);\n\n pointer-events: none;\n }\n\n &--link {\n color: inherit;\n text-decoration: none;\n }\n\n &--medium {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-medium-height)\n );\n }\n\n &--large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-large-height)\n );\n }\n\n &--extra-large {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-extra-large-height)\n );\n }\n\n &--three-lines {\n @include rmd-list-theme-update-var(\n item-height,\n rmd-list-theme-var(item-three-line-height)\n );\n\n .rmd-list-item__text--secondary {\n @include rmd-typography-line-clamp;\n @include rmd-list-theme(max-height, item-secondary-three-line-height);\n\n line-height: $rmd-list-item-secondary-text-line-height;\n white-space: normal;\n }\n }\n\n &--dense {\n @include rmd-list-item-dense-theme;\n }\n\n &__text {\n @include rmd-typography-text-overflow-ellipsis;\n @include rmd-utils-rtl {\n margin-left: auto;\n }\n\n display: block;\n flex-grow: 1;\n // this is so it overlays the background colors from the interaction states\n z-index: 1;\n\n &--secondary {\n @include rmd-theme(color, text-secondary-on-background);\n }\n }\n\n &__addon {\n flex-shrink: 0;\n\n &--top {\n align-self: flex-start;\n }\n\n &--bottom {\n align-self: flex-end;\n }\n\n &--before {\n // this should only be added on the first icon in the list item since it\'s the only\n // one that should match the "keyline" of the app. The right icon/avatars should\n // have the existing text icon spacing.\n @include rmd-list-item-addon-spacing(rmd-icon-theme-var(size));\n }\n\n &--avatar-before {\n @include rmd-list-item-addon-spacing(rmd-avatar-theme-var(size));\n }\n\n &--media {\n @include rmd-icon-theme-update-var(\n text-spacing,\n rmd-list-theme-var(media-spacing)\n );\n @include rmd-list-theme(width, media-size);\n }\n\n &--media-large {\n @include rmd-list-theme-update-var(\n media-size,\n rmd-list-theme-var(media-large-size)\n );\n }\n }\n}\n',
type: "mixin",
},
"rmd-list-subheader": {
name: "rmd-list-subheader",
description: "Creates the styles for a subheader within a list.\n",
source: "packages/list/src/_mixins.scss#L243-L255",
source: "packages/list/src/_mixins.scss#L245-L257",
usedBy: [{ name: "react-md-list", type: "mixin", packageName: "list" }],
requires: [
{ name: "rmd-typography", type: "mixin", packageName: "typography" },
Expand All @@ -448,7 +448,7 @@ const sassdoc: PackageSassDoc = {
"react-md-list": {
name: "react-md-list",
description: "Creats all the styles for the list package.\n",
source: "packages/list/src/_mixins.scss#L258-L272",
source: "packages/list/src/_mixins.scss#L260-L274",
usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }],
requires: [
{
Expand Down
Loading

0 comments on commit 989d0f3

Please sign in to comment.