/** * Copyright 2025 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .alert { background-color: #ddd; color: $white; margin-bottom: 1em; padding: 0.5em; p { font-size: 0.9em; &:last-child { margin-bottom: 0; } } ul { @extend %default-ul; &:last-child { margin-bottom: 0; } } } .alert--large { font-size: 1.1em; padding: 1em; } .alert--medium { font-size: 1em; line-height: 1.3; padding: 0.7em; } $alert-colors: $white $green $blue $red $purple $yellow $orange $lightblue $dark-red $color-blog; $alert-names: 'white' 'green' 'blue' 'red' 'purple' 'yellow' 'orange' 'lightblue' 'dark-red' 'blog'; @each $color in $alert-colors { $i: index($alert-colors, $color); .alert--fg-#{nth($alert-names, $i)} { color: $color; a { color: $color; text-decoration: underline; } } .alert--bg-#{nth($alert-names, $i)} { background-color: $color; } } .alert--error { background-color: $dark-red; color: #fff; } .alert--success { background-color: $green; color: #fff; }