@abrasileirado/dsgovbr-bootstraped 0.6.0 → 0.8.0

package/src/scss/components/_navbar.scss

@@ -0,0 +1,125 @@
+// Navbar como o Header do GOV.BR DS (vendor/govbr-ds-core/src/components/header).
+// A estrutura, os breakpoints e os plugins continuam os do Bootstrap; o Header
+// completo é uma composição (ver docs/exemplos/admin.html):
+//   linha de cima: logo, .vr e assinatura (.navbar-text); à direita, botões
+//     circulares (.btn.btn-link.rounded-circle) com dropdown e o "Entrar"
+//     (.btn.btn-light.btn-sm);
+//   linha de baixo: acionador do menu, título (.navbar-brand) com subtítulo
+//     (.navbar-text logo depois) e a busca (form[role="search"]).
+.navbar {
+  box-shadow: $govbr-shadow-sm;
+}
+
+// Título (--header-title-size): 14px no celular, 20,16px a partir de sm e
+// 24,19px a partir do lg do GOV.BR DS (1280px; aqui o xl do Bootstrap, 1200px).
+.navbar-brand {
+  font-weight: normal;
+}
+
+@include media-breakpoint-up(sm) {
+  .navbar-brand {
+    font-size: $govbr-font-size-up-02;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .navbar-brand {
+    font-size: $govbr-font-size-up-03;
+  }
+}
+
+// Assinatura e subtítulo no texto padrão, não na cor dos links.
+.navbar-text {
+  color: var(--#{$prefix}body-color);
+}
+
+// Subtítulo (--header-subtitle-size): logo abaixo do título, em peso médio;
+// oculto no celular, 11,66px a partir de sm e 14px a partir do xl.
+.navbar-brand + .navbar-text {
+  display: none;
+  padding: 4px 0 0;
+  font-size: $govbr-font-size-down-01;
+  font-weight: $govbr-font-weight-medium;
+}
+
+@include media-breakpoint-up(sm) {
+  .navbar-brand + .navbar-text {
+    display: block;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .navbar-brand + .navbar-text {
+    font-size: $govbr-font-size-base;
+  }
+}
+
+.navbar-toggler {
+  border: 0;
+}
+
+.navbar-nav .nav-link {
+  border-radius: $govbr-button-radius;
+
+  &.active {
+    font-weight: $govbr-font-weight-semibold;
+  }
+}
+
+.navbar-nav .nav-link:hover:not(.disabled),
+.navbar-toggler:hover {
+  @include govbr-hover;
+}
+
+[data-bs-theme="dark"] .navbar-nav .nav-link:hover:not(.disabled),
+[data-bs-theme="dark"] .navbar-toggler:hover,
+[data-bs-theme="dark"].navbar .navbar-toggler:hover {
+  @include govbr-hover($govbr-interactive-dark);
+}
+
+// "Entrar" (Sign-in do GOV.BR DS): pílula de fundo cinza-claro com texto e
+// ícone na cor interativa, 16,8px.
+.navbar .btn-light {
+  --#{$prefix}btn-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-color: #{$govbr-interactive};
+  --#{$prefix}btn-hover-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-hover-color: #{$govbr-interactive};
+  --#{$prefix}btn-active-bg: #{$govbr-gray-2};
+  --#{$prefix}btn-active-color: #{$govbr-active};
+  gap: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: $govbr-font-size-up-01;
+
+  &:hover {
+    @include govbr-hover;
+  }
+}
+
+// Busca do Header: campo de 40px com fundo cinza-claro, sem borda visível e
+// espaço à direita para o botão circular de pesquisa.
+.navbar [role="search"] {
+  position: relative;
+
+  .form-control {
+    height: $govbr-button-height-medium;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: $govbr-button-height-medium;
+    font-size: $govbr-font-size-up-01;
+    font-weight: $govbr-font-weight-medium;
+    background-color: $govbr-gray-2;
+    border-color: transparent;
+
+    &::placeholder {
+      font-style: italic;
+    }
+  }
+
+  .btn.rounded-circle {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+  }
+}

package/src/scss/components/_spinner.scss

@@ -0,0 +1,12 @@
+// Loading indeterminado do GOV.BR DS: arco azul interativo (44px/4px e
+// 24px/2px, ver _bootstrap-settings.scss). Dentro de botões o spinner segue a
+// cor do texto do botão, como no Bootstrap.
+.spinner-border,
+.spinner-grow {
+  color: $govbr-interactive;
+}
+
+.btn .spinner-border,
+.btn .spinner-grow {
+  color: inherit;
+}

package/src/scss/components/_toast.scss

@@ -0,0 +1,5 @@
+// Toast como a Message do GOV.BR DS: superfície opaca com sombra (variáveis
+// em _bootstrap-settings.scss) e título do cabeçalho em semi-bold.
+.toast-header strong {
+  font-weight: $govbr-font-weight-semibold;
+}

package/src/scss/components/_tooltip.scss

@@ -0,0 +1,16 @@
+// Tooltip e popover do GOV.BR DS (vendor/govbr-ds-core/src/components/tooltip):
+// fundo azul informativo, texto branco em peso médio, raio 4px e sombra.
+.tooltip-inner {
+  font-weight: $govbr-font-weight-medium;
+  box-shadow: $govbr-tooltip-shadow;
+  text-align: left;
+}
+
+.popover-header {
+  font-weight: $govbr-font-weight-semibold;
+  padding-bottom: 0;
+}
+
+.popover-body {
+  font-weight: $govbr-font-weight-medium;
+}

package/src/scss/index.scss

@@ -16,9 +16,28 @@
 
 // Ajustes que as variáveis de tema, sozinhas, não resolvem — um adaptador
 // por componente (ver docs/desenvolvimento.md).
+@import "mixins";
+
 @import "components/alert";
 @import "components/badge";
 @import "components/pagination";
 @import "components/button";
 @import "components/card";
 @import "components/form";
+@import "components/focus";
+@import "components/accordion";
+@import "components/breadcrumb";
+@import "components/close";
+@import "components/list-group";
+@import "components/nav";
+@import "components/dropdown";
+@import "components/tooltip";
+@import "components/spinner";
+@import "components/toast";
+@import "components/modal";
+@import "components/carousel";
+@import "components/divider";
+@import "components/navbar";
+@import "components/menu";
+@import "components/footer";
+@import "components/dark";