diff --git a/src/components/tag/_tag.scss b/src/components/tag/_tag.scss index 18c8488..8dc37be 100644 --- a/src/components/tag/_tag.scss +++ b/src/components/tag/_tag.scss @@ -2,110 +2,109 @@ #TAG ========================================================================== */ - $color_tag-aqua-green-background: #cce7e6; - $color_tag-aqua-green-text: #004642; - $color_tag-blue-background: #d2e1ef; - $color_tag-blue-text: #01407d; - $color_tag-green-text: #03501d; - $color_tag-green-background: #c9e6d8; - $color_tag-grey-background: #e6e2e2; - $color_tag-grey-text: #303e4f; - $color_tag-purple-background: #d9d7eb; - $color_tag-purple-text: #532d8b; - $color_tag-orange-background: #fae1bc; - $color_tag-orange-text: #533c00; - $color_tag-pink-background: #efd3e3; - $color_tag-pink-text: #57133a; - $color_tag-red-background: #f8d9d9; - $color_tag-red-text: #7e0d04; - $color_tag-yellow-background: #eee8a7; - $color_tag-yellow-text: #5b4701; - - .nhsapp-tag { - @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); - background-color: $color_tag-blue-background; - border-radius: 2px; - color: $color_tag-blue-text; - padding: 4px 10px; - display: inline-block; - - @include mq($from: tablet) { - line-height: 1.4285em; - } +$color_tag-aqua-green-background: #cce7e6; +$color_tag-aqua-green-text: #004642; +$color_tag-blue-background: #d2e1ef; +$color_tag-blue-text: #01407d; +$color_tag-green-text: #03501d; +$color_tag-green-background: #c9e6d8; +$color_tag-grey-background: #e6e2e2; +$color_tag-grey-text: #303e4f; +$color_tag-purple-background: #d9d7eb; +$color_tag-purple-text: #532d8b; +$color_tag-orange-background: #fae1bc; +$color_tag-orange-text: #533c00; +$color_tag-pink-background: #efd3e3; +$color_tag-pink-text: #57133a; +$color_tag-red-background: #f8d9d9; +$color_tag-red-text: #7e0d04; +$color_tag-yellow-background: #eee8a7; +$color_tag-yellow-text: #5b4701; + +.nhsapp-tag { + @include nhsuk-font($size: 16, $weight: normal, $line-height: 1.25); + background-color: $color_tag-blue-background; + border-radius: 2px; + color: $color_tag-blue-text; + padding: 4px 10px; + display: inline-block; + + @include mq($from: tablet) { + line-height: 1.4285em; } - - /* Colour variants +} + +/* Colour variants ========================================================================== */ - - .nhsapp-tag--white { - background-color: $color_nhsuk-white; - border-color: $color_nhsuk-black; - color: $color_nhsuk-black; - } - - .nhsapp-tag--grey { - background-color: $color_tag-grey-background; - border-color: $color_tag-grey-text; - color: $color_tag-grey-text; - } - - .nhsapp-tag--green { - background-color: $color_tag-green-background; - border-color: $color_tag-green-text; - color: $color_tag-green-text; - } - - .nhsapp-tag--aqua-green { - background-color: $color_tag-aqua-green-background; - border-color: $color_tag-aqua-green-text; - color: $color_tag-aqua-green-text; - } - - .nhsapp-tag--blue { - background-color: $color_tag-blue-background; - border-color: $color_tag-blue-text; - color: $color_tag-blue-text; - } - - .nhsapp-tag--purple { - background-color: $color_tag-purple-background; - border-color: $color_tag-purple-text; - color: $color_tag-purple-text; - } - - .nhsapp-tag--pink { - background-color: $color_tag-pink-background; - border-color: $color_tag-pink-text; - color: $color_tag-pink-text; - } - - .nhsapp-tag--red { - background-color: $color_tag-red-background; - border-color: $color_tag-red-text; - color: $color_tag-red-text; - } - - .nhsapp-tag--orange { - background-color: $color_tag-orange-background; - border-color: $color_tag-orange-text; - color: $color_tag-orange-text; - } - - .nhsapp-tag--yellow { - background-color: $color_tag-yellow-background; - border-color: $color_tag-yellow-text; - color: $color_tag-yellow-text; - } - - .nhsapp-tag--text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-text-color; - } - - .nhsapp-tag--secondary-text-color { - background-color: transparent; - border-color: transparent; - color: $nhsuk-secondary-text-color; - } - \ No newline at end of file + +.nhsapp-tag--white { + background-color: $color_nhsuk-white; + border-color: $color_nhsuk-black; + color: $color_nhsuk-black; +} + +.nhsapp-tag--grey { + background-color: $color_tag-grey-background; + border-color: $color_tag-grey-text; + color: $color_tag-grey-text; +} + +.nhsapp-tag--green { + background-color: $color_tag-green-background; + border-color: $color_tag-green-text; + color: $color_tag-green-text; +} + +.nhsapp-tag--aqua-green { + background-color: $color_tag-aqua-green-background; + border-color: $color_tag-aqua-green-text; + color: $color_tag-aqua-green-text; +} + +.nhsapp-tag--blue { + background-color: $color_tag-blue-background; + border-color: $color_tag-blue-text; + color: $color_tag-blue-text; +} + +.nhsapp-tag--purple { + background-color: $color_tag-purple-background; + border-color: $color_tag-purple-text; + color: $color_tag-purple-text; +} + +.nhsapp-tag--pink { + background-color: $color_tag-pink-background; + border-color: $color_tag-pink-text; + color: $color_tag-pink-text; +} + +.nhsapp-tag--red { + background-color: $color_tag-red-background; + border-color: $color_tag-red-text; + color: $color_tag-red-text; +} + +.nhsapp-tag--orange { + background-color: $color_tag-orange-background; + border-color: $color_tag-orange-text; + color: $color_tag-orange-text; +} + +.nhsapp-tag--yellow { + background-color: $color_tag-yellow-background; + border-color: $color_tag-yellow-text; + color: $color_tag-yellow-text; +} + +.nhsapp-tag--text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-text-color; +} + +.nhsapp-tag--secondary-text-color { + background-color: transparent; + border-color: transparent; + color: $nhsuk-secondary-text-color; +}