toggle-components-library 1.34.0-beta.3 → 1.34.0-beta.4

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.
Files changed (5) hide show
  1. package/package-lock.json +1 -1
  2. package/package.json +1 -1
  3. package/src/components/boosters/ToggleBoosterButton.vue +2 -2
  4. package/src/components/buttons/ToggleButton.vue +13 -13
  5. package/src/sass/includes/_as_buttons.scss +21 -20
package/package-lock.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.34.0-beta.3",
3
+ "version": "1.34.0-beta.4",
4
4
  "lockfileVersion": 1,
5
5
  "requires": true,
6
6
  "dependencies": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "toggle-components-library",
3
- "version": "1.34.0-beta.3",
3
+ "version": "1.34.0-beta.4",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
package/src/components/boosters/ToggleBoosterButton.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
- <div :class="[{'toggle-booster-button-tooltip-container': tooltipText }]">
3
- <button :class="['toggle-booster-button-container', boosterType, {'toggle-booster-button-disabled': disabled, 'toggle-booster-button-tooltip-container': tooltipText}]" :disabled="disabled" @click="click">
2
+ <div :class="[{'toggle-booster-button-tooltip-container': !!tooltipText }]">
3
+ <button :class="['toggle-booster-button-container', boosterType, {'toggle-booster-button-disabled': disabled}]" :disabled="disabled" @click="click">
4
4
 
5
5
  <img
6
6
  :src="logo.src"
package/src/components/buttons/ToggleButton.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini, 'toggle-button-tooltip-container': tooltipText}]">
2
+ <div :class="[ 'toggle-button-container', {'toggle-button-container-mini':isMini, 'toggle-button-tooltip-container': !!tooltipText }]">
3
3
  <button
4
4
  v-if="!$slots.default"
5
5
  :type="type"
@@ -10,20 +10,20 @@
10
10
  <div class="toggle-button-loader" v-if="loading" ></div>
11
11
  <span v-html="buttonText" v-if="!isMini"/>
12
12
 
13
- <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer && !disabled, 'toggle-button-booster-image-badge-disabled': disabled}]" :style="'background-color: ' + boosterImageProperties.bgColor">
13
+ <div v-if="boosterImageProperties" :class="['toggle-button-booster-image-badge', {'shimmer': boosterShimmer && !disabled, 'disabled': disabled, 'loading': loading}]" :style="'background-color: ' + boosterImageProperties.bgColor">
14
14
  <img class="toggle-button-booster-image" :src="boosterImageProperties.src" :alt="boosterImageProperties.alt">
15
15
  </div>
16
- <div v-if="tooltipText">
17
- <div class="toggle-button-tooltip-text">{{ tooltipText }}</div>
18
- </div>
19
- </button>
20
- <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
21
- <div class="toggle-button-loader" v-if="loading" ></div>
22
- <div class="toggle-button-a-border" />
23
- <!--
24
- @slot String of button text
25
- -->
26
- <slot>{{buttonText}}</slot>
16
+ </button>
17
+ <div v-else :class="[ 'toggle-button-a', buttonStyle, {'toggle-button-a-loading':loading, 'disabled':disabled, 'toggle-button-subscribed': !subscribed}]">
18
+ <div class="toggle-button-loader" v-if="loading" ></div>
19
+ <div class="toggle-button-a-border" />
20
+ <!--
21
+ @slot String of button text
22
+ -->
23
+ <slot>{{buttonText}}</slot>
24
+ </div>
25
+ <div class="toggle-button-tooltip-text" v-if="tooltipText">
26
+ <div >{{ tooltipText }}</div>
27
27
  </div>
28
28
  </div>
29
29
  </template>
package/src/sass/includes/_as_buttons.scss CHANGED
@@ -458,37 +458,38 @@
458
458
  width: 100%;
459
459
  height: 100%;
460
460
  }
461
- }
462
-
463
- .toggle-button-booster-image-badge-disabled {
464
- opacity: 0.3;
461
+ &.loading {
462
+ opacity: 0
463
+ }
464
+ &.disabled {
465
+ opacity: 0.3;
466
+ }
465
467
  }
466
468
 
467
469
  /* Tooltip container */
468
470
  .toggle-button-tooltip-container {
469
-
471
+ position: relative;
472
+ justify-content: center;
473
+ display: flex;
470
474
  }
471
475
 
472
476
  /* Tooltip text */
473
477
  .toggle-button-tooltip-container .toggle-button-tooltip-text {
474
- visibility: hidden;
475
- width: 120px;
476
- height: fit-content;
477
- background-color: black;
478
- color: #fff;
479
- text-align: center;
480
- padding: 5px;
481
- border-radius: 6px;
482
- position: absolute;
483
- z-index: 999;
484
- top: 100%;
485
- left: 50%;
486
- margin-left: -60px;
487
- margin-top: 2px;
478
+ visibility: hidden;
479
+ width: 120px;
480
+ height: fit-content;
481
+ background-color: black;
482
+ color: #fff;
483
+ text-align: center;
484
+ padding: 5px;
485
+ border-radius: 6px;
486
+ position: absolute;
487
+ z-index: 999;
488
+ top: 100%;
488
489
  }
489
490
 
490
491
  .toggle-button-tooltip-text {
491
- padding: 10px;
492
+ font-family: $toggle-font-family;
492
493
  }
493
494
 
494
495
  .toggle-button-tooltip-container:hover .toggle-button-tooltip-text {