Unverified Commit f291c527 authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

the one where vf-figure floats (#890)

* adds left and right floatable figures

* adds margins to vf-figure inside vf-content

* adds changelog
parent c329156f
Pipeline #72212 passed with stages
in 4 minutes and 44 seconds
......@@ -2,6 +2,8 @@
## 1.1.1
* adds a floated vf-figure example in the nunjucks file
* adds CSS for margin spacing of vf-figure inside of vf-content
- adds table styles to match default vf-table with striped rows.
## 1.1.0
......
......@@ -68,6 +68,10 @@
<h3>What is EMBL?</h3>
<p>EMBL is Europe’s flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
<p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>
<figure class="vf-figure | vf-figure--float vf-figure--float-inline-end">
<img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text">
<figcaption class="vf-figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
</figure>
<p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
<p>Our research drives the development of new technology and methods in the life sciences. We work to transfer this knowledge for the benefit of society.</p>
......
......@@ -113,20 +113,7 @@
margin-bottom: 0;
}
}
figcaption:not([class*='vf-']),
cite:not([class*='vf-']) {
// matches @mixin figure, but that is not directly usable here as it requires css classes
@include set-type(text-body--5);
color: map-get($vf-colors-map, vf-color--grey);
font-style: italic;
}
.vf-video {
// TODO: Make a function for vf-spacing map
margin-bottom: 32px;
}
table:not([class*='vf-']) {
background-color: set-ui-color(vf-ui-color--white);
border-collapse: collapse;
......@@ -168,6 +155,28 @@
}
}
}
figcaption:not([class*='vf-']),
cite:not([class*='vf-']) {
// matches @mixin figure, but that is not directly usable here as it requires css classes
@include set-type(text-body--5);
color: map-get($vf-colors-map, vf-color--grey);
font-style: italic;
}
.vf-video {
// TODO: Make a function for vf-spacing map
margin-bottom: 32px;
}
.vf-figure--float-inline-start {
margin-bottom: 32px;
margin-right: 32px;
}
.vf-figure--float-inline-end {
margin-bottom: 32px;
margin-left: 32px;
}
}
.vf-content__standfirst {
......
# Change Log
## 1.1.0
* Adds vf-figure--float (-inline-start and -inline-end) variants
## 1.0.0-beta.2
* removes the `| path` from the njk template which made it non-usable outside of Fractal
\ No newline at end of file
* removes the `| path` from the njk template which made it non-usable outside of Fractal
......@@ -8,3 +8,14 @@ context:
text: Version, 1982, Adenovirus with 217 dots
alttext: hello alt text
imageUrl: "../../assets/vf-figure/assets/figure-example.png"
variants:
- name: default
- name: Float Inline Start
context:
override_class: vf-figure--float vf-figure--float-inline-start
text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias odit facilis ducimus beatae neque officiis assumenda recusandae iure rerum magni tempore eaque, ex dolor quam repellendus error suscipit accusamus consequuntur.
- name: Float Inline End
context:
override_class: vf-figure--float vf-figure--float-inline-end
text: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.
......@@ -18,3 +18,25 @@
max-width: 100%;
width: 100%;
}
.vf-figure--float {
display: table;
.vf-figure__image {
max-width: unset;
width: auto;
}
.vf-figure__caption {
caption-side: bottom;
display: table-caption;
}
}
.vf-figure--float-inline-start {
float: left;
}
.vf-figure--float-inline-end {
float: right;
}
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