mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-17 19:26:19 +02:00
Navigation header complete
This commit is contained in:
Angelos Chalaris
@@ -250,3 +250,14 @@
|
||||
- Added edge case for tabbing to checkbox for `focus`, which will make the `label`'s box `border` glow to the blue-ish shade usually used.
|
||||
- Removed `readonly` styling for `checkbox` and `radio` as it does not work due to technicalities.
|
||||
- Updated demo page for `checkbox` module.
|
||||
- Created `mini-core/navigation` for the navigational components.
|
||||
- Cleanup in `core`, moved fixes for navigational to proper file, moved leftover fixes to their proper place.
|
||||
- Added responsiveness for `img`.
|
||||
- Updated demo page for `checkbox` module.
|
||||
- Changed `inline` `progress` elements to use `vw` instead of `em`. Fixed a rare bug that would be caused due to that.
|
||||
- Coded the `header` element's styling. Optimized.
|
||||
- Made `header` responsive.
|
||||
- Added demo for `header` element.
|
||||
- Updated live page for `header`.
|
||||
- *NOTE* There is some bleedthrough of styles from `button` to `navigation`, specifically for `header`. This is not a problem, but should be noted for further reference/testing etc.
|
||||
- Extended testing for `header`, there seem to be no bugs.
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<!-- Live demo styled as of 20161025 -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5b4a224c4cad68a76b94e1635696925d13ea45f6/flavors/v2/mini-default.min.css"> -->
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e382ae1a02c9d08ccbc67a85447422a4559b51fd/flavors/v2/mini-default.min.css">
|
||||
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8">
|
||||
@@ -13,6 +13,10 @@
|
||||
<link rel="icon" type="image/png" href="favicon.png">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
<style>
|
||||
#header-logo {
|
||||
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
|
||||
margin-left: -3px; padding: 2px;
|
||||
}
|
||||
#top-logo {
|
||||
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
|
||||
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
|
||||
@@ -28,6 +32,16 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
|
||||
<a href="#" class="button">Introduction</a>
|
||||
<a href="#" class="button">Module Overview</a>
|
||||
<a href="#" class="button">Module Demos</a>
|
||||
<a href="#" class="button">Flavors</a>
|
||||
<a href="#" class="button">Customization</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
@@ -40,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="row" style="padding-top: 20px;">
|
||||
<div class="col-sm-12 col-md">
|
||||
<div class="box-centered">
|
||||
<h2>Minimal</h2>
|
||||
@@ -318,7 +332,7 @@
|
||||
</select>
|
||||
<input type="search" placeholder="search..." value="">
|
||||
</fieldset>
|
||||
</form>
|
||||
</form><br>
|
||||
<h3>Checkboxes and Radio buttons</h3>
|
||||
<p>Checkboxes and radio buttons are styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code><input></code> (checkbox or radio button) and a linked <code><label></code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex="0"</code> on the <code><input></code> elements only. You can see some examples below:</p>
|
||||
<form>
|
||||
@@ -332,12 +346,15 @@
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div class="input-group">
|
||||
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="i1">Value 1</label>
|
||||
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="i2">Value 2</label>
|
||||
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="i3">Value 3</label>
|
||||
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="r1">Value 1</label>
|
||||
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="r2">Value 2</label>
|
||||
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="r3">Value 3</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</form><br>
|
||||
<h3>Navigation</h3>
|
||||
<p>Use the <code><header></code>, <code><nav></code> and <code><footer></code> elements to add navigational elements to your page. The <code><header></code> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the <code>.button</code> class to give them the proper style. You can see an example belo:</p>
|
||||
<header><a href="#" class="logo">Logo</a><button>Link 1</button><a href="#" class="button">Link 2</a><button>Link 3</button></header><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user