Menu icon Foundation
Rounded Corners on Panels

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 panel. When I added the radius class to my custom panel in the HTML it doesn't seem to do anything.

And I can't seem to figure out what I should do with the SCSS to get a very pronounced rounded corner effect.

Any pointers would be greatly appreciated. Thanks!

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 panel. When I added the radius class to my custom panel in the HTML it doesn't seem to do anything.

And I can't seem to figure out what I should do with the SCSS to get a very pronounced rounded corner effect.

Any pointers would be greatly appreciated. Thanks!

Raj

Preston McPeak about 5 years ago

In the _settings.scss file it doesn't look like there is a class for 'radius.' You could try adding a border-radius attribute to the panels section in the settings file or give the panel the $global-radius variable.

If you could show some of the code you're doing that would help if this doesn't solve the problem.

Raj about 5 years ago

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
  );
}

Preston McPeak about 5 years ago

Hey, So to make sure everything works we need to make sure that we are defining the $panel-border-radius mixin before the .test-panel class and after the @include panel we need to add the border-radius attribute. Try this:

$panel-border-radius: 5px;

.test-panel {
  @include panel();
  border-radius: $panel-border-radius;
}

Raj about 5 years ago

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