@neo4j-ndl/base 0.6.2 → 0.7.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.
@@ -420,7 +420,7 @@ Ensure the default browser behavior of the `hidden` attribute.
420
420
  */
421
421
  /**
422
422
  * Do not edit directly
423
- * Generated on Mon, 08 Aug 2022 09:13:42 GMT
423
+ * Generated on Thu, 25 Aug 2022 12:58:53 GMT
424
424
  */
425
425
  :root {
426
426
  --border-radius-sm: 4px;
@@ -3052,6 +3052,362 @@ a.ndl-btn{
3052
3052
  .ndl-icon {
3053
3053
  stroke-width: 1.5;
3054
3054
  }
3055
+ /**
3056
+ *
3057
+ * Copyright (c) "Neo4j"
3058
+ * Neo4j Sweden AB [http://neo4j.com]
3059
+ *
3060
+ * This file is part of Neo4j.
3061
+ *
3062
+ * Neo4j is free software: you can redistribute it and/or modify
3063
+ * it under the terms of the GNU General Public License as published by
3064
+ * the Free Software Foundation, either version 3 of the License, or
3065
+ * (at your option) any later version.
3066
+ *
3067
+ * This program is distributed in the hope that it will be useful,
3068
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
3069
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
3070
+ * GNU General Public License for more details.
3071
+ *
3072
+ * You should have received a copy of the GNU General Public License
3073
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
3074
+ */
3075
+ .ndl-node-label{
3076
+ position: relative;
3077
+ display: inline-block;
3078
+ cursor: pointer;
3079
+ border-radius: 12px;
3080
+ padding-top: 2px;
3081
+ padding-bottom: 2px;
3082
+ padding-left: 0.5rem;
3083
+ padding-right: 0.5rem;
3084
+ font-size: var(--font-size-label);
3085
+ font-weight: var(--font-weight-bold);
3086
+ letter-spacing: 0px;
3087
+ line-height: 20px;
3088
+ }
3089
+ /* Adds an after element that's bigger than the original element and give it a border to get the blue active and focus border.
3090
+ This border should have som space between itself and the original element. */
3091
+ .ndl-node-label:after{
3092
+ position: absolute;
3093
+ top: -3px;
3094
+ right: -3px;
3095
+ bottom: -3px;
3096
+ left: -3px;
3097
+ border-radius: 20px;
3098
+ border-width: 2px;
3099
+ border-style: solid;
3100
+ border-color: transparent;
3101
+ --tw-content: '';
3102
+ content: var(--tw-content);
3103
+ }
3104
+ .ndl-node-label:focus-visible{
3105
+ outline: 2px solid transparent;
3106
+ outline-offset: 2px;
3107
+ }
3108
+ .ndl-node-label:not(.disabled):hover{
3109
+ --tw-brightness: brightness(92%);
3110
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
3111
+ }
3112
+ .ndl-node-label:not(.disabled).selected:after, .ndl-node-label:not(.disabled):active:after, .ndl-node-label:not(.disabled):focus-visible:after{
3113
+ --tw-border-opacity: 1;
3114
+ border-color: rgb(1 139 255 / var(--tw-border-opacity));
3115
+ }
3116
+ .ndl-node-label.disabled{
3117
+ cursor: default;
3118
+ --tw-text-opacity: 1;
3119
+ color: rgb(113 119 128 / var(--tw-text-opacity));
3120
+ }
3121
+ .ndl-property-key-label{
3122
+ position: relative;
3123
+ display: inline-block;
3124
+ cursor: pointer;
3125
+ word-break: break-all;
3126
+ border-radius: 4px;
3127
+ --tw-bg-opacity: 1;
3128
+ background-color: rgb(83 91 102 / var(--tw-bg-opacity));
3129
+ padding-top: 0.125rem;
3130
+ padding-bottom: 0.125rem;
3131
+ padding-left: 0.5rem;
3132
+ padding-right: 0.5rem;
3133
+ --tw-text-opacity: 1;
3134
+ color: rgb(255 255 255 / var(--tw-text-opacity));
3135
+ font-size: var(--font-size-label);
3136
+ font-weight: var(--font-weight-bold);
3137
+ letter-spacing: 0px;
3138
+ line-height: 20px;
3139
+ }
3140
+ .ndl-property-key-label.disabled{
3141
+ cursor: default;
3142
+ --tw-text-opacity: 1;
3143
+ color: rgb(178 183 189 / var(--tw-text-opacity));
3144
+ }
3145
+ .ndl-property-key-label:after{
3146
+ position: absolute;
3147
+ top: -3px;
3148
+ right: -3px;
3149
+ bottom: -3px;
3150
+ left: -3px;
3151
+ border-radius: 6px;
3152
+ border-width: 2px;
3153
+ border-style: solid;
3154
+ border-color: transparent;
3155
+ --tw-content: '';
3156
+ content: var(--tw-content);
3157
+ }
3158
+ .ndl-property-key-label:focus-visible{
3159
+ outline: 2px solid transparent;
3160
+ outline-offset: 2px;
3161
+ }
3162
+ .ndl-property-key-label:not(.disabled):hover{
3163
+ --tw-bg-opacity: 92%;
3164
+ }
3165
+ .ndl-property-key-label:not(.disabled).selected:after, .ndl-property-key-label:not(.disabled):active:after, .ndl-property-key-label:not(.disabled):focus-visible:after{
3166
+ --tw-border-opacity: 1;
3167
+ border-color: rgb(1 139 255 / var(--tw-border-opacity));
3168
+ }
3169
+ .ndl-relationship-label{
3170
+ position: relative;
3171
+ display: inline-block;
3172
+ cursor: pointer;
3173
+ }
3174
+ .ndl-relationship-label .ndl-relationship-label-content{
3175
+ position: relative;
3176
+ z-index: 10;
3177
+ display: inline-block;
3178
+ word-break: break-all;
3179
+ border-width: 1px;
3180
+ border-left-width: 0px;
3181
+ border-right-width: 0px;
3182
+ border-top-width: 0.5px;
3183
+ border-bottom-width: 0.5px;
3184
+ border-style: solid;
3185
+ --tw-border-opacity: 1;
3186
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
3187
+ --tw-bg-opacity: 1;
3188
+ background-color: rgb(245 247 250 / var(--tw-bg-opacity));
3189
+ padding-top: 2px;
3190
+ padding-bottom: 1px;
3191
+ font-size: var(--font-size-label);
3192
+ font-weight: var(--font-weight-bold);
3193
+ letter-spacing: 0px;
3194
+ line-height: 20px;
3195
+ }
3196
+ .ndl-relationship-label .ndl-relationship-label-content:after{
3197
+ position: absolute;
3198
+ left: 0px;
3199
+ right: 0px;
3200
+ bottom: -3.5px;
3201
+ height: 2px;
3202
+ background-color: transparent;
3203
+ --tw-content: '';
3204
+ content: var(--tw-content);
3205
+ }
3206
+ .ndl-relationship-label .ndl-relationship-label-content:before{
3207
+ position: absolute;
3208
+ left: 0px;
3209
+ right: 0px;
3210
+ top: -3.5px;
3211
+ height: 2px;
3212
+ background-color: transparent;
3213
+ --tw-content: '';
3214
+ content: var(--tw-content);
3215
+ }
3216
+ .ndl-relationship-label .ndl-hexagon-end{
3217
+ position: relative;
3218
+ display: inline-block;
3219
+ vertical-align: bottom;
3220
+ }
3221
+ .ndl-relationship-label .ndl-hexagon-end.right{
3222
+ z-index: 0;
3223
+ --tw-rotate: 180deg;
3224
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3225
+ }
3226
+ .ndl-relationship-label .ndl-hexagon-end .ndl-hexagon-end-inner{
3227
+ fill: #F5F7FA;
3228
+ }
3229
+ .ndl-relationship-label .ndl-hexagon-end .ndl-hexagon-end-outer{
3230
+ fill: #C4C8CD;
3231
+ }
3232
+ .ndl-relationship-label .ndl-hexagon-end .ndl-hexagon-end-active{
3233
+ position: absolute;
3234
+ top: -3px;
3235
+ left: -3px;
3236
+ }
3237
+ .ndl-relationship-label:not(.disabled):hover .ndl-relationship-label-content{
3238
+ --tw-border-opacity: 1;
3239
+ border-color: rgb(182 186 192 / var(--tw-border-opacity));
3240
+ --tw-bg-opacity: 1;
3241
+ background-color: rgb(227 230 233 / var(--tw-bg-opacity));
3242
+ }
3243
+ .ndl-relationship-label:not(.disabled):hover .ndl-hexagon-end-inner{
3244
+ fill: #E3E6E9;
3245
+ }
3246
+ .ndl-relationship-label:not(.disabled):hover .ndl-hexagon-end-outer{
3247
+ fill: #B6BAC0;
3248
+ }
3249
+ .ndl-relationship-label:not(.disabled).selected .ndl-hexagon-end-active, .ndl-relationship-label:not(.disabled):focus-visible .ndl-hexagon-end-active, .ndl-relationship-label:not(.disabled):active .ndl-hexagon-end-active{
3250
+ fill: #018bff;
3251
+ }
3252
+ .ndl-relationship-label:not(.disabled).selected .ndl-relationship-label-content:after, .ndl-relationship-label:not(.disabled):focus-visible .ndl-relationship-label-content:after, .ndl-relationship-label:not(.disabled):active .ndl-relationship-label-content:after{
3253
+ --tw-bg-opacity: 1;
3254
+ background-color: rgb(1 139 255 / var(--tw-bg-opacity));
3255
+ }
3256
+ .ndl-relationship-label:not(.disabled).selected .ndl-relationship-label-content:before, .ndl-relationship-label:not(.disabled):focus-visible .ndl-relationship-label-content:before, .ndl-relationship-label:not(.disabled):active .ndl-relationship-label-content:before{
3257
+ --tw-bg-opacity: 1;
3258
+ background-color: rgb(1 139 255 / var(--tw-bg-opacity));
3259
+ }
3260
+ .ndl-relationship-label:focus-visible{
3261
+ outline: 2px solid transparent;
3262
+ outline-offset: 2px;
3263
+ }
3264
+ .ndl-relationship-label.disabled{
3265
+ cursor: default;
3266
+ }
3267
+ .ndl-relationship-label.disabled .ndl-relationship-label-content{
3268
+ --tw-text-opacity: 1;
3269
+ color: rgb(113 119 128 / var(--tw-text-opacity));
3270
+ }
3271
+ /**
3272
+ *
3273
+ * Copyright (c) "Neo4j"
3274
+ * Neo4j Sweden AB [http://neo4j.com]
3275
+ *
3276
+ * This file is part of Neo4j.
3277
+ *
3278
+ * Neo4j is free software: you can redistribute it and/or modify
3279
+ * it under the terms of the GNU General Public License as published by
3280
+ * the Free Software Foundation, either version 3 of the License, or
3281
+ * (at your option) any later version.
3282
+ *
3283
+ * This program is distributed in the hope that it will be useful,
3284
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
3285
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
3286
+ * GNU General Public License for more details.
3287
+ *
3288
+ * You should have received a copy of the GNU General Public License
3289
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
3290
+ */
3291
+ .ndl-wizard-circle{
3292
+ z-index: 2;
3293
+ --tw-text-opacity: 1;
3294
+ color: rgb(21 30 41 / var(--tw-text-opacity));
3295
+ }
3296
+ .ndl-wizard-circle .text.horizontal{
3297
+ position: absolute;
3298
+ bottom: 0.5rem;
3299
+ left: 50%;
3300
+ min-width: 50px;
3301
+ --tw-translate-x: -50%;
3302
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3303
+ text-align: center;
3304
+ }
3305
+ .ndl-wizard-circle .text.vertical{
3306
+ position: absolute;
3307
+ left: 4rem;
3308
+ min-width: 140px;
3309
+ --tw-translate-y: 35%;
3310
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
3311
+ text-align: left;
3312
+ }
3313
+ .ndl-horizontal-wizard{
3314
+ position: relative;
3315
+ display: flex;
3316
+ width: 100%;
3317
+ align-items: center;
3318
+ border-radius: 24px;
3319
+ --tw-bg-opacity: 1;
3320
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3321
+ padding-left: 96px;
3322
+ padding-right: 96px;
3323
+ padding-bottom: 48px;
3324
+ padding-top: 70px;
3325
+ }
3326
+ .ndl-vertical-wizard{
3327
+ position: relative;
3328
+ display: flex;
3329
+ height: 100%;
3330
+ width: -webkit-fit-content;
3331
+ width: -moz-fit-content;
3332
+ width: fit-content;
3333
+ flex-direction: column;
3334
+ align-items: center;
3335
+ border-radius: 24px;
3336
+ --tw-bg-opacity: 1;
3337
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3338
+ padding-top: 48px;
3339
+ padding-bottom: 48px;
3340
+ padding-left: 48px;
3341
+ padding-right: 196px;
3342
+ }
3343
+ .ndl-footer-wizard{
3344
+ position: relative;
3345
+ width: -webkit-fit-content;
3346
+ width: -moz-fit-content;
3347
+ width: fit-content;
3348
+ border-radius: 24px;
3349
+ --tw-bg-opacity: 1;
3350
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3351
+ padding-top: 48px;
3352
+ padding-bottom: 48px;
3353
+ padding-left: 96px;
3354
+ padding-right: 96px;
3355
+ }
3356
+ .ndl-line-gradient {
3357
+ background: linear-gradient(
3358
+ 270deg,
3359
+ rgba(178, 183, 189, 1) 0%,
3360
+ rgb(0 111 214) 100%
3361
+ );
3362
+ }
3363
+ .ndl-line-gradient-vertical {
3364
+ background: linear-gradient(
3365
+ 1deg,
3366
+ rgba(178, 183, 189, 1) 0%,
3367
+ rgb(0 111 214) 100%
3368
+ );
3369
+ }
3370
+ .ndl-wizard-line {
3371
+ z-index: 1;
3372
+ }
3373
+ .ndl-wizard-line.complete{
3374
+ --tw-bg-opacity: 1;
3375
+ background-color: rgb(0 111 214 / var(--tw-bg-opacity));
3376
+ }
3377
+ .ndl-wizard-line.incomplete{
3378
+ --tw-bg-opacity: 1;
3379
+ background-color: rgb(178 183 189 / var(--tw-bg-opacity));
3380
+ }
3381
+ .ndl-wizard-line.active.horizontal {
3382
+ background: linear-gradient(
3383
+ 270deg,
3384
+ rgba(178, 183, 189, 1) 0%,
3385
+ rgb(0 111 214) 100%
3386
+ );
3387
+ }
3388
+ .ndl-wizard-line.active.vertical {
3389
+ background: linear-gradient(
3390
+ 1deg,
3391
+ rgba(178, 183, 189, 1) 0%,
3392
+ rgb(0 111 214) 100%
3393
+ );
3394
+ }
3395
+ .ndl-wizard-line.horizontal{
3396
+ margin-left: -4px;
3397
+ margin-right: -4px;
3398
+ height: 2px;
3399
+ width: 100%;
3400
+ min-width: 20px;
3401
+ }
3402
+ .ndl-wizard-line.vertical{
3403
+ margin-top: -0.25rem;
3404
+ margin-bottom: -0.25rem;
3405
+ margin-left: 20px;
3406
+ margin-right: 20px;
3407
+ height: 100%;
3408
+ min-height: 20px;
3409
+ width: 2px;
3410
+ }
3055
3411
  .n-sr-only{
3056
3412
  position: absolute;
3057
3413
  width: 1px;
@@ -3116,6 +3472,12 @@ a.ndl-btn{
3116
3472
  .n-mt-10{
3117
3473
  margin-top: 2.5rem;
3118
3474
  }
3475
+ .n-mr-6{
3476
+ margin-right: 1.5rem;
3477
+ }
3478
+ .n-ml-6{
3479
+ margin-left: 1.5rem;
3480
+ }
3119
3481
  .n-mt-4{
3120
3482
  margin-top: 1rem;
3121
3483
  }
@@ -3146,6 +3508,12 @@ a.ndl-btn{
3146
3508
  .n-h-full{
3147
3509
  height: 100%;
3148
3510
  }
3511
+ .n-h-\[1px\]{
3512
+ height: 1px;
3513
+ }
3514
+ .n-h-2{
3515
+ height: 0.5rem;
3516
+ }
3149
3517
  .n-h-12{
3150
3518
  height: 3rem;
3151
3519
  }
@@ -3173,6 +3541,12 @@ a.ndl-btn{
3173
3541
  .n-w-6{
3174
3542
  width: 1.5rem;
3175
3543
  }
3544
+ .n-w-32{
3545
+ width: 8rem;
3546
+ }
3547
+ .n-w-2{
3548
+ width: 0.5rem;
3549
+ }
3176
3550
  .n-w-48{
3177
3551
  width: 12rem;
3178
3552
  }
@@ -3238,15 +3612,15 @@ a.ndl-btn{
3238
3612
  .n-gap-1{
3239
3613
  gap: 0.25rem;
3240
3614
  }
3615
+ .n-gap-6{
3616
+ gap: 1.5rem;
3617
+ }
3241
3618
  .n-gap-4{
3242
3619
  gap: 1rem;
3243
3620
  }
3244
3621
  .n-gap-12{
3245
3622
  gap: 3rem;
3246
3623
  }
3247
- .n-gap-6{
3248
- gap: 1.5rem;
3249
- }
3250
3624
  .n-gap-y-2{
3251
3625
  row-gap: 0.5rem;
3252
3626
  }
@@ -3889,6 +4263,18 @@ a.ndl-btn{
3889
4263
  .n-bg-transparent{
3890
4264
  background-color: transparent;
3891
4265
  }
4266
+ .n-fill-light-primary-text{
4267
+ fill: #006FD6;
4268
+ }
4269
+ .n-fill-neutral-10{
4270
+ fill: #FFFFFF;
4271
+ }
4272
+ .n-fill-light-neutral-text-weakest{
4273
+ fill: #B2B7BD;
4274
+ }
4275
+ .n-fill-light-neutral-border-strong{
4276
+ fill: #C4C8CD;
4277
+ }
3892
4278
  .n-p-2{
3893
4279
  padding: 0.5rem;
3894
4280
  }
@@ -3930,6 +4316,10 @@ a.ndl-btn{
3930
4316
  padding-top: 0px;
3931
4317
  padding-bottom: 0px;
3932
4318
  }
4319
+ .n-px-\[2px\]{
4320
+ padding-left: 2px;
4321
+ padding-right: 2px;
4322
+ }
3933
4323
  .n-py-1{
3934
4324
  padding-top: 0.25rem;
3935
4325
  padding-bottom: 0.25rem;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 08 Aug 2022 09:13:42 GMT
3
+ * Generated on Thu, 25 Aug 2022 12:58:53 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 08 Aug 2022 09:13:42 GMT
3
+ * Generated on Thu, 25 Aug 2022 12:58:53 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Mon, 08 Aug 2022 09:13:42 GMT
4
+ * Generated on Thu, 25 Aug 2022 12:58:53 GMT
5
5
  */
6
6
  module.exports = {
7
7
  "borderRadius": {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 08 Aug 2022 09:13:42 GMT
3
+ // Generated on Thu, 25 Aug 2022 12:58:53 GMT
4
4
 
5
5
  $border-radius-sm: 4px;
6
6
  $border-radius-md: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "0.6.2",
3
+ "version": "0.7.0",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "",