Skip to content

Commit

Permalink
Use double slased comments
Browse files Browse the repository at this point in the history
  • Loading branch information
roshaanbajwa committed Feb 13, 2025
1 parent 288ed1f commit 6913a78
Showing 1 changed file with 17 additions and 18 deletions.
35 changes: 17 additions & 18 deletions packages/components/panel/_panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,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)
*/
// 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)


$nhsuk-border-width-panel: nhsuk-spacing(1);

Expand Down

0 comments on commit 6913a78

Please sign in to comment.