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

Minor updates in contextual and progress

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-26 11:20:11 +02:00
parent 329486e717
commit 24260f851f
7 changed files with 62 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
dist/mini-default.css vendored
View file

@ -1140,10 +1140,11 @@ mark {
border-radius: 2px;
padding: 2px 4px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
mark.inline-block {
display: inline-block; }
.alert {
display: block;
max-width: 100%;
background: #eeeeee;
border: 1px solid #bdbdbd;
border-radius: 2px;
@ -1360,12 +1361,9 @@ mark.tertiary {
background: #558b2f; }
mark.tag {
display: inline-block;
border-radius: 2px;
padding: 2px; }
mark.bubble {
display: inline-block;
border-radius: 200px;
padding: 3px 5px; }

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

File diff suppressed because one or more lines are too long

7
docs/v2/DEVLOG.md
View file

@ -551,3 +551,10 @@
- Added `progress` variant section in the `progress` module's doc page.
- Updated `index` to reflect the minor bloating of the files that has occured lately. Shame, really.
- Completed documentation for `progress` module.
## 20161126
- Tweaks and additions to the `contextual` module. `alert`s should now have the proper mixins, `mark` has an extra class for `inline-block` and `mark` mixins have been updated to incorporate shadows.
- Contextual testing in `playground`.
- Updated `progress` module mixin to use `box-shadow` if available.
- Removed `max-width: 100%` from the `alert` component as it was not needed due to `display: block;`.

16
docs/v2/playground.html
View file

@ -75,6 +75,22 @@
</div>
<!-- Insert your page content here-->
<main><div class="container" style="padding-top: 20px;">
<br><br>
<h4>Contextual tests</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer <mark class="inline-block">took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularisedin the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece</mark> of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
<br><br>
<table class="striped">
<caption>Hacker List</caption>
<thead>

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

@ -371,14 +371,17 @@ $mark-padding: 2px 4px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-box-shadow: // Box shadow for <mark>
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #f44336; // Background color for <mark> variant 1
$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-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
$alert-name: 'alert'; // Class name for alerts
@ -493,8 +496,8 @@ $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-radius, $mark-style1-padding);
@include make-mark-alt-style ($mark-style2-name, $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);
// 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);

32
src/mini/_contextual.scss
View file

@ -1,6 +1,7 @@
// Definitions for contextual background elements and alerts.
// Contextual background elements use the mark element as their base.
// Default styling for mark. Use mixins for alternate styles.
$mark-inline-block-name: 'inline-block' !default; // Class name for <mark> inline block styling
mark {
@if $mark-back-color != $back-color {
background: $mark-back-color;
@ -29,6 +30,9 @@ mark {
@if $mark-box-shadow != none {
box-shadow: $mark-box-shadow;
}
&.#{$mark-inline-block-name}{
display: inline-block; // Can be used to deal with some problems.
}
}
// Mixin for alternate mark (contextual color variants).
// Variables:
@ -48,24 +52,31 @@ mark {
// Mixin for alternative mark styles (contextual tags).
// Variables:
// - $mark-alt-name : The name of the class used for the alternate mark style.
// - $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.
@mixin make-mark-alt-style ($mark-alt-name, $mark-alt-border-radius, $mark-alt-padding: $mark-padding) {
// - $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.#{$mark-alt-name} {
display: inline-block;
@if $mark-alt-border-radius != 0 {
@if $mark-alt-border-style != $mark-border-style {
border: $mark-alt-border-style;
}
@if $mark-alt-border-radius != $mark-border-radius {
border-radius: $mark-alt-border-radius;
}
@if $mark-alt-padding != $mark-padding {
padding: $mark-alt-padding;
}
@if $mark-alt-box-shadow != $mark-box-shadow {
box-shadow: $mark-alt-box-shadow;
}
}
}
// Default styling for alerts. Use mixins for alternate styles
$alert-name: 'alert' !default; // Class name for the alerts
.#{$alert-name} {
display: block;
max-width: 100%;
@if $alert-back-color != $back-color {
background: $alert-back-color;
}
@ -108,10 +119,12 @@ $alert-name: 'alert' !default; // Class name for the
// - $alert-alt-name : The name of the class used for the alternate alert style.
// - $alert-alt-border-style : The border style of the alternate alert style.
// - $alert-alt-border-radius : Border radius of the alternate alert style.
// - $alert-alt-padding : Padding of the alternate alert style.
// - $alert-alt-margin : Margin of the alternate alert style.
@mixin make-alert-alt-style ($aert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding, $alert-alt-margin) {
// - $alert-alt-padding : (Optional) Padding of the alternate alert style. Defaults to the alert's padding.
// - $alert-alt-margin : (Optional) Margin of the alternate alert style. Defaults to the alert's margin.
// - $alert-alt-box-shadow : (Optional) Box shadow of the alretnate alert style. Defaults to the alert's box shadow.
@mixin make-alert-alt-style ($alert-alt-name, $alert-alt-border-style, $alert-alt-border-radius,
$alert-alt-padding : $alert-padding, $alert-alt-margin : $alert-margin,
$alert-alt-box-shadow : $alert-box-shadow) {
.#{$alert-name}.#{$alert-alt-name} {
@if $alert-alt-border-style != $alert-border-style {
border: $alert-alt-border-style;
@ -125,5 +138,8 @@ $alert-name: 'alert' !default; // Class name for the
@if $alert-alt-margin != $alert-margin {
margin: $alert-alt-margin;
}
@if $alert-alt-box-shadow != $alert-box-shadow {
box-shadow: $alert-alt-box-shadowbox-shadow;
}
}
}

9
src/mini/_progress.scss
View file

@ -108,9 +108,11 @@ progress {
// - $progress-alt-left-right-margin : (Optional) The left and right margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
$progress-alt-top-bottom-margin: $progress-top-bottom-margin, $progress-alt-left-right-margin: $progress-left-right-margin,
$progress-alt-border-style: $progress-border-style, $progress-alt-border-radius: $progress-border-radius) {
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
@ -141,6 +143,9 @@ progress {
}
}
}
@if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow;
}
}
// Feature query that checks if the left and right margins can be applied properly.
@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto {