diff -r 000000000000 -r bca7a7e058a3 src/pyams_skin/resources/less/tabs.less --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/pyams_skin/resources/less/tabs.less Thu Feb 13 11:43:31 2020 +0100 @@ -0,0 +1,244 @@ +/* + * Tabs + */ + +.nav-tabs { + + .tabs-below >&, + .tabs-left >&, + .tabs-right >& { + border-bottom: 0; + } + &.bordered { + background: #fff; + border: 1px solid #ddd; + + >:first-child a { + border-left-width: 0!important; + } + +.tab-content { + border: 1px solid #ddd; + border-top: 0; + } + } + >li { + >a { + padding: 4px 10px; + border-radius: 0; + color: #333; + + &.xsmall { + line-height: 1.0; + padding: 3px 8px; + } + .label { + display: inline-block; + font-size: 11px; + margin-left: 5px; + opacity: .5; + } + .badge { + font-size: 11px; + padding: 4px 5px 2px; + opacity: .5; + margin-left: 5px; + min-width: 17px; + font-weight: 400; + + .tabs-left & { + margin-right: 5px; + margin-left: 0; + } + } + >.fa { + opacity: .5; + } + } + } + &.small { + >li { + >a { + padding: 2px 8px; + font-size: 90%; + } + } + } + &.tiny { + >li { + >a { + padding: 1px 6px; + font-size: 75%; + } + } + } + >li.active { + >a { + -webkit-box-shadow: 0 -2px 0 @activeTabBorder; + box-shadow: 0 -2px 0 @activeTabBorder; + border-top-width: 0!important; + margin-top: 1px!important; + font-weight: 700; + + .badge, + .label, + >.fa { + opacity: 1; + } + .tabs-left & { + -webkit-box-shadow: -2px 0 0 @activeTabBorder; + box-shadow: -2px 0 0 @activeTabBorder; + border-top-width: 1px!important; + border-left: 0!important; + margin-left: 1px!important; + } + .tabs-right & { + -webkit-box-shadow: 2px 0 0 @activeTabBorder; + box-shadow: 2px 0 0 #57889c; + border-top-width: 1px!important; + border-right: 0!important; + margin-right: 1px!important; + } + .tabs-below & { + -webkit-box-shadow: 0 2px 0 @activeTabBorder; + box-shadow: 0 2px 0 @activeTabBorder; + border-bottom-width: 0!important; + border-top: 0!important; + margin-top: 0!important; + } + } + } +} +.tabs-left, +.tabs-right { + >.nav-tabs >li, + >.nav-pills >li { + float: none; + + >a { + min-width: 74px; + margin-right: 0; + margin-bottom: 3px; + } + } +} +.tabs-left { + .nav-pills >li.active >a { + border: 0!important; + box-shadow: none!important; + -webkit-box-shadow: none!important; + } + >.nav-pills, + >.nav-tabs { + float: left; + margin-right: 19px; + border-right: 1px solid #ddd; + } + >.nav-pills { + border-right: 0; + } + >.nav-tabs >li >a { + margin-right: -1px; + } + >.nav-tabs >li >a:focus, + >.nav-tabs >li >a:hover { + border-color: #eee #d5d5d5 #eee #eee; + } + >.nav-tabs .active >a, + >.nav-tabs .active >a:focus, + >.nav-tabs .active >a:hover { + border-color: #d5d5d5 transparent #d5d5d5 #ddd; + *border-right-color: #fff; + } + >.tab-content { + margin-left: 109px; + } +} +.tabs-right { + >.nav-tabs { + float: right; + margin-left: 19px; + border-left: 1px solid #ddd; + + >li >a { + margin-left: -1px; + + &:focus, + &:hover { + border-color: #eee #eee #eee #ddd; + } + } + .active { + >a, + >a:focus, + >a:hover { + border-color: #ddd #ddd #ddd transparent; + *border-left-color: #fff; + } + } + } +} +.tabs-pull-right { + &.nav-tabs, + &.nav-pills { + >li { + float: right; + + &:first-child >a { + margin-right: 1px; + } + } + } + &.bordered.nav-pills, + &.bordered.nav-tabs { + >li:first-child >a { + border-left-width: 1px!important; + margin-right: 0; + border-right-width: 0; + } + } +} +.tabs-below { + >.nav-tabs { + border-top: 1px solid #ddd; + + >li { + margin-top: -1px; + margin-bottom: 0; + + >a:focus, + >a:hover { + border-top-color: #ddd; + border-bottom-color: transparent; + } + } + >.active >a, + >.active >a:focus, + >.active >a:hover { + border-color: transparent #ddd #ddd; + } + } +} + +.pill-content, +.tab-content { + >.pill-pane, + >.tab-pane { + display: none; + } + >.active, + >.active { + display: block; + } + &.transparent { + background-color: transparent; + } + &.bordered, + &.bordered:hover { + border-color: #ddd; + border-top: 0; + } +} + +.ams-widget >header >.nav-tabs.pull-left >li:first-child a { + border-left-width: 0!important; +}