@norges-domstoler/dds-components 22.7.1 → 22.8.0

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