Skip to content

Commit

Permalink
Merge branch 'io-160' into test
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonaashl
jonaashl committed Nov 17, 2023
2 parents 96fdaf5 + e3e0f63 commit 9176e83
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 39 deletions.
40 changes: 23 additions & 17 deletions src/components/form/date/date.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ <h3 class="ods-devtools-text-preset-1">Default</h3>
<div class="ods-devtools-code__box">
<div class="ods-grid">
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium">
<div class="ods-date">
<label class="ods-date__label">
Type date
<input type="text" class="ods-date__input" autocomplete="off" placeholder="dd/mm/yyyy" />
</label>
<div class="ods-devtools-code__box__code">
<div class="ods-date">
<label class="ods-date__label">
Type date
<input type="text" class="ods-date__input" autocomplete="off" placeholder="dd.mm.yyyy" />
</label>
</div>
</div>
</div>
</div>
Expand All @@ -28,12 +30,14 @@ <h3 class="ods-devtools-text-preset-1">Required</h3>
<div class="ods-devtools-code__box">
<div class="ods-grid">
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium">
<div class="ods-date">
<label class="ods-date__label">
Type date
<input type="text" class="ods-date__input" autocomplete="off" placeholder="dd/mm/yyyy" />
</label>
<div class="ods-date__required" id="required-1">* Required</div>
<div class="ods-devtools-code__box__code">
<div class="ods-date">
<label class="ods-date__label">
Type date
<input type="text" class="ods-date__input" autocomplete="off" placeholder="dd.mm.yyyy" />
</label>
<div class="ods-date__required" id="required-1">* Required</div>
</div>
</div>
</div>
</div>
Expand All @@ -47,8 +51,10 @@ <h3 class="ods-devtools-text-preset-1">Datepicker</h3>
<div class="ods-devtools-code__box">
<div class="ods-grid">
<div class="ods-grid__column--12 ods-grid__column--6-breakpoint-medium">
<div id="ods-date-vue">
<ods-date :date="date" :display-date="displayDate" label="Pick a date" v-on:set="setDate" :min="minDate" :max="maxDate"></ods-date>
<div class="ods-devtools-code__box__code">
<div id="ods-date-vue">
<ods-date :date="date" :display-date="displayDate" label="Pick a date" v-on:set="setDate" :min="minDate" :max="maxDate"></ods-date>
</div>
</div>
</div>
</div>
Expand All @@ -61,7 +67,7 @@ <h3 class="ods-devtools-text-preset-1">Datepicker</h3>
<!-- Developer mode -->
<div class="ods-devtools-devmode">
<div class="ods-grid ods-grid--gap ods-grid--gutter">
<div class="ods-grid__column--12">
<div class="ods-grid__column--7">
<h3 class="ods-devtools-text-preset-2">Default</h3>
<div class="ods-date">
<label class="ods-date__label">
Expand All @@ -71,7 +77,7 @@ <h3 class="ods-devtools-text-preset-2">Default</h3>
</div>
</div>

<div class="ods-grid__column--12">
<div class="ods-grid__column--7">
<div class="ods-date ods-date--error">
<label class="ods-date__label">
Error/invalid
Expand All @@ -81,7 +87,7 @@ <h3 class="ods-devtools-text-preset-2">Default</h3>
</div>
</div>

<div class="ods-grid__column--12">
<div class="ods-grid__column--7">
<div class="ods-date">
<label class="ods-date__label">
Type date
Expand All @@ -91,7 +97,7 @@ <h3 class="ods-devtools-text-preset-2">Default</h3>
</div>
</div>

<div class="ods-grid__column--12">
<div class="ods-grid__column--6">
<h3 class="ods-devtools-text-preset-2">Datepicker</h3>
<div id="ods-date-vue-dev">
<ods-date :date="date" :display-date="displayDate" label="Pick a date" v-on:set="setDate" :min="minDate" :max="maxDate"></ods-date>
Expand Down
43 changes: 21 additions & 22 deletions src/components/form/date/date.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,74 +97,75 @@
&:disabled {
cursor: not-allowed;
color: states.$disabled-text;

&:hover {
background-color: transparent;
color: states.$disabled-text;
}
}

&--next {
right: 5px;
right: 0.3rem;

&::after {
content: map.get(icon-map.$icons, "chevron-thin-right") !important;
font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
}
}

&--prev {
left: 5px;
left: 0.2rem;

&::after {
content: map.get(icon-map.$icons, "chevron-thin-left") !important;
font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
display: flex;
align-items: center;
justify-content: center;
}
}
}

/**
* nrk-core-datepicker styling
* - Element styles since missing classes on child component
*/
&__calendar {
width: 100%;

caption,
th {
font-weight: normal;
}

caption {
@extend %ods-text--size-juliett;
@extend %ods-margin-bottom-3, %ods-margin-top-1;

text-transform: capitalize;
}

thead {
border-bottom: 1px solid colors.$blue-dark;
border-top: 1px solid colors.$blue-dark;
}

th {
@extend %ods-text--size-kilo;
@extend %ods-padding-vertical-1, %ods-padding-horizontal-0;
@extend %ods-text--align-center;

// text-align: center;
text-transform: capitalize;
}

td {
// text-align: center;
@extend %ods-text--align-center;

padding-top: 0.25rem;

button {
@extend %ods-text--weight-medium;

color: colors.$blue-dark;
width: 1.875rem;
height: 1.875rem;
Expand All @@ -174,11 +175,11 @@
font-size: inherit;
font-family: inherit;
padding: 0;

&:focus-visible {
outline: 0.25rem solid colors.$purple-light;
outline: 0.25rem solid colors.$purple-light;
}

&:hover {
background-color: colors.$blue-state;
color: colors.$white;
Expand All @@ -188,18 +189,16 @@
&[data-adjacent="true"] {
@extend %ods-text--size-lima;
@extend %ods-text--weight-light;

// font-size: typography.$size-14;
}

&:not(:disabled) {
cursor: pointer;
}

// today
&[aria-current="date"] {
background-color: colors.$beige;

&:focus,
&:hover {
color: colors.$blue-dark;
Expand Down

0 comments on commit 9176e83

Please sign in to comment.