mirror of
https://github.com/WebStackPage/WebStackPage.github.io.git
synced 2026-02-08 21:03:42 +08:00
123 lines
3.2 KiB
Plaintext
Executable File
123 lines
3.2 KiB
Plaintext
Executable File
// Name: Thumbnail
|
|
// Description: Defines styles for image thumbnails
|
|
//
|
|
// Component: `uk-thumbnail`
|
|
//
|
|
// Sub-objects: `uk-thumbnail-caption`
|
|
//
|
|
// Modifiers: `uk-thumbnail-mini`
|
|
// `uk-thumbnail-small`
|
|
// `uk-thumbnail-medium`
|
|
// `uk-thumbnail-large`
|
|
// `uk-thumbnail-expand`
|
|
//
|
|
// Markup:
|
|
//
|
|
// <!-- uk-thumbnail -->
|
|
// <figure class="uk-thumbnail">
|
|
// <img src="" alt="">
|
|
// <figcaption class="uk-thumbnail-caption"></figcaption>
|
|
// </figure>
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
@thumbnail-padding: 4px;
|
|
@thumbnail-border: #ddd;
|
|
@thumbnail-border-width: 1px;
|
|
@thumbnail-background: #fff;
|
|
@thumbnail-hover-border: #aaa;
|
|
@thumbnail-hover-background: #fff;
|
|
|
|
@thumbnail-caption-padding: @thumbnail-padding;
|
|
@thumbnail-caption-color: #444;
|
|
|
|
@thumbnail-mini-width: 150px;
|
|
@thumbnail-small-width: 200px;
|
|
@thumbnail-medium-width: 300px;
|
|
@thumbnail-large-width: 400px;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Thumbnail
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Container width fits its content
|
|
* 2. Responsive behavior
|
|
* 3. Corrects `max-width` behavior sed
|
|
* 4. Required for `figure` element
|
|
* 5. Style
|
|
*/
|
|
|
|
.uk-thumbnail {
|
|
/* 1 */
|
|
display: inline-block;
|
|
/* 2 */
|
|
max-width: 100%;
|
|
/* 3 */
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
/* 3 */
|
|
margin: 0;
|
|
/* 4 */
|
|
padding: @thumbnail-padding;
|
|
border: @thumbnail-border-width solid @thumbnail-border;
|
|
background: @thumbnail-background;
|
|
.hook-thumbnail;
|
|
}
|
|
|
|
/*
|
|
* Hover state for `a` elements
|
|
* 1. Apply hover style also to focus state
|
|
* 2. Needed for caption
|
|
* 3. Remove default focus style
|
|
*/
|
|
|
|
a.uk-thumbnail:hover,
|
|
a.uk-thumbnail:focus { // 1
|
|
border-color: @thumbnail-hover-border;
|
|
background-color: @thumbnail-hover-background;
|
|
/* 2 */
|
|
text-decoration: none;
|
|
/* 3 */
|
|
outline: none;
|
|
.hook-thumbnail-hover;
|
|
}
|
|
|
|
|
|
/* Caption
|
|
========================================================================== */
|
|
|
|
.uk-thumbnail-caption {
|
|
padding-top: @thumbnail-caption-padding;
|
|
text-align: center;
|
|
color: @thumbnail-caption-color;
|
|
.hook-thumbnail-caption;
|
|
}
|
|
|
|
|
|
/* Sizes
|
|
========================================================================== */
|
|
|
|
.uk-thumbnail-mini { width: @thumbnail-mini-width; }
|
|
.uk-thumbnail-small { width: @thumbnail-small-width; }
|
|
.uk-thumbnail-medium { width: @thumbnail-medium-width; }
|
|
.uk-thumbnail-large { width: @thumbnail-large-width; }
|
|
|
|
.uk-thumbnail-expand,
|
|
.uk-thumbnail-expand > img { width: 100%; }
|
|
|
|
|
|
// Hooks
|
|
// ========================================================================
|
|
|
|
.hook-thumbnail-misc;
|
|
|
|
.hook-thumbnail() {}
|
|
.hook-thumbnail-hover() {}
|
|
.hook-thumbnail-caption() {}
|
|
.hook-thumbnail-misc() {} |