@ministryofjustice/frontend 4.0.1 → 5.1.0

package/moj/components/date-picker/_date-picker.scss.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/moj/components/date-picker/_date-picker.scss"],"names":[],"mappings":"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","file":"_date-picker.scss","sourcesContent":["@use \"../../settings/colours\" as *;\n@use \"../../vendor/govuk-frontend\" as *;\n\n.moj-datepicker {\n  position: relative;\n  @include govuk-font(16);\n}\n\n.moj-datepicker__dialog {\n  display: none;\n  position: absolute;\n  z-index: 2;\n  top: 0;\n  min-width: 280px;\n  padding: govuk-spacing(4);\n  transition:\n    background-color 0.2s,\n    outline-color 0.2s;\n  outline: 2px solid $govuk-text-colour;\n  outline-offset: -2px;\n  background-color: govuk-colour(\"white\");\n}\n\n.moj-datepicker__dialog--open {\n  display: block;\n}\n\n.moj-datepicker__dialog-header {\n  display: flex;\n  position: relative;\n  margin-bottom: govuk-spacing(2);\n  align-items: center;\n  justify-content: space-between;\n}\n\n.moj-datepicker__dialog-title {\n  margin-top: 0;\n  margin-bottom: 0;\n  font-weight: bold;\n  @include govuk-font(16);\n}\n\n.moj-datepicker__dialog-navbuttons {\n  display: flex;\n  align-items: center;\n}\n\n.moj-datepicker__calendar {\n  margin-bottom: govuk-spacing(4);\n  border-collapse: collapse;\n\n  tbody:focus-within {\n    outline: 2px solid $govuk-focus-colour;\n  }\n\n  td {\n    margin: 0;\n    padding: 0;\n    border: 0;\n    outline: 0;\n  }\n\n  th {\n    color: $govuk-text-colour;\n    font-weight: bold;\n    @include govuk-font(16);\n  }\n}\n\n.moj-datepicker__dialog > .govuk-button-group {\n  margin-bottom: 0;\n\n  > * {\n    margin-bottom: 0;\n  }\n}\n\n.moj-datepicker__button {\n  position: relative;\n  width: 44px;\n  height: 40px;\n  margin: 0;\n  padding: 0;\n  border-width: 0;\n  outline: 2px solid rgba(0, 0, 0, 0);\n  outline-offset: -2px;\n  color: $govuk-text-colour;\n  background-color: transparent;\n  @include govuk-font(16);\n\n  @media (forced-colors: active) {\n    // Don't show the bottom bar in forced-color modes as it blocks the outline\n    &::after {\n      display: none;\n    }\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 4px;\n    background-color: transparent;\n  }\n\n  &[aria-disabled=\"true\"],\n  &[aria-disabled=\"true\"]:hover {\n    color: $govuk-text-colour;\n    background-color: govuk-colour(\"light-grey\");\n    text-decoration: line-through;\n    cursor: not-allowed;\n  }\n\n  &:hover {\n    color: $govuk-text-colour;\n    background-color: $moj-button-menu-color;\n    text-decoration: none;\n    -webkit-box-decoration-break: clone;\n    box-decoration-break: clone;\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-color: transparent;\n    color: $govuk-text-colour;\n    background-color: $govuk-focus-colour;\n    -webkit-box-decoration-break: clone;\n    box-decoration-break: clone;\n\n    &::after {\n      background-color: $govuk-text-colour;\n    }\n  }\n\n  &:focus:hover {\n    outline-color: $govuk-focus-colour;\n    background-color: $moj-button-menu-color;\n\n    &::after {\n      background-color: transparent;\n    }\n  }\n\n  &--current:not(:focus) {\n    outline-color: $govuk-link-colour;\n    color: govuk-colour(\"white\");\n    background-color: $govuk-link-colour;\n\n    &::after {\n      background-color: $govuk-link-colour;\n    }\n  }\n\n  &--current[tabindex=\"-1\"] {\n    outline-color: transparent;\n    color: currentcolor;\n    background: transparent;\n\n    &::after {\n      background-color: transparent;\n    }\n  }\n\n  &--today {\n    border: 2px solid $govuk-text-colour;\n  }\n\n  &--selected:not(:focus) {\n    color: govuk-colour(\"white\");\n    background-color: $govuk-link-colour;\n\n    &::after {\n      background-color: $govuk-link-colour;\n    }\n\n    &:hover {\n      outline-color: $govuk-link-colour;\n      color: $govuk-text-colour;\n      background-color: $moj-button-menu-color;\n\n      &::after {\n        background-color: transparent;\n      }\n    }\n  }\n}\n\n/*\n Default input with to .govuk-input--width-10 (10 chars)\n Allow that to be overriden by the input width modifiers or global width overrides.\n Width classes less than 10ch not included as that is narrower than a date.\n*/\n// stylelint-disable selector-no-qualifying-type\n.moj-datepicker input {\n  max-width: 11.5em; // govuk-input--width-10\n\n  &.govuk-input--width-30 {\n    max-width: 29.5em;\n  }\n\n  &.govuk-input--width-20 {\n    max-width: 20.5em;\n  }\n\n  &.govuk-\\!-width-full {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n  }\n\n  &.govuk-\\!-width-three-quarters {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n\n    @include govuk-media-query($from: tablet) {\n      // stylelint-disable-next-line declaration-no-important\n      width: 75% !important;\n    }\n  }\n\n  &.govuk-\\!-width-two-thirds {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n\n    @include govuk-media-query($from: tablet) {\n      // stylelint-disable-next-line declaration-no-important\n      width: 66.66% !important;\n    }\n  }\n\n  &.govuk-\\!-width-one-half {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n\n    @include govuk-media-query($from: tablet) {\n      // stylelint-disable-next-line declaration-no-important\n      width: 50% !important;\n    }\n  }\n\n  &.govuk-\\!-width-one-third {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n\n    @include govuk-media-query($from: tablet) {\n      // stylelint-disable-next-line declaration-no-important\n      width: 33.33% !important;\n    }\n  }\n\n  &.govuk-\\!-width-one-quarter {\n    // stylelint-disable-next-line declaration-no-important\n    width: 100% !important;\n    max-width: none;\n\n    @include govuk-media-query($from: tablet) {\n      // stylelint-disable-next-line declaration-no-important\n      width: 25% !important;\n    }\n  }\n}\n// stylelint-enable selector-no-qualifying-type\n\n.moj-datepicker__wrapper {\n  position: relative;\n}\n\n@media (min-width: 768px) {\n  .moj-datepicker__dialog {\n    width: auto;\n  }\n}\n\n.moj-datepicker__toggle {\n  height: 40px;\n  padding-top: 6px;\n  border: none;\n  border-bottom: 4px solid rgba(0, 0, 0, 0);\n  outline: 3px solid rgba(0, 0, 0, 0);\n  outline-offset: -3px;\n  color: govuk-colour(\"white\");\n  background-color: $govuk-text-colour;\n  cursor: pointer;\n\n  &:focus {\n    border-bottom: 4px solid $govuk-text-colour;\n    color: $govuk-text-colour;\n    background-color: $govuk-focus-colour;\n  }\n\n  &:hover {\n    border-bottom: 4px solid $moj-button-menu-color;\n    color: $govuk-text-colour;\n    background-color: $moj-button-menu-color;\n  }\n\n  &:focus:hover {\n    border-bottom: 4px solid $govuk-text-colour;\n    color: $govuk-text-colour;\n    background-color: $moj-button-menu-color;\n  }\n}\n"]}