From 0fc56479f943ba77508be7c2f2bc9ca1150df5e4 Mon Sep 17 00:00:00 2001 From: Lucas Vergara Date: Tue, 10 Sep 2024 11:49:31 -0300 Subject: [PATCH] feat: Atualizado radius --- src/_variables.scss | 13 +++++++++++++ src/components/alert/alert.scss | 2 +- src/components/button/button.scss | 10 +++++----- src/components/card/card.scss | 4 ++++ src/components/container/container.scss | 2 +- src/components/dropdown/dropdown.scss | 2 +- src/components/form/form.scss | 4 ++-- src/components/modal/modal.scss | 4 ++++ src/components/nav/nav.scss | 14 +++++++------- src/components/pagination/pagination.scss | 4 ++-- 10 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/_variables.scss b/src/_variables.scss index 454de94..a176818 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -212,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/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 7da9980..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; } @@ -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; } }