Skip to content

Instantly share code, notes, and snippets.

@taviroquai

taviroquai/index.html

Created October 16, 2019 09:30
Show Gist options
  • Save taviroquai/b446a0b489cbc17f4f5caf9d349b0d89 to your computer and use it in GitHub Desktop.
Save taviroquai/b446a0b489cbc17f4f5caf9d349b0d89 to your computer and use it in GitHub Desktop.
Download ZIP
Office 2013 style with bootstrap 3 (demo)
Raw
index.html
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#column-wrapper" aria-expanded="false" aria-controls="column-wrapper">
Menu
</button>
<form class="navbar-form form-inline main-search hidden-lg hidden-md hidden-sm"
action="" method="post">
<input type="hidden" name="_token" value="">
<div class="input-group">
<input type="text" class="form-control input-md"
name="q"
placeholder="Procurar...">
<div class="input-group-addon" style="padding: 0">
<button class="btn btn-md" type="submit" style="border: 0;"><i class="fa fa-search"></i></button>
<button class="btn btn-md" type="reset" style="display: none; border: 0;"><i class="fa fa-remove"></i></button>
<span class="loading" style="display: none"><img src="" title="A carregar..." alt="A carregar..." /></span>
</div>
</div>
</form>
</div>
<!-- Nav Desktop -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right hidden-lg hidden-md hidden-sm">
<li><a href="#home" aria-controls="home"
role="tab" data-toggle="tab" title="Navegação">Navegação</a></li>
<li><a href="#editing" aria-controls="editing"
role="tab" data-toggle="tab" title="Ediçao">Edição</a></li>
<li><a href="#filter" aria-controls="filter"
role="tab" data-toggle="tab" title="Pesquisas">Pesquisas</a></li>
<li><a href="#apps" aria-controls="apps"
role="tab" data-toggle="tab" title="Aplicações">Aplicações</a></li>
<li><a href="#help" aria-controls="help"
role="tab" data-toggle="tab" title="Ajuda">Help</a></li>
</ul>
<form class="navbar-form form-inline main-search hidden-lg hidden-md hidden-sm"
action="" method="post">
<input type="hidden" name="_token" value="">
<div class="input-group">
<input type="text" class="form-control input-sm"
name="q"
placeholder="Procurar...">
<div class="input-group-addon" style="padding: 0">
<button class="btn btn-sm" type="submit" style="border: 0;"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<form class="navbar-form navbar-right main-search hidden-xs" action="" method="post">
<input type="hidden" name="_token" value="VqCzhCP5PsZXlaFK8JAmWy9iSyvPECGsdsb1qzGP">
<input type="text" name="q" class="form-control col-md-1 input-sm search-input" placeholder="Procurar...">
<button class="btn btn-default btn-sm" type="submit">
<i class="fa fa-search"></i>
<span class="loading" style="display: none"><img src="" title="A carregar..." alt="A carregar..." /></span>
</button>
<ul id="user" class="nav navbar-nav pull-right">
<li class="dropdown">
<a href="#" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">mafonso <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a target="_blank" href="">Administração</a></li>
</ul>
</li>
<li><a class="btn btn-default btn-inverse btn-sm" href="">Sair</a></li>
</ul>
</form>
<!-- Nav Tabs Desktop -->
<ul class="nav nav-tabs hidden-xs" role="tablist">
<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab" data-toggle="tab" title="Navegação">
<i class="fa fa-arrows-alt visible-xs"></i>
<span>Navegação</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid full-height">
<div class="row" id="ribbon">
<div class="col-md-12">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="row">
<div class="category">
<div class="category-line">
<div class="category-col">
<button class="btn btn-default action-nav-extent" title="Extensão Total">
<i class="fa fa-globe fa-2x"></i>
<br /><span class="blabel hidden-xs">Extensão Total</span>
</button>
<button class="btn btn-default action-nav-reset" title="Arrastar Mapa">
<i class="fa fa-hand-paper-o fa-2x"></i>
<br /><span class="blabel hidden-xs">Arrastar Mapa</span>
</button>
<button class="btn btn-default action-nav-zoombox" title="Aproximar Mapa">
<i class="fa fa-search-plus fa-2x"></i>
<br /><span class="blabel hidden-xs">Aproximar Mapa</span>
</button>
<button class="btn btn-default action-nav-zoomout" title="Afastar Mapa">
<i class="fa fa-search-minus fa-2x"></i>
<br /><span class="blabel hidden-xs">Afastar Mapa<br />&nbsp;</span>
</button>
<button class="btn btn-default action-nav-previous" title="Vista Anterior">
<i class="fa fa-mail-reply fa-2x"></i>
<br /><span class="blabel hidden-xs">Vista Anterior</span>
</button>
<button class="btn btn-default action-nav-next" title="Vista Seguinte">
<i class="fa fa-mail-forward fa-2x"></i>
<br /><span class="blabel hidden-xs">Vista Seguinte</span>
</button>
</div>
</div>
<div class="category-line category-name">Navegação</div>
</div>
<div class="category hidden-sm hidden-xs">
<div class="category-line">
<div class="category-col">
<button class="btn btn-default action-nav-bing" title="Janela Bing">
<i class="fa fa-map fa-2x"></i>
<br /><span class="blabel hidden-xs">Bing<br />&nbsp;</span>
</button>
<button class="btn btn-default action-nav-google" title="Janela Google">
<i class="fa fa-map-o fa-2x"></i>
<br /><span class="blabel hidden-xs">Google<br />&nbsp;</span>
</button>
</div>
</div>
<div class="category-line category-name">Mapa Externo</div>
</div>
<div class="category">
<div class="category-line">
<div class="category-col">
<button class="btn btn-default action-location-info" title="Obter Informações">
<i class="fa fa-info-circle fa-2x"></i>
<br /><span class="blabel hidden-xs">Obter Informações</span>
</button>
</div>
</div>
<div class="category-line category-name">Informação</div>
</div>
<div class="category">
<div class="category-line">
<div class="category-col">
<div class="category-line hidden-xs">
<div class="category-col-line">
<label class="hidden-xs">Escala</label>
<input type="text" name="scale" value="0"
title="Escala"
class="action-nav-scale" />
</div>
</div>
<div class="category-line">
<div class="category-col-line">
<label class="hidden-xs">Predefinidas</label>
<select name="prescale" class="action-nav-prescale"
title="Escalas prédefinidas">
<option value="custom">Personalizada</option>
<option value="500">1:500</option>
<option value="1000">1:1000</option>
<option value="2000">1:2000</option>
<option value="5000">1:5000</option>
<option value="10000">1:10000</option>
<option value="20000">1:20000</option>
<option value="25000">1:25000</option>
<option value="50000">1:50000</option>
<option value="100000">1:100000</option>
<option value="120000">1:120000</option>
</select>
</div>
</div>
<div class="category-line">
<div class="category-col-line">
&nbsp;
</div>
</div>
</div>
</div>
<div class="category-line category-name">Escala</div>
</div>
</div>
</div>
</div>
</div>
</div>
Raw
style.css
#navbar {
z-index: 45;
background-color: white;
height: 40px !important;
}
#navbar .nav > li > a {
padding: 7px 7px;
}
#navbar .nav-tabs {
margin-top: 10px;
height: 31px;
}
#navbar .nav-tabs a {
text-transform: uppercase;
color: gray;
font-size: 88%;
}
#navbar .nav-tabs > li.active > a,
#navbar .nav-tabs > li.active > a:hover,
#navbar .nav-tabs > li.active > a:focus
{
color: #af403b;
}
#navbar .navbar-form {
margin-top: 5px;
margin-bottom: 0;
padding-right: 0;
}
ul.nav li.dropdown.dropdown-hover:hover ul.dropdown-menu{
display: block;
}
.dropdown-menu {
font-size: 12px;
}
#navbar #user > li > a {
padding: 5px 10px;
line-height: 1.5;
}
.nav>li>a.btn-primary:hover, .nav>li>a.btn-primary:focus {
color: white;
background-color: #168194;
}
#ribbon {
margin-top: 39px;
border-bottom: 1px solid #ddd;
height: 90px;
z-index: 45;
}
#ribbon .btn {
width: 80px;
height: 60px;
padding: 4px 6px;
vertical-align: top;
font-size: 88%;
white-space: normal;
border-top: inherit;
border-left: inherit;
border-right: none;
border-bottom: none;
overflow: hidden;
float: left;
}
#ribbon .btn-horizontal {
height: auto;
padding: 2px 6px;
text-align: left;
}
#ribbon input, #ribbon select {
height: 19px;
padding: 3px 4px;
}
#ribbon select {
padding: 2px 4px;
}
#ribbon .tab-pane > .btn span.blabel {
color: black;
}
.navbar-brand,
#ribbon .btn {
color: #168194;
}
.red {
color: red !important;
}
#ribbon .category {
display: table;
border-right: 1px solid #ddd;
border-collapse: collapse;
float: left;
}
#ribbon .category-line {
display: table-row;
}
#ribbon .category-col {
display: table-cell;
padding: 5px 5px 3px 5px;
height: 74px;
float: left;
}
#ribbon .category-col-line {
display: table-cell;
padding: 1px 0;
}
#ribbon .category-name {
text-align: center;
font-size: 11px;
color: #666;
}
#ribbon label {
min-width: 80px;
font-size: 11px;
margin-bottom: 0;
color: #168194;
}
#ribbon input, #ribbon select {
width: 80px;
font-size: 11px;
margin-bottom: 0;
color: #168194;
border: 1px solid #168194;
}
#ribbon .dropdown-toggle .btn-colorselector {
width: 100%;
border: 1px solid #168194;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment