Diferenças

Aqui você vê as diferenças entre duas revisões dessa página.

--- governanca-soa:suporte [29/11/2016 14:48]
Desenvolvimento S4SP
+++ governanca-soa:suporte [26/01/2017 10:20] (atual)
Dinarde Bezerra
@@ Linha 1: / Linha 1: @@
 ==== Service-Oriented Architecture (SOA) SSI ====
+<html>
+<style>
+.lab-header {
+text-align: center;
+margin: 3em 0 2em;
+}
-<html> <style> .lab-header { text-align: center; margin: 3em 0 2em; }
+/**
+ * Layout
+ */
+.nav__list {
+  margin: 0;
+  padding: 0;
+}
+.nav__list a {
+  padding: .75em 1.5em;
+  text-decoration: none;
+  -webkit-transition: all .25s ease-in-out;
+  -moz-transition: all .25s ease-in-out;
+  -ms-transition: all .25s ease-in-out;
+  transition: all .25s ease-in-out;
+}
-/** * Layout */ .nav__list { margin: 0; padding: 0; } .nav__list a { padding: .75em 1.5em; text-decoration: none; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .nav__list__item { border-style: solid; border-width: 0 0 1px; } .nav__list__item, .nav__list__item a { display: block; } /** * Presentation */ .nav {
+.nav__list__item {
-<code>
+  border-style: solid;
-background-color: #f5f5f5;
+  border-width: 0 0 1px;
-</code>
+}
+.nav__list__item,
-} .nav .nav__list__item {
+.nav__list__item a {
-<code>
+  display: block;
-border-color: #e5e5e5;
+}
-</code>
-} .nav a {
-<code>
-color: #555;
-</code>
-} .nav a:hover, .nav a:active, .nav a:focus {
-<code>
-background-color: #e5e5e5;
-</code>
+/**
+ * Presentation
+ */
+.nav {
+  background-color: #f5f5f5;
+}
+.nav .nav__list__item {
+  border-color: #e5e5e5;
+}
+.nav a {
+  color: #555;
+}
+.nav a:hover, .nav a:active, .nav a:focus {
+  background-color: #e5e5e5;
 }
-.nav–gray {
+.nav--gray {
+  background-color: #CBD0D3;
-<code>
+}
-background-color: #CBD0D3;
+.nav--gray .nav__list__item {
-</code>
+  border-color: #bdc3c7;
+}
-} .nav–gray .nav__list__item {
+.nav--gray a {
-<code>
+  color: #444;
-border-color: #bdc3c7;
+}
-</code>
+.nav--gray a:hover, .nav--gray a:active, .nav--gray a:focus {
+  background-color: #bdc3c7;
-} .nav–gray a {
-<code>
-color: #444;
-</code>
-} .nav–gray a:hover, .nav–gray a:active, .nav–gray a:focus {
-<code>
-background-color: #bdc3c7;
-</code>
 }
-.nav–green {
+.nav--green {
+  background-color: #19B698;
-<code>
+}
-background-color: #19B698;
+.nav--green .nav__list__item {
-</code>
+  border-color: #16a085;
+}
-} .nav–green .nav__list__item {
+.nav--green a:hover, .nav--green a:active, .nav--green a:focus {
-<code>
+  background-color: #16a085;
-border-color: #16a085;
-</code>
-} .nav–green a:hover, .nav–green a:active, .nav–green a:focus {
-<code>
-background-color: #16a085;
-</code>
 }
-.nav–blue {
+.nav--blue {
+  background-color: #2E8ECE;
-<code>
+}
-background-color: #2E8ECE;
+.nav--blue .nav__list__item {
-</code>
+  border-color: #2980b9;
+}
-} .nav–blue .nav__list__item {
+.nav--blue a:hover, .nav--blue a:active, .nav--blue a:focus {
-<code>
+  background-color: #2980b9;
-border-color: #2980b9;
-</code>
-} .nav–blue a:hover, .nav–blue a:active, .nav–blue a:focus {
-<code>
-background-color: #2980b9;
-</code>
 }
-.nav–mblue {
+.nav--mblue {
+  background-color: #354B60;
-<code>
+}
-background-color: #354B60;
+.nav--mblue .nav__list__item {
-</code>
+  border-color: #2c3e50;
+}
-} .nav–mblue .nav__list__item {
+.nav--mblue a:hover, .nav--mblue a:active, .nav--mblue a:focus {
-<code>
+  background-color: #2c3e50;
-border-color: #2c3e50;
-</code>
-} .nav–mblue a:hover, .nav–mblue a:active, .nav–mblue a:focus {
-<code>
-background-color: #2c3e50;
-</code>
 }
-.nav–red {
+.nav--red {
+  background-color: #D14233;
-<code>
+}
-background-color: #D14233;
+.nav--red .nav__list__item {
-</code>
+  border-color: #c0392b;
+}
-} .nav–red .nav__list__item {
+.nav--red a:hover, .nav--red a:active, .nav--red a:focus {
-<code>
+  background-color: #c0392b;
-border-color: #c0392b;
-</code>
-} .nav–red a:hover, .nav–red a:active, .nav–red a:focus {
-<code>
-background-color: #c0392b;
-</code>
 }
-.nav–green a, .nav–blue a, .nav–mblue a, .nav–red a {
+.nav--green a,
+.nav--blue a,
-<code>
+.nav--mblue a,
-color: rgba(255, 255, 255, 0.75);
+.nav--red a {
-</code>
+  color: rgba(255, 255, 255, 0.75);
 }
 @media screen and (min-width: 1024px) {
+  .nav__list > .nav__list__item {
-<code>
+    border-width: 0 1px 0 0;
-.nav__list> .nav__list__item {
+  }
-  border-width: 0 1px 0 0;
+  .nav__list > .nav__list__item,
-}
+  .nav__list > .nav__list__item a {
-.nav__list> .nav__list__item,
+    display: inline-block;
-.nav__list> .nav__list__item a {
+  }
-  display: inline-block;
-}
-</code>
 }
 </style>
-<nav class="nav nav–mblue">
+<nav class="nav nav--mblue">
+    <ul class="nav__list">
-<code>
+        <li class="nav__list__item"><a href="doku.php?id=governanca-soa:governanca-soa">Governança SOA - SSI</a></li>
-  <ul class="nav__list">
+        <li class="nav__list__item"><a href="doku.php?id=governanca-soa:catalogo_de_servico">Catálogo de Serviços</a></li>
-      <li class="nav__list__item"><a href="doku.php?id=governanca-soa:governanca-soa">Governança SOA - SSI</a></li>
+        <li class="nav__list__item"><a href="doku.php?id=governanca-soa:atividades">Atividades</a></li>
-      <li class="nav__list__item"><a href="doku.php?id=governanca-soa:catalogo_de_servico">Catálogo de Serviços</a></li>
+        <li class="nav__list__item"><a href="doku.php?id=governanca-soa:base_de_conhecimento">Base de Conhecimento</a></li>
-      <li class="nav__list__item"><a href="doku.php?id=governanca-soa:padroes">Padrões</a></li>
+        <li class="nav__list__item"><a href="doku.php?id=governanca-soa:suporte">Suporte</a></li>
-      <li class="nav__list__item"><a href="doku.php?id=governanca-soa:base_de_conhecimento">Base de Conhecimento</a></li>
+    </ul>
-      <li class="nav__list__item"><a href="doku.php?id=governanca-soa:suporte">Suporte</a></li>
+</nav>
-  </ul>
+<!-- Fim do Cabeçalho -->
-</code>
+<br />
+</html>
-</nav> <!– Fim do Cabeçalho –> <br /> </html>