WebHost/Scripts/js/uikit/less/overlay.less

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

// Name:            Overlay
// Description:     Defines styles for image overlays
//
// Component:       `uk-overlay`
//
// Sub-objects:     `uk-overlay-area`
//                  `uk-overlay-area-content`
//                  `uk-overlay-caption`
//                  `uk-overlay-toggle`
//
// States:          `uk-hover`
//
// Markup:
//
// <!-- uk-overlay -->
// <a class="uk-overlay" href="">
//     <img src="" alt="">
//     <div class="uk-overlay-area"></div>
// </a>
//
// ========================================================================


// Variables
// ========================================================================

@overlay-area-background:                       rgba(0,0,0,0.3);

@overlay-area-icon:                             "\f002";
@overlay-area-icon-size:                        50px;
@overlay-area-icon-color:                       #fff;

@overlay-area-content-font-size:                1rem;
@overlay-area-content-padding-horizontal:       15px;
@overlay-area-content-color:                    #fff;
@overlay-area-content-link-color:               inherit;

@overlay-caption-background:                    rgba(0,0,0,0.5);
@overlay-caption-padding:                       15px;
@overlay-caption-color:                         #fff;


/* ========================================================================
   Component: Overlay
 ========================================================================== */

/*
 * 1. Container width fits its content
 * 2. Create position context
 * 3. Set max-width for responsive images to prevent `inline-block` consequences
 * 4. Remove the gap between the container and its child element
 * 5. Fixed wrong scaling calculation for images in Chrome
 */

.uk-overlay {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */