%PDF- %PDF-
Direktori : /home/jalalj2hb/public_html/ftm-admin/bower_components/uikit/less/core/ |
Current File : /home/jalalj2hb/public_html/ftm-admin/bower_components/uikit/less/core/subnav.less |
// Name: Subnav // Description: Defines styles for the sub navigation // // Component: `uk-subnav` // // Modifiers: `uk-subnav-line` // `uk-subnav-pill` // // States: `uk-active` // // Markup: // // <!-- uk-subnav --> // <ul class="uk-subnav"> // <li><a href=""></a></li> // </ul> // // ======================================================================== // Variables // ======================================================================== @subnav-margin-horizontal: 10px; @subnav-margin-vertical: @subnav-margin-horizontal; @subnav-color: #444; @subnav-hover-color: #07D; @subnav-hover-text-decoration: none; @subnav-active-color: #07D; @subnav-line-border-height: 10px; @subnav-line-border: #ddd; @subnav-line-border-width: 1px; @subnav-pill-padding-vertical: 3px; @subnav-pill-padding-horizontal: 9px; @subnav-pill-hover-background: #eee; @subnav-pill-hover-color: #444; @subnav-pill-active-background: #00a8e6; @subnav-pill-active-color: #fff; @subnav-disabled-color: #999; /* ======================================================================== Component: Subnav ========================================================================== */ /* * 1. Gutter * 2. Remove default list style */ .uk-subnav { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* 1 */ margin-left: -@subnav-margin-horizontal; margin-top: -@subnav-margin-vertical; /* 2 */ padding: 0; list-style: none; } /* * 1. Space is allocated solely based on content dimensions * 2. Horizontal gutter is using `padding` so `uk-width-*` classes can be applied * 3. Create position context for dropdowns */ .uk-subnav > * { /* 1 */ -ms-flex: none; -webkit-flex: none; flex: none; /* 2 */ padding-left: @subnav-margin-horizontal; margin-top: @subnav-margin-vertical; /* 3 */ position: relative; } /* * DEPRECATED IE9 Support */ .uk-subnav:before, .uk-subnav:after { content: ""; display: block; overflow: hidden; } .uk-subnav:after { clear: both; } .uk-subnav > * { float: left; } /* Items ========================================================================== */ .uk-subnav > * > * { display: inline-block; color: @subnav-color; .hook-subnav; } /* * Hover * 1. Apply hover style also to focus state */ .uk-subnav > * > :hover, .uk-subnav > * > :focus { // 1 color: @subnav-hover-color; text-decoration: @subnav-hover-text-decoration; .hook-subnav-hover; } /* * Active */ .uk-subnav > .uk-active > * { color: @subnav-active-color; .hook-subnav-active; } /* Modifier: 'subnav-line' ========================================================================== */ .uk-subnav-line > :before { content: ""; display: inline-block; height: @subnav-line-border-height; vertical-align: middle; } .uk-subnav-line > :nth-child(n+2):before { margin-right: @subnav-margin-horizontal; border-left: @subnav-line-border-width solid @subnav-line-border; .hook-subnav-line-divider; } /* Modifier: 'subnav-pill' ========================================================================== */ .uk-subnav-pill > * > * { padding: @subnav-pill-padding-vertical @subnav-pill-padding-horizontal; .hook-subnav-pill; } /* * Hover * 1. Apply hover style also to focus state * 2. Remove default focus style */ .uk-subnav-pill > * > :hover, .uk-subnav-pill > * > :focus { // 1 background: @subnav-pill-hover-background; color: @subnav-pill-hover-color; text-decoration: none; /* 2 */ outline: none; .hook-subnav-pill-hover; } /* * Active * `li` needed for higher specificity to override hover */ .uk-subnav-pill > .uk-active > * { background: @subnav-pill-active-background; color: @subnav-pill-active-color; .hook-subnav-pill-active; } /* Disabled state ========================================================================== */ .uk-subnav > .uk-disabled > * { background: none; color: @subnav-disabled-color; text-decoration: none; cursor: text; .hook-subnav-disabled; } // Hooks // ======================================================================== .hook-subnav-misc; .hook-subnav() {} .hook-subnav-hover() {} .hook-subnav-active() {} .hook-subnav-line-divider() {} .hook-subnav-pill() {} .hook-subnav-pill-hover() {} .hook-subnav-pill-active() {} .hook-subnav-disabled() {} .hook-subnav-misc() {}