diff --git a/packages/components/panel/_panel.scss b/packages/components/panel/_panel.scss index b28adaa77..05aa6a17a 100644 --- a/packages/components/panel/_panel.scss +++ b/packages/components/panel/_panel.scss @@ -1,23 +1,23 @@ -// ========================================================================== -// COMPONENTS / #PANEL -// ========================================================================== - -// Original code taken from GDS (Government Digital Service) -// https://github.com/alphagov/govuk-frontend - -// 1. Adds a transparent border for high contrast modes -// 2. This subtracts the transparent border width from the padding (because the border -// visually adds to the total padding) -// 3. This is an if-all-else-fails attempt to stop long words from overflowing the container -// on very narrow viewports by forcing them to break and wrap instead. This -// overflowing is more likely to happen when user increases text size on a mobile eg. using -// iOS Safari text resize controls. - -// The overflowing is a particular problem with the panel component since it uses white -// text: when the text overflows the container, it is invisible on the white (page) -// background. When the text in our other components overflow, the user might have to scroll -// horizontally to view it but the the text remains legible. -// 4. Support IE (autoprefixer doesn't add this as it's not a prefix) +//// +/// Panel component +/// +/// 1. Adds a transparent border for high contrast modes +/// 2. This subtracts the transparent border width from the padding (because the border +/// visually adds to the total padding) +/// 3. This is an if-all-else-fails attempt to stop long words from overflowing the container +/// on very narrow viewports by forcing them to break and wrap instead. This +/// overflowing is more likely to happen when user increases text size on a mobile eg. using +/// iOS Safari text resize controls. + +/// The overflowing is a particular problem with the panel component since it uses white +/// text: when the text overflows the container, it is invisible on the white (page) +/// background. When the text in our other components overflow, the user might have to scroll +/// horizontally to view it but the text remains legible. +/// 4. Support IE (autoprefixer doesn't add this as it's not a prefix) +/// +/// @group components +/// @link https://github.com/alphagov/govuk-frontend Original code taken from GDS (Government Digital Service) +//// $nhsuk-border-width-panel: nhsuk-spacing(1);