Menu icon Foundation

My Posts

  • 4
    Replies
  • Rounded Corners on Panels

    By Raj

    scss radius panel

    I'm using Foundation with SCSS so that I can create a custom panel. I'm using the panel mixin and have that basic portion working. I can create a custom panel, set the background color, etc. I'd like to use a very pronounced rounded corner on my pa... (continued)

    Last Reply by Raj about 5 years ago


My Comments

Raj commented on Raj 's post about 5 years

Thanks so much Preston! That works! Rounded corners on panels FTW! :)

Raj commented on Raj 's post about 5 years

Preston,

Thanks for the response. I tried setting a value for $panel-border-radius, but it's ignored; compass indicates that the generated CSS is unchanged. I'm guessing that indicates that the attribute isn't valid.

Interestingly, I can set the $global-radius which seems to affect the default panel and my buttons, but doesn't change the custom panel that I created using the mixin.

Ideally, I would just like to be able to create a custom panel and determine the radius for only those panels and not have to worry about button radius, etc.

Here's what my custom panel looks like:

.test-panel {
  @include panel(
    // Sets the panel background color. Default: $panel-pg
    $bg:white,
    // Sets the panel padding amount. Default: $panel-padding
    $padding:20px,
    // Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust
    $adjust:true
  );
}

Posts Followed

  • 4
    Replies
  • Rounded Corners on Panels

    By Raj

    scss radius panel

    I'm using Foundation with SCSS so that I can create a custom panel. I'm using the panel mixin and have that basic portion working. I can create a custom panel, set the background color, etc. I'd like to use a very pronounced rounded corner on my pa... (continued)

    Last Reply by Raj about 5 years ago


Following

    No Content

Followers

My Posts


My Comments

You commented on Raj 's post about 5 years

Thanks so much Preston! That works! Rounded corners on panels FTW! :)

You commented on Raj 's post about 5 years

Preston,

Thanks for the response. I tried setting a value for $panel-border-radius, but it's ignored; compass indicates that the generated CSS is unchanged. I'm guessing that indicates that the attribute isn't valid.

Interestingly, I can set the $global-radius which seems to affect the default panel and my buttons, but doesn't change the custom panel that I created using the mixin.

Ideally, I would just like to be able to create a custom panel and determine the radius for only those panels and not have to worry about button radius, etc.

Here's what my custom panel looks like:

.test-panel {
  @include panel(
    // Sets the panel background color. Default: $panel-pg
    $bg:white,
    // Sets the panel padding amount. Default: $panel-padding
    $padding:20px,
    // Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust
    $adjust:true
  );
}

Posts Followed


Following

  • No Content

Followers

  • No Content