app/assets/stylesheets/components/file-upload.scss

.js-enabled {

  .file-upload {

    &-label {

      @include bold-19;
      display: block;
      margin: 0 0 10px 0;

      .error-message {
        padding: 0;
      }

    }

    &-field {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;

      &:focus + .file-upload-button {
        background: $govuk-focus-colour;
        color: $govuk-focus-text-colour;
      }

    }

    &-filename {
      @include bold-19;
      display: inline-block;
      padding-left: govuk-spacing(3);
    }

    &-submit {
      display: none;
    }

    &-alternate-link {
      display: inline-block;
      line-height: 35px;

      a {
        font-weight: bold;
      }

    }

  }

}
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`.js-enabled {`

			`.file-upload {`

			`&-label {`
Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`@include bold-19;`
			`display: block;`
			`margin: 0 0 10px 0;`
Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00
			`.error-message {`
			`padding: 0;`
			`}`

Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`}`

			`&-field {`
			`width: 0.1px;`
			`height: 0.1px;`
			`opacity: 0;`
			`overflow: hidden;`
			`position: absolute;`
			`z-index: -1;`

Fix problems found by SASS Lint 2016-02-08 11:11:55 +00:00			`&:focus + .file-upload-button {`
Replace uses of $yellow for focus There are a few places where we missed updating to the new focus styles because they were using the `$yellow` SASS variable and not the `$focus-colour` variable. This commit updates them to the new colour, and where needed adds the black lower border to match. 2020-09-23 10:50:43 +01:00			`background: $govuk-focus-colour;`
			`color: $govuk-focus-text-colour;`
Fix problems found by SASS Lint 2016-02-08 11:11:55 +00:00			`}`

Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`}`

			`&-filename {`
Fix problems found by SASS Lint 2016-02-08 11:11:55 +00:00			`@include bold-19;`
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`display: inline-block;`
Replace $gutter with govuk-spacing function Replaced `$gutter` and similar variables such as `$gutter-half` with the `govuk-spacing()` static spacing function. This uses `govuk-spacing()` instead of `$govuk-gutter` because `$govuk-gutter` should only be used for the gaps in between grid columns and we were mostly using `$gutter` to add more space around elements. There are other places in the SCSS files where we had hardcoded a measurement in px which could be replaced with `govuk-spacing`, but this commit only replaces the existing uses of `$gutter`. 2020-02-21 13:21:44 +00:00			`padding-left: govuk-spacing(3);`
Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`}`

Fix missing CSRF token on send SMS page As part of https://github.com/alphagov/notifications-admin/pull/187 the file upload pattern was changed to auto-submit once a file had been picked. The form that was submitted was, however, missing a CSRF token, as well as a submit button for non-JS users. This commit makes the file upload pattern self-contained, so that it will always include a form with a CSRF token in a hidden input and a submit button, which is then hidden when Javascript loads. 2016-02-22 21:37:32 +00:00			`&-submit {`
			`display: none;`
			`}`

Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves. 2016-05-05 08:39:36 +01:00			`&-alternate-link {`
			`display: inline-block;`
			`line-height: 35px;`
Make the tour interactive _The code for this is quite hacky and light on tests. But I’d really like to get it in the app for the research tomorrow to see how well the feature works._ This commit changes the tour from being a set of static screens to some help which guides you through the process of sending your first test message. The theory behind this is that what users are really struggling with is the concept of a variable, rather than the relationship between the placeholders and the column headers. And like learning to program, the best way to learn is by taking an example and modifying it to your own needs. This means that when someone adds their first service we set them up an example email template and an example text message template. Then there is a guided, three step process where _all_ the user can do is send a test message to themselves. Once the message is sent, the user still has the example templates which they can edit, rather than having to remember what they’re supposed to be doing. 2016-05-20 12:05:05 +01:00
			`a {`
Remove all redundant link CSS Giving all links the GOVUK Frontend classes, and the new `govuk-link--destructive` class, means some styles are already applied. This strips out those styles. Note: there's still a good amount of styling, most of which is to make the focus styles specific to the space the link is in. These will need reviewing when GOVUK Frontend is bumped past version 3 as this brings in new focus styles. 2020-02-11 22:23:03 +00:00			`font-weight: bold;`
Make the tour interactive _The code for this is quite hacky and light on tests. But I’d really like to get it in the app for the research tomorrow to see how well the feature works._ This commit changes the tour from being a set of static screens to some help which guides you through the process of sending your first test message. The theory behind this is that what users are really struggling with is the concept of a variable, rather than the relationship between the placeholders and the column headers. And like learning to program, the best way to learn is by taking an example and modifying it to your own needs. This means that when someone adds their first service we set them up an example email template and an example text message template. Then there is a guided, three step process where _all_ the user can do is send a test message to themselves. Once the message is sent, the user still has the example templates which they can edit, rather than having to remember what they’re supposed to be doing. 2016-05-20 12:05:05 +01:00			`}`

Make send a test teach you how placeholders work This commit does two main things: - adds textboxes to the send yourself a test page, so you can replace ((name)) with ‘Chris’, or whatever your name is - rejigs the send page a bit to make it clearer what the CSV upload is for and how to use it The idea being that, since most users go into ‘send yourself a test’ first, it teaches them about how placeholders work by making them do the replacing themselves. 2016-05-05 08:39:36 +01:00			`}`

Add custom file upload component The default browser file upload control is difficult to style, but looks totally out of place. This commit replaces it with one that has a GOV.UK style button, as a first step. Based heavily on this example: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ 2016-02-02 17:28:30 +00:00			`}`

			`}`