1
1
mirror of https://github.com/NixOS/mobile-nixos.git synced 2024-12-18 13:31:36 +03:00
mobile-nixos/doc/_support/styles/callouts.less
2019-11-15 22:02:06 -05:00

81 lines
1.6 KiB
Plaintext

// Good page to test:
// → .../sec-pkgs-dockerTools.html
@callout-size: 18px;
// Styles for the callout list.
.calloutlist {
padding-left: @gutter;
padding-right: @gutter;
table {
@_callout-col: 2 * @callout-size;
td {
border: 0;
vertical-align: middle;
}
// The callout circles.
td:first-child {
min-height: @_callout-col;
width: @_callout-col;
max-width: @_callout-col;
min-width: @_callout-col;
padding: 0;
position: relative;
& a {
text-align: center;
position: absolute;
display: block;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
}
td:last-child {
& > :last-child {
margin-bottom: 0;
}
}
}
}
.calloutlist table td img,
.docbook .xref img[src^="images/callouts/"],
.book .xref img[src^="images/callouts/"],
.screen img,
.programlisting img {
display: inline-block;
width: @callout-size;
height: @callout-size;
// This removes most of the weirdness from resizing the svg images.
border: 1px solid #000;
background: #000;
border-radius: 100%;
}
.docbook .xref img[src^="images/callouts/"],
.book .xref img[src^="images/callouts/"] {
vertical-align: baseline;
position: relative;
top: 2px;
}
// Styles to fix the page horizontal scroll issues.
// TODO : figure out a proper fix :/
.calloutlist {
max-width: 100%; // FIXME
overflow: auto; // FIXME
//table {
// td:last-child {
// overflow: auto;
// //@_padding: 1em;
// //// This... is dirty.
// //// This is because of a `pre` in the `td`. It breaks table width computation magic.
// //max-width: calc(100vw - @_callout-col - @_padding - 2*@gutter);
// }
//}
}