Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Sass compilation performance when importing all components #1752

Closed
wants to merge 3 commits into from
Closed

Improve Sass compilation performance when importing all components #1752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e3ac13f
Import components without re-importing base layers
36degrees Feb 14, 2020
5978c2b
Move dependent component imports
36degrees Feb 27, 2020
caeb140
Remove redundant imports
36degrees Feb 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/govuk/components/_all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
@import "accordion/accordion";
@import "back-link/back-link";
@import "breadcrumbs/breadcrumbs";
@import "button/button";
@import "checkboxes/checkboxes";
@import "character-count/character-count";
@import "summary-list/summary-list";
@import "date-input/date-input";
@import "details/details";
@import "error-message/error-message";
@import "error-summary/error-summary";
@import "fieldset/fieldset";
@import "file-upload/file-upload";
@import "footer/footer";
@import "hint/hint";
@import "header/header";
@import "input/input";
@import "inset-text/inset-text";
@import "label/label";
@import "panel/panel";
@import "phase-banner/phase-banner";
@import "tabs/tabs";
@import "tag/tag";
@import "radios/radios";
@import "select/select";
@import "skip-link/skip-link";
@import "table/table";
@import "textarea/textarea";
@import "warning-text/warning-text";
@import "accordion/style";
@import "back-link/style";
@import "breadcrumbs/style";
@import "button/style";
@import "checkboxes/style";
@import "character-count/style";
@import "summary-list/style";
@import "date-input/style";
@import "details/style";
@import "error-message/style";
@import "error-summary/style";
@import "fieldset/style";
@import "file-upload/style";
@import "footer/style";
@import "hint/style";
@import "header/style";
@import "input/style";
@import "inset-text/style";
@import "label/style";
@import "panel/style";
@import "phase-banner/style";
@import "tabs/style";
@import "tag/style";
@import "radios/style";
@import "select/style";
@import "skip-link/style";
@import "table/style";
@import "textarea/style";
@import "warning-text/style";
205 changes: 1 addition & 204 deletions src/govuk/components/accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,207 +2,4 @@
@import "../../tools/all";
@import "../../helpers/all";


@include govuk-exports("govuk/component/accordion") {

$govuk-accordion-link-colour: $govuk-link-colour;
$govuk-accordion-link-hover-colour: govuk-colour("light-blue");
$govuk-accordion-border-width: 3px;

.govuk-accordion {
@include govuk-responsive-margin(6, "bottom");
}

// Borders between accordion sections
.govuk-accordion__section {
padding-top: govuk-spacing(3);
}

.govuk-accordion__section-header {
padding-top: govuk-spacing(3);
padding-bottom: govuk-spacing(3);
}

.govuk-accordion__section-heading {
margin-top: 0; // Override browser default
margin-bottom: 0; // Override browser default
}

// Buttons within the sections don’t need default styling
.govuk-accordion__section-button {
@include govuk-font($size: 24, $weight: bold);
display: inline-block;
margin-bottom: 0;
padding-top: govuk-spacing(3);
}

.govuk-accordion__section-summary {
margin-top: govuk-spacing(2);
margin-bottom: 0;
}

// Remove the bottom margin from the last item inside the content
.govuk-accordion__section-content > :last-child {
margin-bottom: 0;
}

// JavaScript enabled
.js-enabled {

.govuk-accordion {
// Border at the bottom of the whole accordion
border-bottom: 1px solid $govuk-border-colour;
}

// Borders between accordion sections
.govuk-accordion__section {
padding-top: 0;
}

// Hide the body of collapsed sections
.govuk-accordion__section-content {
display: none;
@include govuk-responsive-padding(3, "top");
@include govuk-responsive-padding(3, "bottom");
}

// Show the body of expanded sections
.govuk-accordion__section--expanded .govuk-accordion__section-content {
display: block;
}

// This is styled to look like a link not a button
.govuk-accordion__open-all {
@include govuk-font($size: 16);
position: relative;
z-index: 1;
margin: 0;
padding: 0;
border-width: 0;
color: $govuk-link-colour;
background: none;
cursor: pointer;
-webkit-appearance: none;

@include govuk-link-common;
@include govuk-link-style-default;

// Remove default button focus outline in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
}

// Section headers have a pointer cursor as an additional affordance
.govuk-accordion__section-header {
position: relative;
// Safe area on the right to avoid clashing with icon
padding-right: 40px;
border-top: 1px solid $govuk-border-colour;
color: $govuk-accordion-link-colour;
cursor: pointer;
}

// For devices that can't hover such as touch devices,
// remove hover state as it can be stuck in that state (iOS).
@media (hover: none) {
.govuk-accordion__section-header:hover {
border-top-color: $govuk-accordion-link-colour;
box-shadow: inset 0 $govuk-accordion-border-width 0 0 $govuk-accordion-link-colour;
}
}

// Buttons within the headers don’t need default styling
.govuk-accordion__section-button {
@include govuk-typography-common;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
border-width: 0;
color: inherit;
background: none;
text-align: left;
cursor: pointer;
-webkit-appearance: none;

&:focus {
@include govuk-focused-text;
}

// Remove default button focus outline in Firefox
&::-moz-focus-inner {
padding: 0;
border: 0;
}
}

// Extend the touch area of the button to span the section header
.govuk-accordion__section-button:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

.govuk-accordion__section-button:hover:not(:focus) {
text-decoration: underline;
}

// For devices that can't hover such as touch devices,
// remove hover state as it can be stuck in that state (iOS).
@media (hover: none) {
.govuk-accordion__section-button:hover {
text-decoration: none;
}
}

.govuk-accordion__controls {
text-align: right;
}

// Display an icon to the right of each header to indicate open/closed status,
// and as an additional affordance.
.govuk-accordion__icon {
position: absolute;
top: 50%;
right: 15px;
width: 16px;
height: 16px;
margin-top: -8px;
}

.govuk-accordion__icon:after,
.govuk-accordion__icon:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 25%;
height: 25%;
margin: auto;
border: 2px solid transparent;
background-color: govuk-colour("black");
}

.govuk-accordion__icon:before {
width: 100%;
}

.govuk-accordion__icon:after {
height: 100%;
}

// Vertical bar should be hidden when section is open, to display a '-' icon
.govuk-accordion__section--expanded .govuk-accordion__icon:after {
content: " ";
display: none;
}
}
}
@import "./style";
Loading