beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Contextual documentation mark docs

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-26 13:55:21 +02:00
parent 3344bfa03d
commit 2499afe53f
6 changed files with 67 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
dist/mini-default.css vendored
View file

@ -1394,11 +1394,13 @@ mark.tertiary {
background: #558b2f; }
mark.tag {
padding: 2px; }
mark.bubble {
border-radius: 200px;
padding: 3px 5px; }
padding: 4px 8px; }
mark.inline-block {
font-size: 100%;
line-height: 1.35;
padding: 5px; }
progress.inline {
display: inline-block;

2
dist/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View file

@ -560,3 +560,4 @@
- Removed `max-width: 100%` from the `alert` component as it was not needed due to `display: block;`.
- Updated transitions to use `-webkit-` prefix as needed.
- Added animated `alert`s on condition.
- Documented basic `mark` behavior and stuff.

47
docs/v2/contextual.html
View file

@ -123,29 +123,54 @@
</div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<!-- sample -->
<div>
<p>This is some text with a <mark>highlight</mark>.</p>
<p>Apart from the primary highlight style, there are also <mark class="secondary">secondary</mark> and <mark class="tertiary">tertiary</mark> styles for highlighting.</p><br>
<p><mark class="inline-block">If you want to highlight a longer piece of text, without line breaks, you can turn the highlight into an inline-block like you see this piece of text being displayed.</mark></p><br>
<p>Finally, you can create contextual tags like <mark class="tag">this</mark> or <mark class="tag">7</mark>.</p><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p></p>
<p>To add simple highlights in your text, you can use the <code>&lt;mark&gt;</code> HTML element. These highlights come pre-styled to use the default primary color, but if you would rather use another color for your highlight you can easily add the <code>.secondary</code> or <code>.tertiary</code> class to a <code>&lt;mark&gt;</code> element. For longer pieces of text that need highlighting, consider adding the <code>.inline-block</code> class to make them stand out even more. Finally, you can create contextual tags, using the <code>.tag</code> class.</p>
<h3>Sample code</h3>
<pre></pre>
<pre>&lt;mark&gt;primary&lt;/mark&gt;
&lt;mark class=&quot;secondary&quot;&gt;secondary&lt;/mark&gt;
&lt;mark class=&quot;tertiary&quot;&gt;tertiary&lt;/mark&gt;
&lt;mark class=&quot;inline-block&quot;&gt;long highlight text...&lt;/mark&gt;
&lt;mark class=&quot;tag&quot;&gt;tag&lt;/mark&gt;</pre>
</div>
</div>
<div class="section">
<h3>Notes</h3>
<ul>
<li></li>
<li></li>
<li>Try to use elements with the <code>.inline-block</code> class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.</li>
<li><code>&lt;mark&gt;</code> elements, along with their supporting classes (except for <code>.inline-block</code>) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.</li>
</ul>
<hr>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">
<pre><!-- do code --></pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;</p>
<div class="col-sm-12 col-md-6">
<pre>&lt;mark class=&quot;tag tertiary&quot;&gt;green tag&lt;/mark&gt;
<span class="fore-tertiary">&lt;!-- or --&gt;</span>
&lt;mark class=&quot;inline-block secondary&quot;&gt;red chunk&lt;/mark&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can combine any of the contextual color classes (<code>.secondary</code> or <code>.tertiary</code>) with the <code>.tag</code> or <code>.inline-block</code> class.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
<pre><!-- don't code --></pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;</p>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;mark class=&quot;secondary tertiary&quot;&gt;no, no&lt;/mark&gt;
<span class="fore-secondary">&lt;!-- or --&gt;</span>
&lt;mark class=&quot;inline-block tag&quot;&gt;oh, no&lt;/mark&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid combining two contextual color classes or a <code>.tag</code> and an <code>.inline-block</code>, as these combinations might result in unexpected behavior.</p>
</div>
<div class="col-sm-12 col-md-6">
<pre>&lt;mark class=&quot;inline-block&quot;&gt;some
&lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt;
&lt;/mark&gt;</pre>
<p class="do"><mark class="tertiary">Do:</mark>&nbsp;You can only nest a <code>&lt;mark&gt;</code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code>&lt;mark&gt;</code> using any of the contextual color classses or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code>&lt;mark&gt;</code> an <code>.inline-block</code> as well.</p>
</div>
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
<pre>&lt;mark&gt;some
&lt;mark class=&quot;secondary&quot;&gt;text&lt;/mark&gt;
&lt;/mark&gt;</pre>
<p class="dont"><mark class="secondary">Don't:</mark>&nbsp;Avoid using nested <code>&lt;mark&gt;</code> elements, unless the outer <code>&lt;mark&gt;</code> element is an <code>.inline-block</code>.</p>
</div>
</div>
</div>

21
src/flavors/mini-default.scss
View file

@ -378,12 +378,14 @@ $mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #558b2f; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-style: 0; // Border style for <mark> style 1
$mark-style1-border-radius: 2px; // Border radius for <mark> style 1
$mark-style1-padding: 2px; // Padding for <mark> style 1
$mark-style2-name: 'bubble'; // Class name for <mark> style 2
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
$mark-style2-border-style: 0; // Border style for <mark> style 2
$mark-style2-border-radius: 200px; // Border radius for <mark> style 2
$mark-style2-padding: 3px 5px; // Padding for <mark> style 2
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
$mark-style2-padding: 5px; // Padding for <mark> style 2
$mark-style2-font-size: 100%; // Font size for <mark> style 2
$mark-style2-line-height: 1.35; // Line height for <mark> style 2
$alert-name: 'alert'; // Class name for alerts
$alert-back-color: #eeeeee; // Background color for alerts
$alert-fore-color: $fore-color; // Text color for alerts
@ -502,14 +504,17 @@ $center-block-name: 'center-block'; // Class name for center block
// Use mixins for contextual background elements and alerts
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style, $mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style, $mark-style2-border-radius, $mark-style2-padding);
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
$mark-style1-border-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
// Use mixins for progress elements and spinners
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin, $progress-style1-border-style, $progress-style1-border-radius);
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
$progress-style1-border-style, $progress-style1-border-radius);
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
$spinner-donut-variant2-fore-color);
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,

11
src/mini/_contextual.scss
View file

@ -55,10 +55,19 @@ mark {
// - $mark-alt-border-style : The border-style of the alternate mark style.
// - $mark-alt-border-radius : The border-radius of the alternate mark style.
// - $mark-alt-padding : (Optional) The padding of the alternate mark style. Defaults to the padding of the mark.
// - $mark-alt-font-size : (Optional) The font-size of the alternate mark style. Defaults to the font-size of the mark.
// - $mark-alt-line-height : (Optional) The line height of the alternate mark style. Defaults to the line height of the mark.
// - $mark-alt-box-shadow : (Optional) The box shadow of the alternate mark style. Defaults to the box shadow of the mark.
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-style, $mark-alt-border-radius,
$mark-alt-padding: $mark-padding, $mark-alt-box-shadow : $mark-box-shadow ) {
$mark-alt-padding : $mark-padding, $mark-alt-font-size : $mark-font-size, $mark-alt-line-height : $mark-line-height,
$mark-alt-box-shadow : $mark-box-shadow ) {
mark.#{$mark-alt-name} {
@if $mark-alt-font-size != $mark-font-size {
font-size: $mark-alt-font-size;
}
@if $mark-alt-line-height != $mark-line-height {
line-height: $mark-alt-line-height;
}
@if $mark-alt-border-style != $mark-border-style {
border: $mark-alt-border-style;
}