Skip to content

Instantly share code, notes, and snippets.

@webprogramozo

webprogramozo/border_radius_helper.scss

Created November 2, 2022 10:46
Show Gist options
  • Save webprogramozo/de19dcc0843906b90a8cbbbcde416741 to your computer and use it in GitHub Desktop.
Save webprogramozo/de19dcc0843906b90a8cbbbcde416741 to your computer and use it in GitHub Desktop.
Download ZIP
Some mixins to help customize border radius inside SCSS
Raw
border_radius_helper.scss
@use "sass:map";
$border-radius-default-value: 0.625rem!default;
$border-radius-top-left-value: $border-radius-default-value!default;
$border-radius-top-right-value: $border-radius-default-value!default;
$border-radius-bottom-left-value: $border-radius-default-value!default;
$border-radius-bottom-right-value: $border-radius-default-value!default;
$border-radius: (
top-left: $border-radius-top-left-value,
top-right: $border-radius-top-right-value,
bottom-left: $border-radius-bottom-left-value,
bottom-right: $border-radius-bottom-right-value
)!default;
@mixin border-radius-value($border-radius-top-left: null, $border-radius-top-right: null, $border-radius-bottom-right: null, $border-radius-bottom-left: null){
$local-border-radius: $border-radius;
@if $border-radius-top-left != null{
$local-border-radius: map.set($local-border-radius, "top-left", $border-radius-top-left);
}
@if $border-radius-top-right != null{
$local-border-radius: map.set($local-border-radius, "top-right", $border-radius-top-right);
}
@if $border-radius-bottom-right != null{
$local-border-radius: map.set($local-border-radius, "bottom-right", $border-radius-bottom-right);
}
@if $border-radius-bottom-left != null{
$local-border-radius: map.set($local-border-radius, "bottom-left", $border-radius-bottom-left);
}
$local-border-radius-top-left: map.get($local-border-radius, "top-left");
$local-border-radius-top-right: map.get($local-border-radius, "top-right");
$local-border-radius-bottom-right: map.get($local-border-radius, "bottom-right");
$local-border-radius-bottom-left: map.get($local-border-radius, "bottom-left");
@if $local-border-radius-top-left != null and $local-border-radius-top-left == $local-border-radius-top-right and $local-border-radius-top-left == $local-border-radius-bottom-left and $local-border-radius-top-left == $local-border-radius-bottom-right{
border-radius: $local-border-radius-top-left;
}@else{
border-top-left-radius: $local-border-radius-top-left;
border-top-right-radius: $local-border-radius-top-right;
border-bottom-right-radius: $local-border-radius-bottom-right;
border-bottom-left-radius: $local-border-radius-bottom-left;
}
}
@mixin border-radius-left-value($border-radius-top-left: null, $border-radius-bottom-left: null, $border-radius-other: 0){
@if $border-radius-top-left != null and $border-radius-bottom-left == null{
$border-radius-bottom-left: $border-radius-top-left;
}
@include border-radius-value($border-radius-top-left, $border-radius-other, $border-radius-other, $border-radius-bottom-left);
}
@mixin border-radius-right-value($border-radius-top-right: null, $border-radius-bottom-right: null, $border-radius-other: 0){
@if $border-radius-top-right != null and $border-radius-bottom-right == null{
$border-radius-bottom-right: $border-radius-top-right;
}
@include border-radius-value($border-radius-other, $border-radius-top-right, $border-radius-bottom-right, $border-radius-other);
}
@mixin border-radius-top-value($border-radius-top-left: null, $border-radius-top-right: null, $border-radius-other: 0){
@if $border-radius-top-left != null and $border-radius-top-right == null{
$border-radius-top-right: $border-radius-top-left;
}
@include border-radius-value($border-radius-top-left, $border-radius-top-right, $border-radius-other, $border-radius-other);
}
@mixin border-radius-bottom-value($border-radius-bottom-right: null, $border-radius-bottom-left: null, $border-radius-other: 0){
@if $border-radius-bottom-right != null and $border-radius-bottom-left == null{
$border-radius-bottom-left: $border-radius-bottom-right;
}
@include border-radius-value($border-radius-other, $border-radius-other, $border-radius-bottom-right, $border-radius-bottom-left);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment