diff --git a/package.json b/package.json index d82cef3..e07fcb5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@betha-plataforma/theme-bootstrap4", - "version": "1.1.0", + "version": "1.2.0", "description": "Tema do Design System Betha para Bootstrap 4", "main": "dist/theme-bootstrap4.css", "unpkg": "dist/theme-bootstrap4.min.css", diff --git a/src/_variables.scss b/src/_variables.scss index d772e65..a176818 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -27,32 +27,26 @@ $font: ( ), ); // Colors -$base-color: #f5f5f7; $white: #fff; $black: #000; + // Colors >> Gray -$gray-dark-40: $black; -$gray-dark-30: #222; -$gray-dark-20: #595959; -$gray-dark-10: #767676; -$gray: #c0c0c0; -$gray-light-10: #e1e3e6; -$gray-light-20: #ebedf0; -$gray-light-30: #f5f7fa; -$gray-light-40: $white; +$gray: #bfbfc0; $colors-gray: ( - "dark-40": $gray-dark-40, - "dark-30": $gray-dark-30, - "dark-20": $gray-dark-20, - "dark-10": $gray-dark-10, + "dark-40": $black, + "dark-30": dark($gray, 61%), + "dark-20": dark($gray, 40%), + "dark-10": dark($gray, 29%), + "dark-5": dark($gray, 15%), "base": $gray, - "light-10": $gray-light-10, - "light-20": $gray-light-20, - "light-30": $gray-light-30, - "light-40": $gray-light-40, + "light-5": lighten($gray, 9%), + "light-10": lighten($gray, 14%), + "light-20": lighten($gray, 18%), + "light-30": lighten($gray, 21%), + "light-40": $white, ); // Colors >> Red -$red: #d64038; +$red: #dd413c; $colors-red: ( "dark-40": dark($red, 40%), "dark-30": dark($red, 30%), @@ -65,7 +59,7 @@ $colors-red: ( "light-40": light($red, 40%), ); // Colors >> Pink -$pink: #cb528e; +$pink: #cb528f; $colors-pink: ( "dark-40": dark($pink, 40%), "dark-30": dark($pink, 30%), @@ -78,7 +72,7 @@ $colors-pink: ( "light-40": light($pink, 40%), ); // Colors >> Blue -$blue: #3475c1; +$blue: #3374db; $colors-blue: ( "dark-40": dark($blue, 40%), "dark-30": dark($blue, 30%), @@ -91,7 +85,7 @@ $colors-blue: ( "light-40": light($blue, 40%), ); // Colors >> Aqua -$aqua: #48b1d3; +$aqua: #46afd2; $colors-aqua: ( "dark-40": dark($aqua, 40%), "dark-30": dark($aqua, 30%), @@ -104,7 +98,7 @@ $colors-aqua: ( "light-40": light($aqua, 40%), ); // Colors >> Green -$green: #54a668; +$green: #3ec18f; $colors-green: ( "dark-40": dark($green, 40%), "dark-30": dark($green, 30%), @@ -117,7 +111,7 @@ $colors-green: ( "light-40": light($green, 40%), ); // Colors >> Yellow -$yellow: #efbc3c; +$yellow: #e8b730; $colors-yellow: ( "dark-40": dark($yellow, 40%), "dark-30": dark($yellow, 30%), @@ -130,7 +124,7 @@ $colors-yellow: ( "light-40": light($yellow, 40%), ); // Colors >> Orange -$orange: #ea863e; +$orange: #e87d30; $colors-orange: ( "dark-40": dark($orange, 40%), "dark-30": dark($orange, 30%), @@ -143,7 +137,7 @@ $colors-orange: ( "light-40": light($orange, 40%), ); // Colors >> Purple -$purple: #a46ab5; +$purple: #9f62b2; $colors-purple: ( "dark-40": dark($purple, 40%), "dark-30": dark($purple, 30%), @@ -174,33 +168,19 @@ $colors: ( ), ); -/** - ** Cores dos produtos extraidos do manual da marca - - Gestão municipal -> Marrom / Brown -> #9A8B7D - Planejamento e Contabilidade -> Lilás / Lilac -> #8986CA - Arrecadação e Fiscalização -> Verde / Lime -> #26D07C - Atendimento -> Cinza / Gray -> #AFB2B2 - Gestão de Compras e Contratos -> Vermelho / Red -> #DF4661 - Pessoal e Recursos Humanos -> Azul / Blue -> #009CDE - Saúde e Assistência Social -> Verde / Green -> #A2C084 - Educação e Gestão Escolar -> Amarelo / Yellow -> #F7B51C - Gestão e Leis Municipais -> Laranja / Orange -> #F7932F - - ** PS.: As Cores estão em português para coincidirem com o manual. - **/ +$main-brand-color: #0761ff; -$main-brand-color: #001489; $brand-colors: ( - "brown": #9a8b7d, - "lilac": #8986ca, - "lime": #26d07c, - "gray": #afb2b2, - "red": #df4661, - "blue": #009cde, - "green": #a2c084, - "yellow": #f7b51c, - "orange": #f7932f, + 'brown' : #9a8b7d, // Gestão municipal + 'lilac' : #a6b8ff, // Contábil + 'lime' : #00bb77, // Arrecadação + 'gray' : #959798, // Atendimento + 'red' : #ff7a75, // Contratos + 'blue' : #009adc, // Pessoal + 'navy' : #263e81, // NoPaper + 'green' : #a7c27e, // Saúde + 'yellow' : #f3b02e, // Educação + 'orange' : #f4812e, // Leis ); /** @@ -208,8 +188,8 @@ $brand-colors: ( **/ $additional-colors: ( - "blue": #06a, - "petrol": #23313f, + "blue": #009adc, + "petrol": #1c1a23, "gold": #ad8b43, ); $breadcrumb-text: map-get($colors-gray, "dark-10"); @@ -232,4 +212,17 @@ $text-timeline: map-get($colors-gray, "dark-30"); $icon-danger-timeline: map-get($colors-red, "base"); $icon-warning-timeline: map-get($colors-yellow, "base"); +$sizes: ( + "xs": 2px, + "sm": 4px, + "base": 6px, + "lg": 8px, + "xl": 10px, + "xxl": 14px +); + +$border-radius: map-get($sizes, "base"); +$border-radius-sm: map-get($sizes, "sm"); +$border-radius-lg: map-get($sizes, "lg"); + // stylelint-enable diff --git a/src/all.scss b/src/all.scss index d900e4f..640c488 100644 --- a/src/all.scss +++ b/src/all.scss @@ -1,25 +1,25 @@ @import 'global'; -@import './components/alert/alert'; /* ok */ -@import './components/badge/badge'; /* ok */ -@import './components/breadcrumb/breadcrumb'; /* ok */ -@import './components/button/button'; /* ok */ +@import './components/alert/alert'; +@import './components/badge/badge'; +@import './components/breadcrumb/breadcrumb'; +@import './components/button/button'; //@import './components/calendar/calendar'; -@import './components/card/card'; /* ok */ -@import './components/checkbox/checkbox'; /* ok */ +@import './components/card/card'; +@import './components/checkbox/checkbox'; //@import './components/comment/comment'; -@import './components/container/container'; /* ok */ -@import './components/dropdown/dropdown'; /* ok */ +@import './components/container/container'; +@import './components/dropdown/dropdown'; //@import './components/filter-by/filter-by'; -@import './components/form/form'; /* ok */ +@import './components/form/form'; //@import './components/grid/grid'; -@import './components/helpers/helpers'; /* ok */ -@import './components/modal/modal'; /* ok */ +@import './components/helpers/helpers'; +@import './components/modal/modal'; @import './components/nav/nav'; -@import './components/pagination/pagination'; /* ok */ -@import './components/popover/popover'; /* ok */ -@import './components/progress/progress'; /* ok */ -@import './components/radio/radio'; /* ok */ -@import './components/scrollbar/scrollbar'; /* ok */ -@import './components/spinner/spinner'; /* ok */ -@import './components/switch/switch'; /* ok */ -@import './components/table/table'; /* ok */ \ No newline at end of file +@import './components/pagination/pagination'; +@import './components/popover/popover'; +@import './components/progress/progress'; +@import './components/radio/radio'; +@import './components/scrollbar/scrollbar'; +@import './components/spinner/spinner'; +@import './components/switch/switch'; +@import './components/table/table'; \ No newline at end of file diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index 626d17e..47a89db 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -51,7 +51,7 @@ $rootIcon: ".alert-icon"; $rootDismissible: ".alert-dismissible"; #{$root} { - border-radius: 2px; + border-radius: $border-radius-sm; position: relative; @each $name, $value in $alert-states { diff --git a/src/components/button/button.scss b/src/components/button/button.scss index ecd63c9..853e44a 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -10,12 +10,12 @@ button:focus { } .btn { - border-radius: 2px; - font-family: $base-font; - text-transform: uppercase; display: inline-flex; - align-items: center; justify-content: center; + align-items: center; + font-family: $base-font; + text-transform: uppercase; + border-radius: $border-radius-sm; > .material-icons { vertical-align: middle; } @@ -50,7 +50,7 @@ button:focus { opacity: 1; } &.dropdown-toggle { - border-left: 1px solid $gray; + border-left: 1px solid palette('gray', 'base');; z-index: 2; } } @@ -266,7 +266,7 @@ button.btn-link:disabled { font-style: normal; font-weight: 400; margin-right: 5px; - margin-top: -3px; + margin-top: -1px; padding-right: 0; vertical-align: middle; } diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 479f423..9fba571 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -2,6 +2,10 @@ @import '../../config'; .card { + + border-radius: $border-radius-lg; + overflow: hidden; + &.bg-secondary { background-color: palette('gray', 'light-30') !important; } diff --git a/src/components/container/container.scss b/src/components/container/container.scss index b262174..7ce7efa 100644 --- a/src/components/container/container.scss +++ b/src/components/container/container.scss @@ -6,7 +6,7 @@ $root: '.container'; .container { &#{$root}-page { background: palette('white'); - border-radius: 2px; + border-radius: $border-radius-sm; box-sizing: border-box; min-height: 500px; position: relative; diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss index 470c24e..25eb659 100644 --- a/src/components/dropdown/dropdown.scss +++ b/src/components/dropdown/dropdown.scss @@ -5,7 +5,7 @@ $dropdown-color: map-get($colors-gray, "dark-20"); .dropdown-menu { border-color: palette("gray", "light-10"); - border-radius: 2px; + border-radius: $border-radius-sm; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); .dropdown-header { color: palette("gray", "dark-20"); diff --git a/src/components/form/form.scss b/src/components/form/form.scss index b9eeed6..c034333 100644 --- a/src/components/form/form.scss +++ b/src/components/form/form.scss @@ -8,7 +8,7 @@ $input-addon-hover: map-get($colors-gray, "light-20"); .form-control { border: 1px solid palette("gray"); - border-radius: 2px; + border-radius: $border-radius-sm; box-shadow: none; color: palette("gray", "dark-30"); transition: none; @@ -83,7 +83,7 @@ input[disabled] { .input-group-addon { background-color: palette("gray", "light-20"); border-color: palette("gray"); - border-radius: 2px; + border-radius: $border-radius-sm; color: palette("gray", "dark-20"); + input[disabled] { border-left: 1px solid palette("gray"); diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 5e0d897..2fd211e 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -23,6 +23,10 @@ border-color: palette("gray", "light-30"); } +.modal-content { + border-radius: $border-radius-lg; +} + /* ajuste do tamanho da modal xxl para monitores menores */ diff --git a/src/components/nav/nav.scss b/src/components/nav/nav.scss index e942877..2d152e1 100644 --- a/src/components/nav/nav.scss +++ b/src/components/nav/nav.scss @@ -177,7 +177,7 @@ nav.nav { margin-bottom: -1px; .nav-link { border-bottom: 1px solid palette("gray", "light-10"); - border-radius: 2px 2px 0 0; + border-radius: $border-radius-sm $border-radius-sm 0 0; &.active { border-bottom: 0; border-left: 1px solid palette("gray", "light-10"); @@ -446,22 +446,22 @@ nav.nav { &.active { font-weight: normal; &::after { - background-color: #3475c1; - border-color: #3475c1; + background-color: palette("blue", "base"); + border-color: palette("blue", "base"); color: #fff; } } &.checked:not(.active) { - color: #3475c1; + color: palette("blue", "base"); &::after { content: "\F012C"; font-family: "Material Design Icons"; - border-color: #3475c1; - color: #3475c1; + border-color: palette("blue", "base"); + color: palette("blue", "base"); } &::before { - border-color: #3475c1; + border-color: palette("blue", "base"); } } } diff --git a/src/components/pagination/pagination.scss b/src/components/pagination/pagination.scss index d1661df..cd349c2 100644 --- a/src/components/pagination/pagination.scss +++ b/src/components/pagination/pagination.scss @@ -5,7 +5,7 @@ > .page-item { margin-left: 4px; .page-link { - border-radius: 2px; + border-radius: $border-radius-sm; background-color: #fff; border-color: silver; color: #222; @@ -44,7 +44,7 @@ &:first-child { margin-left: 0; .page-link { - border-radius: 2px; + border-radius: $border-radius-sm; } } diff --git a/src/components/scrollbar/scrollbar.scss b/src/components/scrollbar/scrollbar.scss index 3da6b6c..259cc2d 100644 --- a/src/components/scrollbar/scrollbar.scss +++ b/src/components/scrollbar/scrollbar.scss @@ -8,7 +8,7 @@ background: palette('gray', 'light-30'); } &-corner { - background: $base-color; + background: palette('gray', 'light-30'); } &-thumb { background-color: palette('gray'); diff --git a/src/global.scss b/src/global.scss index fc1b699..7997bef 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,6 +1,8 @@ @import "./components/fonts/fonts"; @import "config"; + $background-color: palette("gray", "light-20"); + @media (max-width: 767px) { html, body { @@ -18,7 +20,6 @@ $background-color: palette("gray", "light-20"); html, body { background: $background-color; - //font-size: 13px; 0.915rem; font-size: 0.915rem; }