Skip to content

Commit

Permalink
Merge pull request #532 from gselderslaghs/button-components-fix-and-…
Browse files Browse the repository at this point in the history
…indentation

fix/enhancement(Button) component fix and indentation
  • Loading branch information
wuda-io authored Nov 21, 2024
2 parents cefdbf8 + c30c715 commit c8d916a
Showing 1 changed file with 44 additions and 12 deletions.
56 changes: 44 additions & 12 deletions sass/components/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
border-radius: var(--btn-border-radius);
padding-left: var(--btn-padding);
padding-right: var(--btn-padding);
font-size: ver(--btn-font-size);
font-size: var(--btn-font-size);
font-weight: 500;
text-decoration: none;
display: inline-flex;
Expand All @@ -29,19 +29,24 @@
.btn.icon-left, .btn.icon-right {
position: relative;
}

.btn.icon-left {
padding-left: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
}

.btn.icon-right {
padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
padding-right: calc(var(--btn-padding-icon) + var(--btn-font-size-icon) + var(--btn-gap-icon));
}

.btn.icon-left i, .btn.icon-right i {
position: absolute;
font-size: var(--btn-font-size-icon);
}

.btn.icon-left i {
left: var(--btn-padding-icon);
}

.btn.icon-right i {
right: var(--btn-padding-icon);
}
Expand Down Expand Up @@ -80,12 +85,10 @@

.btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled,
.btn:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled,
.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled]
{
.btn[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
@extend .z-depth-0;
color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);

pointer-events: none;
box-shadow: none;
cursor: default;
Expand Down Expand Up @@ -158,8 +161,7 @@
&.elevated,
&.tonal,
&.outlined,
&.text
{
&.text {
outline: 3px solid var(--md-sys-color-secondary);
outline-offset: 2px;
}
Expand Down Expand Up @@ -190,10 +192,12 @@
@extend .z-depth-1-half;
background-color: color-mix(in srgb, var(--md-sys-color-primary-container), var(--md-sys-color-on-primary-container) 16%);
}

&:focus {
background-color: $button-floating-background-focus;
@extend .z-depth-1-half;
}

&:before {
border-radius: 0;
}
Expand All @@ -202,21 +206,24 @@
&.halfway-fab {
bottom: -56px * 0.5;
}

width: 56px;
height: 56px;
padding: 0;
// font-size:
// font-size:
// i {
// // line-height: 56px;
// }
}

&.btn-small {
--btn-small-height: calc(0.75 * var(--btn-height));

&.halfway-fab {
bottom: calc(var(--btn-small-height) * -0.5);
}
width: var(--btn-small-height)e;

width: var(--btn-small-height);
height: var(--btn-small-height);
// i {
// line-height: $button-floating-small-size;
Expand All @@ -228,10 +235,12 @@
right: auto;
left: 24px;
}

position: absolute;
right: 24px;
bottom: -$button-floating-size * 0.5;
}

// FIXES
// width: unset;
// padding: 16px !important;
Expand Down Expand Up @@ -262,24 +271,27 @@
text-align: center;
}
}

// button fix
button.btn-floating {
border: none;
}

// Fixed Action Button
.fixed-action-btn {
&.active {
ul {
visibility: visible;
padding-left: 0;
list-style-type: none;
list-style-type: none;
}
}

// Directions
&.direction-left,
&.direction-right {
padding: 0 0 0 15px;

ul {
text-align: right;
right: 64px;
Expand All @@ -289,55 +301,67 @@ button.btn-floating {
left: auto;
/*width 100% only goes to width of button container */
width: 500px;

li {
display: inline-block;
margin: 7.5px 15px 0 0;
}
}
}

&.direction-right {
padding: 0 15px 0 0;

ul {
text-align: left;
direction: rtl;
left: 64px;
right: auto;

li {
margin: 7.5px 0 0 15px;
}
}
}

&.direction-bottom {
padding: 0 0 15px 0;

ul {
top: 64px;
bottom: auto;
display: flex;
flex-direction: column-reverse;

li {
margin: 15px 0 0 0;
}
}
}

&.toolbar {
&.active {
&>a i {
& > a i {
opacity: 0;
}
}

padding: 0;
height: 56px;

ul {
display: flex;
top: 0;
bottom: 0;
z-index: 1;

li {
flex: 1;
display: inline-block;
margin: 0;
height: 100%;
transition: none;

a {
display: block;
overflow: hidden;
Expand All @@ -349,19 +373,22 @@ button.btn-floating {
color: $button-floating-color;
line-height: 56px;
z-index: 1;

i {
line-height: inherit;
}
}
}
}
}

position: fixed;
right: 23px;
bottom: 23px;
padding-top: 15px;
margin-bottom: 0;
z-index: 997;

ul {
left: 0;
right: 0;
Expand All @@ -370,13 +397,16 @@ button.btn-floating {
bottom: 64px;
margin: 0;
visibility: hidden;

li {
margin-bottom: 15px;
}

a.btn-floating {
opacity: 0;
}
}

.fab-backdrop {
position: absolute;
top: 0;
Expand All @@ -398,6 +428,7 @@ button.btn-floating {
height: calc(1.5 * var(--btn-height));
font-size: 18px;
padding: 0 28px;

i {
font-size: 1.6rem;
}
Expand All @@ -408,6 +439,7 @@ button.btn-floating {
@extend .btn;
height: calc(0.75 * var(--btn-height));
font-size: 13px;

i {
font-size: 1.2rem;
}
Expand All @@ -420,4 +452,4 @@ button.btn-floating {

.btn.rounded {
border-radius: 99999px;
}
}

0 comments on commit c8d916a

Please sign in to comment.