diff --git a/misc/grid-sidebar.png b/misc/grid-sidebar.png new file mode 100644 index 000000000..0244efdaf Binary files /dev/null and b/misc/grid-sidebar.png differ diff --git a/misc/patternfly-logo.svg b/misc/patternfly-logo.svg new file mode 100644 index 000000000..5f6e45e20 --- /dev/null +++ b/misc/patternfly-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + diff --git a/misc/patternfly-showcase.css b/misc/patternfly-showcase.css new file mode 100644 index 000000000..d2d1a0313 --- /dev/null +++ b/misc/patternfly-showcase.css @@ -0,0 +1,297 @@ +.showcase > header + .container-fluid { + padding-bottom: 50px; + padding-top: 20px; + transition: padding-left 0.2s cubic-bezier(0.35, 0, 0.25, 1); +} +.showcase > header .navbar.navbar-default { + background: #040404; + border-bottom: 0; + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; + border-top: 2px solid #32a6d7; + font-size: 13px; + margin-bottom: 0; + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); +} +.showcase > header .navbar.navbar-default .navbar-brand { + background: url(../img/patternfly-logo.svg) 0 50% no-repeat; + font-size: 13px; + height: 40px; + letter-spacing: 3px; + line-height: 0; + margin-bottom: 15px; + margin-top: 15px; + padding: 20px 0 20px 55px; + position: relative; + text-indent: 0; +} +@media (min-width: 768px) { + .showcase > header .navbar.navbar-default .navbar-brand { + margin-left: 0; + } +} +.showcase > header .navbar.navbar-default .navbar-brand .secondary-logo { + font-weight: lighter; +} +.showcase > header .navbar.navbar-default .navbar-brand a { + color: #fff; +} +.showcase > header .navbar.navbar-default .navbar-brand a:hover { + border-bottom: solid 1px #1F89C7; + text-decoration: none; +} +.showcase > header .navbar.navbar-default .navbar-collapse { + border-top-color: rgba(255, 255, 255, 0.15); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.95); +} +@media (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-collapse { + padding-bottom: 10px; + padding-top: 15px; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-collapse { + border-top-style: solid; + border-top-width: 1px; + margin-right: -20px; + margin-left: -20px; + padding-left: 0; + padding-right: 0; + } + .showcase > header .navbar.navbar-default .navbar-collapse.collapse { + display: none !important; + overflow-x: hidden !important; + } + .showcase > header .navbar.navbar-default .navbar-collapse.collapse.in { + display: block !important; + overflow-x: visible !important; + } +} +@media (min-width: 992px) { + .showcase > header .navbar.navbar-default .navbar-collapse { + border-top: 0; + box-shadow: none; + } +} +.showcase > header .navbar.navbar-default .navbar-collapse .navbar-nav { + margin-bottom: 0; + margin-top: 0; +} +@media (min-width: 768px) and (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-collapse .navbar-nav > li { + float: none; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-header { + float: none; + margin-right: -20px; + margin-left: -20px; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-right { + float: none; + margin-right: 0; + } +} +.showcase > header .navbar.navbar-default .navbar-right > li.active > a, +.showcase > header .navbar.navbar-default .navbar-right > li.active:hover > a { + background: transparent; + color: #3bb1dc; +} +.showcase > header .navbar.navbar-default .navbar-right > li:hover { + background: #212121; +} +.showcase > header .navbar.navbar-default .navbar-right > li:hover > a { + background: transparent; + color: #fff; +} +.showcase > header .navbar.navbar-default .navbar-right > li > a { + color: #eee; + padding: 7px 20px; +} +@media (min-width: 992px) { + .showcase > header .navbar.navbar-default .navbar-right > li > a { + padding: 25px 15px; + } +} +.showcase > header .navbar.navbar-default .navbar-right > li > a:hover { + color: #fff; +} +.showcase > header .navbar.navbar-default .navbar-right .navbar-utility .applauncher-pf .dropdown-menu { + margin-top: 0; +} +.showcase > header .navbar.navbar-default .navbar-right .dropdown-kebab-pf .dropdown-menu.dropdown-menu-right::after, +.showcase > header .navbar.navbar-default .navbar-right .dropdown-kebab-pf .dropdown-menu.dropdown-menu-right::before { + right: 10px; +} +.showcase > header .navbar.navbar-default .navbar-right .dropdown > a:link { + background-color: transparent !important; +} +.showcase > header .navbar.navbar-default .navbar-toggle { + background-color: transparent; + border: none; + float: left; + margin-bottom: 19px; + margin-left: 20px; + margin-right: 15px; + margin-top: 19px; +} +@media (min-width: 768px) and (max-width: 991px) { + .showcase > header .navbar.navbar-default .navbar-toggle { + display: block; + } +} +.showcase > header .navbar.navbar-default .navbar-toggle:focus { + outline: none; +} +.showcase > header .navbar.navbar-default .navbar-toggle:focus .icon-bar, +.showcase > header .navbar.navbar-default .navbar-toggle:hover .icon-bar { + background-color: #fff; + -webkit-box-shadow: 0 0 3px rgba(255, 255, 255, 0.7); + box-shadow: 0 0 3px rgba(255, 255, 255, 0.7); +} +.showcase > header .navbar-sidebar { + background: #292e33 url(../img/grid-sidebar.png) no-repeat 50% 100%; + border: 0; + border-radius: 0; + bottom: 0; + left: -240px; + margin: 0; + padding: 0; + position: fixed; + top: 72px; + transition: all 0.2s cubic-bezier(0.35, 0, 0.25, 1); + width: 240px; + z-index: 1029; +} +@media (min-width: 992px) { + .showcase > header .navbar-sidebar { + box-shadow: none; + left: 0; + overflow-x: hidden; + overflow-y: auto; + padding-right: 0; + } +} +.showcase > header .navbar-sidebar.open { + box-shadow: 0 0 3px rgba(0, 0, 0, 0.95); + left: 0; + overflow-x: hidden; + overflow-y: auto; +} +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar { + box-shadow: none; + background-color: transparent; + right: 0; +} +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar:active, +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar:hover { + background: rgba(92, 103, 112, 0.5); +} +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar:focus { + background: transparent; +} +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar .fa-angle-double-right { + left: 6px; +} +.showcase > header .navbar-sidebar.open .navbar-toggle-sidebar .fa-angle-double-right:before { + content: "\f100"; +} +.showcase > header .navbar-sidebar ul { + list-style: none; + margin: 0; + padding: 0; +} +.showcase > header .navbar-sidebar ul li { + position: relative; +} +.showcase > header .navbar-sidebar ul li.active > a { + color: #fff; + font-weight: 600; +} +.showcase > header .navbar-sidebar ul li a { + color: #fff; + display: block; + padding: 5px 20px; +} +.showcase > header .navbar-sidebar ul li a:hover { + text-decoration: none; +} +.showcase > header .navbar-sidebar > ul { + margin: 0 0 20px 0; +} +.showcase > header .navbar-sidebar > ul > li > a { + border-bottom: 1px solid #393f44; + font-size: 16px; + margin-bottom: 10px; + line-height: 60px; + padding-bottom: 0; + padding-top: 0; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active { + background: rgba(101, 109, 115, 0.25); +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active:after { + background: #0088ce; + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 4px; + z-index: 2; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active > a:hover { + background: transparent; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active > ul { + display: block; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active > ul > li.active > a { + color: #0088ce; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active > ul > li.active > a:hover { + background: transparent; +} +.showcase > header .navbar-sidebar > ul > li > ul > li.active > ul > li > a:hover { + background: rgba(0, 0, 0, 0.1); +} +.showcase > header .navbar-sidebar > ul > li > ul > li a:focus { + text-decoration: none; +} +.showcase > header .navbar-sidebar > ul > li > ul > li a:hover { + background: rgba(101, 109, 115, 0.15); +} +.showcase > header .navbar-sidebar > ul > li > ul > li a.showcase-collapsed:before { + content: "\f107"; + font-family: "FontAwesome"; + margin-right: 5px; + vertical-align: 0; +} +.showcase > header .navbar-sidebar > ul > li > ul > li a.showcase-collapsed.collapsed:before { + content: "\f105"; + margin-left: 2px; + margin-right: 7px; +} +.showcase > header .navbar-sidebar > ul > li > ul > li > ul, +.showcase > header .navbar-sidebar > ul > li > ul > li > ul.collapse { + display: none; +} +.showcase > header .navbar-sidebar > ul > li > ul > li > ul.collapse.in { + display: block; +} +.showcase > header .navbar-sidebar > ul > li > ul > li > ul > li > a { + padding-left: 34px; +} +.showcase > header .navbar-sidebar.hidden { + display: none; +} +@media (min-width: 992px) { + .showcase > header .navbar-sidebar.navbar-primary { + left: -240px; + } +} \ No newline at end of file