Commit 6f0f4467 authored by Ken Hawkins's avatar Ken Hawkins
Browse files

Minor: Fix stack spacing in vf-card, vf-button readme fixes

parent d2e33181
Pipeline #211943 passed with stages
in 8 minutes and 59 seconds
### 2.0.0-alpha.5
* Readme formatting fixes.
### 2.0.0-alpha.4
* Style import fixes for experimental angular support.
......
......@@ -26,7 +26,7 @@ As the `vf-button` is relatively large, depending on the context, you may wish t
As a general rule, the `vf-button` should be left aligned on the page and when used inside a larger component.
When used in conjuction with a single form input, as in [the vf-search component](https://stable.visual-framework.dev/components/vf-search/), the `vf-button` needs to be inline with the input and to the right of it.
When used in conjunction with a single form input, as in [the vf-search component](https://stable.visual-framework.dev/components/vf-search/), the `vf-button` needs to be inline with the input and to the right of it.
When a `vf-button` is used in a banner (e.g. to accept cookies) it needs to follow the content and be right aligned.
......@@ -74,12 +74,10 @@ As of vf-button v2.0.0-alpha.2 vf-button has experimental Angular support.
Depending on the success of this method, we plan to add standardized guidance to the component library and component generator.
#### Usage
Usage:
`<a vf-button href="//embl.org" primary="true" small="true">Hello</a>`
## Install
This component is distributed with npm. After [installing npm](https://www.npmjs.com/get-npm), you can install the `vf-button` with this command.
......
### 2.7.0
* Updates `vf-stack` custom properties to work nicely with `vf-stack` version 3.
### 2.6.2
* Use vf-stack custom property for card text spacing.
......
......@@ -134,7 +134,8 @@
}
.vf-card__subheading {
--vf-stack-margin--custom: #{space(100)};
--vf-stack-margin--custom: #{space(100)}; // fallback for vf-stack prior to version 3
--vf-stack-margin: #{space(100)};
@include set-type(text-heading--5, $custom-margin-bottom: 0, $color: ignore);
......@@ -231,7 +232,7 @@
background-color: var(--vf-card--striped-bg-color, #{color(green--dark)});
color: ui-color(white);
margin: map-get($vf-spacing-map, vf-spacing--400) * -1;
margin-bottom: -1rem;
margin-top: 0;
padding: map-get($vf-spacing-map, vf-spacing--400);
padding-bottom: map-get($vf-spacing-map, vf-spacing--200);
padding-top: .5rem;
......@@ -241,7 +242,8 @@
color: ui-color(white);
&:first-of-type {
--vf-stack-margin--custom: 0;
--vf-stack-margin--custom: 0; // fallback for vf-stack prior to version 3
--vf-stack-margin: 0;
// padding-top: map-get($vf-spacing-map, vf-spacing--400);
}
......@@ -254,7 +256,8 @@
.vf-card__title + .vf-card__text,
.vf-card__heading + .vf-card__text {
--vf-stack-margin--custom: #{space(400)};
--vf-stack-margin--custom: #{space(400)}; // fallback for vf-stack prior to version 3
--vf-stack-margin: #{space(400)};
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment