@norges-domstoler/dds-components 22.7.0 → 22.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1871,8 +1871,6 @@
1871
1871
  display: inline-flex;
1872
1872
  align-items: center;
1873
1873
  justify-content: center;
1874
- height: -moz-fit-content;
1875
- height: fit-content;
1876
1874
  width: -moz-fit-content;
1877
1875
  width: fit-content;
1878
1876
  cursor: pointer;
@@ -2922,24 +2920,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2922
2920
  /* src/components/DetailList/DetailList.module.css */
2923
2921
  .DetailList_list {
2924
2922
  display: table;
2925
- width: 100%;
2926
- border-spacing: 0;
2927
- border-collapse: collapse;
2928
- }
2929
- .DetailList_list--with-dividers {
2930
- .DetailList_row {
2931
- border-bottom: 1px solid var(--dds-color-border-default);
2932
- }
2933
- }
2934
- .DetailList_list--striped {
2935
- .DetailList_row {
2936
- &:nth-of-type(even) {
2937
- background-color: var(--dds-color-surface-default);
2938
- }
2939
- &:nth-of-type(odd) {
2940
- background-color: var(--dds-color-surface-subtle);
2941
- }
2942
- }
2943
2923
  }
2944
2924
  .DetailList_list--striped-with-bp {
2945
2925
  .DetailList_row {
@@ -2995,6 +2975,154 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
2995
2975
  font-weight: var(--dds-font-weight-bold);
2996
2976
  }
2997
2977
 
2978
+ /* src/components/Table/normal/Table.module.css */
2979
+ .Table_wrapper {
2980
+ width: 100%;
2981
+ }
2982
+ .Table_wrapper--scrollable {
2983
+ overflow-x: auto;
2984
+ }
2985
+ .Table_table {
2986
+ width: 100%;
2987
+ border-spacing: 0;
2988
+ border-collapse: collapse;
2989
+ }
2990
+ .Table_table--with-dividers {
2991
+ .Table_row--body {
2992
+ border-bottom: 1px solid var(--dds-color-border-subtle);
2993
+ }
2994
+ .Table_row--colapsible-header--open {
2995
+ border-bottom: none;
2996
+ }
2997
+ }
2998
+ .Table_table--sticky-header {
2999
+ tr th {
3000
+ position: sticky;
3001
+ top: 0;
3002
+ z-index: var(--dds-zindex-sticky);
3003
+ }
3004
+ }
3005
+ .Table_table--with-stripes {
3006
+ .Table_row--body {
3007
+ &:nth-of-type(even) {
3008
+ background-color: var(--dds-color-surface-subtle);
3009
+ }
3010
+ &:nth-of-type(odd) {
3011
+ background-color: var(--dds-color-surface-default);
3012
+ }
3013
+ }
3014
+ }
3015
+ .Table_table--small {
3016
+ td,
3017
+ th {
3018
+ padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
3019
+ }
3020
+ th {
3021
+ font: var(--dds-font-heading-xsmall);
3022
+ letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
3023
+ background-color: var(--dds-color-surface-default);
3024
+ }
3025
+ }
3026
+ .Table_table--with-stripes.Table_table--small {
3027
+ .Table_row--body {
3028
+ &:nth-of-type(odd) {
3029
+ background-color: var(--dds-color-surface-subtle);
3030
+ }
3031
+ &:nth-of-type(even) {
3032
+ background-color: var(--dds-color-surface-default);
3033
+ }
3034
+ }
3035
+ }
3036
+ .Table_table--medium {
3037
+ th {
3038
+ font: var(--dds-font-heading-small);
3039
+ }
3040
+ td,
3041
+ th {
3042
+ padding: var(--dds-spacing-x0-75);
3043
+ }
3044
+ }
3045
+ .Table_table--large {
3046
+ th {
3047
+ font: var(--dds-font-heading-small);
3048
+ }
3049
+ td,
3050
+ th {
3051
+ padding: var(--dds-spacing-x1-5) var(--dds-spacing-x0-75);
3052
+ }
3053
+ }
3054
+ .Table_row {
3055
+ @media (prefers-reduced-motion: no-preference) {
3056
+ transition:
3057
+ background-color var(--dds-motion-micro-state),
3058
+ border-color var(--dds-motion-micro-state),
3059
+ box-shadow var(--dds-motion-micro-state);
3060
+ }
3061
+ }
3062
+ .Table_row--body {
3063
+ background-color: var(--dds-color-surface-default);
3064
+ &.Table_row--sum,
3065
+ &.Table_row--sum:nth-of-type(even),
3066
+ &.Table_row--sum:nth-of-type(odd) {
3067
+ border-bottom: 1px solid var(--dds-color-border-default);
3068
+ border-top: 1px solid var(--dds-color-border-default);
3069
+ background: var(--dds-color-surface-default);
3070
+ }
3071
+ &.Table_row--selected,
3072
+ &.Table_row--selected:nth-of-type(even),
3073
+ &.Table_row--selected:nth-of-type(odd) {
3074
+ background-color: var(--dds-color-surface-selected-default);
3075
+ }
3076
+ &.Table_row--hoverable:hover {
3077
+ background-color: var(--dds-color-surface-hover-default);
3078
+ }
3079
+ }
3080
+ .Table_cell--head {
3081
+ background-color: var(--dds-color-brand-primary-subtle);
3082
+ color: var(--dds-color-text-on-primary-subtle);
3083
+ }
3084
+ .Table_cell--left {
3085
+ text-align: left;
3086
+ }
3087
+ .Table_cell--right {
3088
+ text-align: right;
3089
+ }
3090
+ .Table_cell--center {
3091
+ text-align: center;
3092
+ }
3093
+ .Table_cell__inner {
3094
+ display: flex;
3095
+ align-items: center;
3096
+ gap: var(--dds-spacing-x0-75);
3097
+ }
3098
+ .Table_sort-button {
3099
+ gap: var(--dds-spacing-x0-5);
3100
+ -webkit-user-select: text;
3101
+ -moz-user-select: text;
3102
+ user-select: text;
3103
+ display: flex;
3104
+ align-items: center;
3105
+ color: inherit;
3106
+ @media (prefers-reduced-motion: no-preference) {
3107
+ transition: var(--dds-focus-transition);
3108
+ }
3109
+ }
3110
+ .Table_collapse-button {
3111
+ border-radius: var(--dds-border-radius-button);
3112
+ margin-left: auto;
3113
+ margin-right: auto;
3114
+ display: flex;
3115
+ align-items: center;
3116
+ justify-content: center;
3117
+ color: inherit;
3118
+ @media (prefers-reduced-motion: no-preference) {
3119
+ transition: all var(--dds-motion-micro-state);
3120
+ }
3121
+ &:hover {
3122
+ background-color: var(--dds-color-surface-hover-default);
3123
+ }
3124
+ }
3125
+
2998
3126
  /* src/components/Drawer/Drawer.module.css */
2999
3127
  .Drawer_container {
3000
3128
  --dds-drawer-content-container-padding: var(--dds-spacing-x0-25);
@@ -4025,154 +4153,6 @@ input[data-indeterminate=true] ~ .SelectionControl_selection-control:after {
4025
4153
  border-left: 1px solid var(--dds-color-border-on-action) !important;
4026
4154
  }
4027
4155
 
4028
- /* src/components/Table/normal/Table.module.css */
4029
- .Table_wrapper {
4030
- width: 100%;
4031
- }
4032
- .Table_wrapper--scrollable {
4033
- overflow-x: auto;
4034
- }
4035
- .Table_table {
4036
- width: 100%;
4037
- border-spacing: 0;
4038
- border-collapse: collapse;
4039
- }
4040
- .Table_table--with-dividers {
4041
- .Table_row--body {
4042
- border-bottom: 1px solid var(--dds-color-border-subtle);
4043
- }
4044
- .Table_row--colapsible-header--open {
4045
- border-bottom: none;
4046
- }
4047
- }
4048
- .Table_table--sticky-header {
4049
- tr th {
4050
- position: sticky;
4051
- top: 0;
4052
- z-index: var(--dds-zindex-sticky);
4053
- }
4054
- }
4055
- .Table_table--with-stripes {
4056
- .Table_row--body {
4057
- &:nth-of-type(even) {
4058
- background-color: var(--dds-color-surface-subtle);
4059
- }
4060
- &:nth-of-type(odd) {
4061
- background-color: var(--dds-color-surface-default);
4062
- }
4063
- }
4064
- }
4065
- .Table_table--small {
4066
- td,
4067
- th {
4068
- padding: var(--dds-spacing-x0-25) var(--dds-spacing-x0-5);
4069
- }
4070
- th {
4071
- font: var(--dds-font-heading-xsmall);
4072
- letter-spacing: var(--dds-font-heading-xsmall-letter-spacing);
4073
- background-color: var(--dds-color-surface-default);
4074
- }
4075
- }
4076
- .Table_table--with-stripes.Table_table--small {
4077
- .Table_row--body {
4078
- &:nth-of-type(odd) {
4079
- background-color: var(--dds-color-surface-subtle);
4080
- }
4081
- &:nth-of-type(even) {
4082
- background-color: var(--dds-color-surface-default);
4083
- }
4084
- }
4085
- }
4086
- .Table_table--medium {
4087
- th {
4088
- font: var(--dds-font-heading-small);
4089
- }
4090
- td,
4091
- th {
4092
- padding: var(--dds-spacing-x0-75);
4093
- }
4094
- }
4095
- .Table_table--large {
4096
- th {
4097
- font: var(--dds-font-heading-small);
4098
- }
4099
- td,
4100
- th {
4101
- padding: var(--dds-spacing-x1-5) var(--dds-spacing-x0-75);
4102
- }
4103
- }
4104
- .Table_row {
4105
- @media (prefers-reduced-motion: no-preference) {
4106
- transition:
4107
- background-color var(--dds-motion-micro-state),
4108
- border-color var(--dds-motion-micro-state),
4109
- box-shadow var(--dds-motion-micro-state);
4110
- }
4111
- }
4112
- .Table_row--body {
4113
- background-color: var(--dds-color-surface-default);
4114
- &.Table_row--sum,
4115
- &.Table_row--sum:nth-of-type(even),
4116
- &.Table_row--sum:nth-of-type(odd) {
4117
- border-bottom: 1px solid var(--dds-color-border-default);
4118
- border-top: 1px solid var(--dds-color-border-default);
4119
- background: var(--dds-color-surface-default);
4120
- }
4121
- &.Table_row--selected,
4122
- &.Table_row--selected:nth-of-type(even),
4123
- &.Table_row--selected:nth-of-type(odd) {
4124
- background-color: var(--dds-color-surface-selected-default);
4125
- }
4126
- &.Table_row--hoverable:hover {
4127
- background-color: var(--dds-color-surface-hover-default);
4128
- }
4129
- }
4130
- .Table_cell--head {
4131
- background-color: var(--dds-color-brand-primary-subtle);
4132
- color: var(--dds-color-text-on-primary-subtle);
4133
- }
4134
- .Table_cell--left {
4135
- text-align: left;
4136
- }
4137
- .Table_cell--right {
4138
- text-align: right;
4139
- }
4140
- .Table_cell--center {
4141
- text-align: center;
4142
- }
4143
- .Table_cell__inner {
4144
- display: flex;
4145
- align-items: center;
4146
- gap: var(--dds-spacing-x0-75);
4147
- }
4148
- .Table_sort-button {
4149
- gap: var(--dds-spacing-x0-5);
4150
- -webkit-user-select: text;
4151
- -moz-user-select: text;
4152
- user-select: text;
4153
- display: flex;
4154
- align-items: center;
4155
- color: inherit;
4156
- @media (prefers-reduced-motion: no-preference) {
4157
- transition: var(--dds-focus-transition);
4158
- }
4159
- }
4160
- .Table_collapse-button {
4161
- border-radius: var(--dds-border-radius-button);
4162
- margin-left: auto;
4163
- margin-right: auto;
4164
- display: flex;
4165
- align-items: center;
4166
- justify-content: center;
4167
- color: inherit;
4168
- @media (prefers-reduced-motion: no-preference) {
4169
- transition: all var(--dds-motion-micro-state);
4170
- }
4171
- &:hover {
4172
- background-color: var(--dds-color-surface-hover-default);
4173
- }
4174
- }
4175
-
4176
4156
  /* src/components/Tabs/Tabs.module.css */
4177
4157
  .Tabs_tab-row {
4178
4158
  display: grid;