Skip to content

Instantly share code, notes, and snippets.

@mikeblum
Created July 5, 2017 02:16
Show Gist options
  • Save mikeblum/aaffe654fc4f5a74c3b8b313fb43b2eb to your computer and use it in GitHub Desktop.
Save mikeblum/aaffe654fc4f5a74c3b8b313fb43b2eb to your computer and use it in GitHub Desktop.
.bd-callout {
padding: 1.25rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 1px solid #eee;
border-left-width: .25rem;
border-radius: .25rem
}
.bd-callout h4 {
margin-top: 0;
margin-bottom: .25rem
}
.bd-callout p:last-child {
margin-bottom: 0
}
.bd-callout code {
border-radius: .25rem
}
.bd-callout+.bd-callout {
margin-top: -.25rem
}
.bd-callout-info {
border-left-color: #5bc0de
}
.bd-callout-info h4 {
color: #5bc0de
}
.bd-callout-warning {
border-left-color: #f0ad4e
}
.bd-callout-warning h4 {
color: #f0ad4e
}
.bd-callout-danger {
border-left-color: #d9534f
}
.bd-callout-danger h4 {
color: #d9534f
}
@ram-rt
Copy link

ram-rt commented May 3, 2019

Thank you!!!

@altcom-jc
Copy link

SCSS Version


/*
$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;
 */

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem
  }
  p:last-child {
    margin-bottom: 0
  }
  code {
    border-radius: .25rem
  }
}

.bd-callout-primary{
  border-left-color: $primary;
  h2,h3,h4,h5 {
    color: $primary
  }
}

.bd-callout-secondary{
  border-left-color: $secondary;
  h2,h3,h4,h5 {
    color: $secondary
  }
}
.bd-callout-success {
  border-left-color: $success;
  h2,h3,h4,h5 {
    color: $success
  }
}
.bd-callout-info {
  border-left-color: $info;
  h2,h3,h4,h5 {
    color: $info
  }
}
.bd-callout-warning {
  border-left-color: $warning;
  h2,h3,h4,h5 {
    color: $warning
  }
}
.bd-callout-danger {
  border-left-color:$danger;
  h2,h3,h4,h5 {
    color: $danger
  }
}
.bd-callout-light {
  border-left-color: $light;
  h2,h3,h4,h5 {
    color: $light
  }
}
.bd-callout-dark {
  border-left-color: $dark;
  h2,h3,h4,h5 {
    color: $dark
  }
}

@louieh
Copy link

louieh commented Nov 24, 2019

Thank you!

@Snocember
Copy link

Nice!

@jacobwalkr
Copy link

Love this. It looks great.

If anybody's using custom theme colours, this SCSS might help:

.callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;

  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem;
  }

  p:last-child {
    margin-bottom: 0;
  }

  code {
    border-radius: .25rem;
  }
}

@each $color, $value in $theme-colors {
  .callout-#{$color} {
    border-left-color: $value;

    h2,h3,h4,h5 {
      color: $value;
    }
  }
}

@Daniel-Walsh
Copy link

Daniel-Walsh commented May 28, 2020

Love this. It looks great.

If anybody's using custom theme colours, this SCSS might help: ...

@jacobwalkr this is perfect, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment