@fundamental-styles/theming-preview 0.24.0-rc.3 → 0.24.0-rc.30
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/fundamental-styles.css +2084 -555
- package/package.json +2 -2
package/fundamental-styles.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/*!
|
|
3
|
-
* Fundamental Library Styles v0.24.0-rc.
|
|
3
|
+
* Fundamental Library Styles v0.24.0-rc.30
|
|
4
4
|
* Copyright (c) 2022 SAP SE or an SAP affiliate company.
|
|
5
5
|
* Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)
|
|
6
6
|
*/
|
|
@@ -3658,6 +3658,134 @@
|
|
|
3658
3658
|
.fd-action-bar--xl {
|
|
3659
3659
|
padding: .5rem 3rem
|
|
3660
3660
|
}
|
|
3661
|
+
.fd-action-sheet {
|
|
3662
|
+
font-size: var(--sapFontSize);
|
|
3663
|
+
line-height: var(--sapContent_LineHeight);
|
|
3664
|
+
color: var(--sapTextColor);
|
|
3665
|
+
font-family: var(--sapFontFamily);
|
|
3666
|
+
font-weight: 400;
|
|
3667
|
+
-webkit-box-sizing: border-box;
|
|
3668
|
+
box-sizing: border-box;
|
|
3669
|
+
padding: 0;
|
|
3670
|
+
margin: 0;
|
|
3671
|
+
border: 0;
|
|
3672
|
+
padding: .25rem .5rem;
|
|
3673
|
+
width: 100%
|
|
3674
|
+
}
|
|
3675
|
+
.fd-action-sheet::after,
|
|
3676
|
+
.fd-action-sheet::before {
|
|
3677
|
+
-webkit-box-sizing: inherit;
|
|
3678
|
+
box-sizing: inherit;
|
|
3679
|
+
font-size: inherit
|
|
3680
|
+
}
|
|
3681
|
+
.fd-action-sheet__item {
|
|
3682
|
+
font-size: var(--sapFontSize);
|
|
3683
|
+
line-height: var(--sapContent_LineHeight);
|
|
3684
|
+
color: var(--sapTextColor);
|
|
3685
|
+
font-family: var(--sapFontFamily);
|
|
3686
|
+
font-weight: 400;
|
|
3687
|
+
-webkit-box-sizing: border-box;
|
|
3688
|
+
box-sizing: border-box;
|
|
3689
|
+
padding: 0;
|
|
3690
|
+
margin: 0;
|
|
3691
|
+
border: 0;
|
|
3692
|
+
display: block;
|
|
3693
|
+
width: 100%;
|
|
3694
|
+
padding: .25rem 0
|
|
3695
|
+
}
|
|
3696
|
+
.fd-action-sheet__item::after,
|
|
3697
|
+
.fd-action-sheet__item::before {
|
|
3698
|
+
-webkit-box-sizing: inherit;
|
|
3699
|
+
box-sizing: inherit;
|
|
3700
|
+
font-size: inherit
|
|
3701
|
+
}
|
|
3702
|
+
.fd-action-sheet__wrapper {
|
|
3703
|
+
position: absolute;
|
|
3704
|
+
width: 100%;
|
|
3705
|
+
height: 100%;
|
|
3706
|
+
left: 0;
|
|
3707
|
+
top: 0;
|
|
3708
|
+
display: none;
|
|
3709
|
+
border-radius: var(--fdPopover_Border_Radius)
|
|
3710
|
+
}
|
|
3711
|
+
.fd-action-sheet__wrapper::before {
|
|
3712
|
+
content: "";
|
|
3713
|
+
display: block;
|
|
3714
|
+
position: absolute;
|
|
3715
|
+
top: 0;
|
|
3716
|
+
left: 0;
|
|
3717
|
+
width: 100%;
|
|
3718
|
+
height: 100%;
|
|
3719
|
+
opacity: var(--fdOverlay_Background_Opacity);
|
|
3720
|
+
background-color: var(--sapBlockLayer_Background);
|
|
3721
|
+
border-radius: var(--fdPopover_Border_Radius)
|
|
3722
|
+
}
|
|
3723
|
+
.fd-action-sheet__wrapper--active {
|
|
3724
|
+
display: -webkit-box;
|
|
3725
|
+
display: -ms-flexbox;
|
|
3726
|
+
display: flex;
|
|
3727
|
+
-webkit-box-orient: vertical;
|
|
3728
|
+
-webkit-box-direction: normal;
|
|
3729
|
+
-ms-flex-direction: column;
|
|
3730
|
+
flex-direction: column;
|
|
3731
|
+
-webkit-box-pack: end;
|
|
3732
|
+
-ms-flex-pack: end;
|
|
3733
|
+
justify-content: flex-end;
|
|
3734
|
+
-webkit-box-align: start;
|
|
3735
|
+
-ms-flex-align: start;
|
|
3736
|
+
align-items: flex-start
|
|
3737
|
+
}
|
|
3738
|
+
.fd-action-sheet__title {
|
|
3739
|
+
font-size: var(--sapFontSize);
|
|
3740
|
+
line-height: var(--sapContent_LineHeight);
|
|
3741
|
+
color: var(--sapTextColor);
|
|
3742
|
+
font-family: var(--sapFontFamily);
|
|
3743
|
+
font-weight: 400;
|
|
3744
|
+
-webkit-box-sizing: border-box;
|
|
3745
|
+
box-sizing: border-box;
|
|
3746
|
+
padding: 0;
|
|
3747
|
+
margin: 0;
|
|
3748
|
+
border: 0;
|
|
3749
|
+
font-family: var(--sapFontHeaderFamily);
|
|
3750
|
+
color: var(--sapGroup_TitleTextColor);
|
|
3751
|
+
font-size: var(--sapFontHeader6Size);
|
|
3752
|
+
white-space: nowrap;
|
|
3753
|
+
overflow: hidden;
|
|
3754
|
+
text-overflow: ellipsis;
|
|
3755
|
+
max-width: 100%;
|
|
3756
|
+
z-index: 1;
|
|
3757
|
+
padding: 0 1rem .5rem 1rem;
|
|
3758
|
+
color: var(--sapContent_ContrastTextColor)
|
|
3759
|
+
}
|
|
3760
|
+
.fd-action-sheet__title::after,
|
|
3761
|
+
.fd-action-sheet__title::before {
|
|
3762
|
+
-webkit-box-sizing: inherit;
|
|
3763
|
+
box-sizing: inherit;
|
|
3764
|
+
font-size: inherit
|
|
3765
|
+
}
|
|
3766
|
+
.fd-action-sheet--compact {
|
|
3767
|
+
padding: .1875rem .375rem
|
|
3768
|
+
}
|
|
3769
|
+
.fd-action-sheet--compact .fd-action-sheet__item {
|
|
3770
|
+
padding: .1875rem 0
|
|
3771
|
+
}
|
|
3772
|
+
.fd-action-sheet--mobile {
|
|
3773
|
+
background-color: var(--sapGroup_ContentBackground);
|
|
3774
|
+
z-index: 1;
|
|
3775
|
+
-webkit-box-shadow: var(--sapContent_Shadow1);
|
|
3776
|
+
box-shadow: var(--sapContent_Shadow1);
|
|
3777
|
+
width: calc(100% - var(--sapGroup_BorderWidth) * 2);
|
|
3778
|
+
position: relative;
|
|
3779
|
+
overflow: auto;
|
|
3780
|
+
left: var(--sapGroup_BorderWidth);
|
|
3781
|
+
right: auto;
|
|
3782
|
+
border-radius: var(--fdPopover_Border_Radius)
|
|
3783
|
+
}
|
|
3784
|
+
.fd-action-sheet--mobile[dir=rtl],
|
|
3785
|
+
[dir=rtl] .fd-action-sheet--mobile {
|
|
3786
|
+
right: var(--sapGroup_BorderWidth);
|
|
3787
|
+
left: auto
|
|
3788
|
+
}
|
|
3661
3789
|
/*!
|
|
3662
3790
|
.fd-alert+(--information, --success, --warning, --error, --no-icon)
|
|
3663
3791
|
.fd-alert__close
|
|
@@ -5088,7 +5216,7 @@
|
|
|
5088
5216
|
-webkit-box-pack: justify;
|
|
5089
5217
|
-ms-flex-pack: justify;
|
|
5090
5218
|
justify-content: space-between;
|
|
5091
|
-
padding: 0
|
|
5219
|
+
padding: 0 1rem
|
|
5092
5220
|
}
|
|
5093
5221
|
.fd-bar::after,
|
|
5094
5222
|
.fd-bar::before {
|
|
@@ -5132,7 +5260,7 @@
|
|
|
5132
5260
|
font-size: inherit
|
|
5133
5261
|
}
|
|
5134
5262
|
.fd-bar__middle {
|
|
5135
|
-
padding: 0
|
|
5263
|
+
padding: 0 var(--fdBar_Middle_Area_Padding_X);
|
|
5136
5264
|
-webkit-box-pack: center;
|
|
5137
5265
|
-ms-flex-pack: center;
|
|
5138
5266
|
justify-content: center
|
|
@@ -5140,11 +5268,27 @@
|
|
|
5140
5268
|
.fd-bar__middle:only-child {
|
|
5141
5269
|
padding: 0
|
|
5142
5270
|
}
|
|
5271
|
+
.fd-bar__left {
|
|
5272
|
+
padding-left: 0;
|
|
5273
|
+
padding-right: var(--fdBar_Left_Area_Padding_Right)
|
|
5274
|
+
}
|
|
5275
|
+
.fd-bar__left[dir=rtl],
|
|
5276
|
+
[dir=rtl] .fd-bar__left {
|
|
5277
|
+
padding-right: 0;
|
|
5278
|
+
padding-left: var(--fdBar_Left_Area_Padding_Right)
|
|
5279
|
+
}
|
|
5143
5280
|
.fd-bar__right {
|
|
5281
|
+
padding-left: --fdBar_Right_Area_Padding_Left;
|
|
5282
|
+
padding-right: 0;
|
|
5144
5283
|
-webkit-box-pack: end;
|
|
5145
5284
|
-ms-flex-pack: end;
|
|
5146
5285
|
justify-content: flex-end
|
|
5147
5286
|
}
|
|
5287
|
+
.fd-bar__right[dir=rtl],
|
|
5288
|
+
[dir=rtl] .fd-bar__right {
|
|
5289
|
+
padding-right: --fdBar_Right_Area_Padding_Left;
|
|
5290
|
+
padding-left: 0
|
|
5291
|
+
}
|
|
5148
5292
|
.fd-bar__element {
|
|
5149
5293
|
font-size: var(--sapFontSize);
|
|
5150
5294
|
line-height: var(--sapContent_LineHeight);
|
|
@@ -5180,15 +5324,6 @@
|
|
|
5180
5324
|
margin-right: 0;
|
|
5181
5325
|
margin-left: .5rem
|
|
5182
5326
|
}
|
|
5183
|
-
.fd-bar__element--title {
|
|
5184
|
-
padding-left: .5rem;
|
|
5185
|
-
padding-right: 0
|
|
5186
|
-
}
|
|
5187
|
-
.fd-bar__element--title[dir=rtl],
|
|
5188
|
-
[dir=rtl] .fd-bar__element--title {
|
|
5189
|
-
padding-right: .5rem;
|
|
5190
|
-
padding-left: 0
|
|
5191
|
-
}
|
|
5192
5327
|
.fd-bar__element--full-width {
|
|
5193
5328
|
width: 100%
|
|
5194
5329
|
}
|
|
@@ -5691,7 +5826,7 @@
|
|
|
5691
5826
|
height: 2.25rem;
|
|
5692
5827
|
max-height: 2.25rem;
|
|
5693
5828
|
min-width: 2.25rem;
|
|
5694
|
-
overflow:
|
|
5829
|
+
overflow: visible;
|
|
5695
5830
|
text-overflow: ellipsis;
|
|
5696
5831
|
position: relative;
|
|
5697
5832
|
padding-left: calc(.625rem - var(--sapButton_BorderWidth));
|
|
@@ -5704,20 +5839,15 @@
|
|
|
5704
5839
|
color: var(--sapButton_TextColor);
|
|
5705
5840
|
border-color: var(--sapButton_BorderColor);
|
|
5706
5841
|
background-color: var(--sapButton_Background);
|
|
5707
|
-
display: -webkit-box;
|
|
5708
|
-
display: -ms-flexbox;
|
|
5709
|
-
display: flex;
|
|
5842
|
+
display: -webkit-inline-box;
|
|
5843
|
+
display: -ms-inline-flexbox;
|
|
5844
|
+
display: inline-flex;
|
|
5710
5845
|
-webkit-box-pack: center;
|
|
5711
5846
|
-ms-flex-pack: center;
|
|
5712
5847
|
justify-content: center;
|
|
5713
5848
|
-webkit-box-align: center;
|
|
5714
5849
|
-ms-flex-align: center;
|
|
5715
|
-
align-items: center
|
|
5716
|
-
display: -webkit-inline-box;
|
|
5717
|
-
display: -ms-inline-flexbox;
|
|
5718
|
-
display: inline-flex;
|
|
5719
|
-
overflow: visible;
|
|
5720
|
-
min-width: 2.25rem
|
|
5850
|
+
align-items: center
|
|
5721
5851
|
}
|
|
5722
5852
|
.fd-button::after,
|
|
5723
5853
|
.fd-button::before {
|
|
@@ -5739,80 +5869,151 @@
|
|
|
5739
5869
|
left: 0;
|
|
5740
5870
|
right: 0
|
|
5741
5871
|
}
|
|
5872
|
+
.fd-button.is-hover,
|
|
5873
|
+
.fd-button:hover {
|
|
5874
|
+
-webkit-box-shadow: none;
|
|
5875
|
+
box-shadow: none
|
|
5876
|
+
}
|
|
5742
5877
|
.fd-button.fd-button--toggled {
|
|
5743
5878
|
color: var(--sapButton_Selected_TextColor);
|
|
5744
5879
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
5745
5880
|
background-color: var(--sapButton_Selected_Background)
|
|
5746
5881
|
}
|
|
5882
|
+
.fd-button.fd-button--toggled.is-hover,
|
|
5883
|
+
.fd-button.fd-button--toggled:hover {
|
|
5884
|
+
-webkit-box-shadow: none;
|
|
5885
|
+
box-shadow: none
|
|
5886
|
+
}
|
|
5747
5887
|
.fd-button.fd-button--ghost {
|
|
5748
5888
|
color: var(--sapButton_TextColor);
|
|
5749
5889
|
border-color: var(--sapButton_BorderColor);
|
|
5750
|
-
background-color: var(--
|
|
5890
|
+
background-color: var(--fdButton_Ghost_Background)
|
|
5891
|
+
}
|
|
5892
|
+
.fd-button.fd-button--ghost.is-hover,
|
|
5893
|
+
.fd-button.fd-button--ghost:hover {
|
|
5894
|
+
-webkit-box-shadow: none;
|
|
5895
|
+
box-shadow: none
|
|
5751
5896
|
}
|
|
5752
5897
|
.fd-button.fd-button--ghost.fd-button--toggled {
|
|
5753
5898
|
color: var(--sapButton_Selected_TextColor);
|
|
5754
5899
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
5755
5900
|
background-color: var(--sapButton_Selected_Background)
|
|
5756
5901
|
}
|
|
5902
|
+
.fd-button.fd-button--ghost.fd-button--toggled.is-hover,
|
|
5903
|
+
.fd-button.fd-button--ghost.fd-button--toggled:hover {
|
|
5904
|
+
-webkit-box-shadow: none;
|
|
5905
|
+
box-shadow: none
|
|
5906
|
+
}
|
|
5757
5907
|
.fd-button.fd-button--positive {
|
|
5758
5908
|
color: var(--sapButton_Accept_TextColor);
|
|
5759
5909
|
border-color: var(--sapButton_Accept_BorderColor);
|
|
5760
5910
|
background-color: var(--sapButton_Accept_Background)
|
|
5761
5911
|
}
|
|
5912
|
+
.fd-button.fd-button--positive.is-hover,
|
|
5913
|
+
.fd-button.fd-button--positive:hover {
|
|
5914
|
+
-webkit-box-shadow: none;
|
|
5915
|
+
box-shadow: none
|
|
5916
|
+
}
|
|
5762
5917
|
.fd-button.fd-button--positive.fd-button--toggled {
|
|
5763
5918
|
color: var(--sapButton_Accept_Selected_TextColor);
|
|
5764
5919
|
border-color: var(--sapButton_Accept_Selected_BorderColor);
|
|
5765
5920
|
background-color: var(--sapButton_Accept_Selected_Background)
|
|
5766
5921
|
}
|
|
5922
|
+
.fd-button.fd-button--positive.fd-button--toggled.is-hover,
|
|
5923
|
+
.fd-button.fd-button--positive.fd-button--toggled:hover {
|
|
5924
|
+
-webkit-box-shadow: none;
|
|
5925
|
+
box-shadow: none
|
|
5926
|
+
}
|
|
5767
5927
|
.fd-button.fd-button--negative {
|
|
5768
5928
|
color: var(--sapButton_Reject_TextColor);
|
|
5769
5929
|
border-color: var(--sapButton_Reject_BorderColor);
|
|
5770
5930
|
background-color: var(--sapButton_Reject_Background)
|
|
5771
5931
|
}
|
|
5932
|
+
.fd-button.fd-button--negative.is-hover,
|
|
5933
|
+
.fd-button.fd-button--negative:hover {
|
|
5934
|
+
-webkit-box-shadow: none;
|
|
5935
|
+
box-shadow: none
|
|
5936
|
+
}
|
|
5772
5937
|
.fd-button.fd-button--negative.fd-button--toggled {
|
|
5773
5938
|
color: var(--sapButton_Reject_Selected_TextColor);
|
|
5774
5939
|
border-color: var(--sapButton_Reject_Selected_BorderColor);
|
|
5775
5940
|
background-color: var(--sapButton_Reject_Selected_Background)
|
|
5776
5941
|
}
|
|
5942
|
+
.fd-button.fd-button--negative.fd-button--toggled.is-hover,
|
|
5943
|
+
.fd-button.fd-button--negative.fd-button--toggled:hover {
|
|
5944
|
+
-webkit-box-shadow: none;
|
|
5945
|
+
box-shadow: none
|
|
5946
|
+
}
|
|
5777
5947
|
.fd-button.fd-button--attention {
|
|
5778
5948
|
color: var(--sapButton_Attention_TextColor);
|
|
5779
5949
|
border-color: var(--sapButton_Attention_BorderColor);
|
|
5780
5950
|
background-color: var(--sapButton_Attention_Background)
|
|
5781
5951
|
}
|
|
5952
|
+
.fd-button.fd-button--attention.is-hover,
|
|
5953
|
+
.fd-button.fd-button--attention:hover {
|
|
5954
|
+
-webkit-box-shadow: none;
|
|
5955
|
+
box-shadow: none
|
|
5956
|
+
}
|
|
5782
5957
|
.fd-button.fd-button--attention.fd-button--toggled {
|
|
5783
5958
|
color: var(--sapButton_Attention_Selected_TextColor);
|
|
5784
5959
|
border-color: var(--sapButton_Attention_Selected_BorderColor);
|
|
5785
5960
|
background-color: var(--sapButton_Attention_Selected_Background)
|
|
5786
5961
|
}
|
|
5962
|
+
.fd-button.fd-button--attention.fd-button--toggled.is-hover,
|
|
5963
|
+
.fd-button.fd-button--attention.fd-button--toggled:hover {
|
|
5964
|
+
-webkit-box-shadow: none;
|
|
5965
|
+
box-shadow: none
|
|
5966
|
+
}
|
|
5787
5967
|
.fd-button.fd-button--emphasized {
|
|
5788
|
-
font-weight:
|
|
5968
|
+
font-weight: var(--sapButton_Emphasized_FontWeight);
|
|
5789
5969
|
border-width: var(--fdButton_Emphasized_Border_Width);
|
|
5790
5970
|
color: var(--sapButton_Emphasized_TextColor);
|
|
5791
5971
|
border-color: var(--sapButton_Emphasized_BorderColor);
|
|
5792
5972
|
background-color: var(--sapButton_Emphasized_Background)
|
|
5793
5973
|
}
|
|
5974
|
+
.fd-button.fd-button--emphasized.is-hover,
|
|
5975
|
+
.fd-button.fd-button--emphasized:hover {
|
|
5976
|
+
-webkit-box-shadow: none;
|
|
5977
|
+
box-shadow: none
|
|
5978
|
+
}
|
|
5794
5979
|
.fd-button.fd-button--emphasized.fd-button--toggled {
|
|
5795
5980
|
color: var(--sapButton_Selected_TextColor);
|
|
5796
5981
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
5797
5982
|
background-color: var(--sapButton_Selected_Background)
|
|
5798
5983
|
}
|
|
5984
|
+
.fd-button.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
5985
|
+
.fd-button.fd-button--emphasized.fd-button--toggled:hover {
|
|
5986
|
+
-webkit-box-shadow: none;
|
|
5987
|
+
box-shadow: none
|
|
5988
|
+
}
|
|
5799
5989
|
.fd-button.fd-button--transparent {
|
|
5990
|
+
color: var(--sapButton_Lite_TextColor);
|
|
5800
5991
|
border-color: var(--sapButton_Lite_BorderColor);
|
|
5801
5992
|
background-color: var(--sapButton_Lite_Background)
|
|
5802
5993
|
}
|
|
5994
|
+
.fd-button.fd-button--transparent.is-hover,
|
|
5995
|
+
.fd-button.fd-button--transparent:hover {
|
|
5996
|
+
-webkit-box-shadow: none;
|
|
5997
|
+
box-shadow: none
|
|
5998
|
+
}
|
|
5803
5999
|
.fd-button.fd-button--transparent.fd-button--toggled {
|
|
5804
6000
|
color: var(--sapButton_Selected_TextColor);
|
|
5805
6001
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
5806
6002
|
background-color: var(--sapButton_Selected_Background)
|
|
5807
6003
|
}
|
|
6004
|
+
.fd-button.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6005
|
+
.fd-button.fd-button--transparent.fd-button--toggled:hover {
|
|
6006
|
+
-webkit-box-shadow: none;
|
|
6007
|
+
box-shadow: none
|
|
6008
|
+
}
|
|
5808
6009
|
.fd-button > [class*=sap-icon] {
|
|
6010
|
+
color: inherit;
|
|
5809
6011
|
width: 1rem;
|
|
5810
6012
|
min-width: 1rem;
|
|
5811
6013
|
height: 1rem;
|
|
5812
6014
|
font-size: 1rem;
|
|
5813
6015
|
line-height: 1rem;
|
|
5814
6016
|
font-family: SAP-icons;
|
|
5815
|
-
color: inherit;
|
|
5816
6017
|
font-style: normal;
|
|
5817
6018
|
vertical-align: text-bottom
|
|
5818
6019
|
}
|
|
@@ -5888,7 +6089,7 @@
|
|
|
5888
6089
|
right: -.25rem;
|
|
5889
6090
|
font-size: var(--sapFontSmallSize);
|
|
5890
6091
|
color: var(--sapContent_BadgeTextColor);
|
|
5891
|
-
border-color: var(--
|
|
6092
|
+
border-color: var(--fdButton_Badge_Border_Color);
|
|
5892
6093
|
background-color: var(--sapContent_BadgeBackground)
|
|
5893
6094
|
}
|
|
5894
6095
|
.fd-button__badge::after,
|
|
@@ -5943,17 +6144,17 @@
|
|
|
5943
6144
|
line-height: 1rem
|
|
5944
6145
|
}
|
|
5945
6146
|
.fd-button--full-width {
|
|
5946
|
-
width: 100%;
|
|
5947
|
-
min-width: 100%;
|
|
5948
6147
|
display: -webkit-box;
|
|
5949
6148
|
display: -ms-flexbox;
|
|
5950
6149
|
display: flex;
|
|
6150
|
+
-webkit-box-pack: center;
|
|
6151
|
+
-ms-flex-pack: center;
|
|
6152
|
+
justify-content: center;
|
|
5951
6153
|
-webkit-box-align: center;
|
|
5952
6154
|
-ms-flex-align: center;
|
|
5953
6155
|
align-items: center;
|
|
5954
|
-
|
|
5955
|
-
-
|
|
5956
|
-
justify-content: center
|
|
6156
|
+
width: 100%;
|
|
6157
|
+
min-width: 100%
|
|
5957
6158
|
}
|
|
5958
6159
|
.fd-button--text-alignment-left {
|
|
5959
6160
|
text-align: left;
|
|
@@ -5988,9 +6189,14 @@
|
|
|
5988
6189
|
.fd-button:hover {
|
|
5989
6190
|
color: var(--sapButton_Hover_TextColor);
|
|
5990
6191
|
border-color: var(--sapButton_Hover_BorderColor);
|
|
5991
|
-
background-color: var(--sapButton_Hover_Background)
|
|
5992
|
-
|
|
5993
|
-
|
|
6192
|
+
background-color: var(--sapButton_Hover_Background)
|
|
6193
|
+
}
|
|
6194
|
+
.fd-button.is-hover.is-hover,
|
|
6195
|
+
.fd-button.is-hover:hover,
|
|
6196
|
+
.fd-button:hover.is-hover,
|
|
6197
|
+
.fd-button:hover:hover {
|
|
6198
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6199
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
5994
6200
|
}
|
|
5995
6201
|
.fd-button.is-hover.fd-button--toggled,
|
|
5996
6202
|
.fd-button:hover.fd-button--toggled {
|
|
@@ -5998,17 +6204,12 @@
|
|
|
5998
6204
|
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
5999
6205
|
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6000
6206
|
}
|
|
6001
|
-
.fd-button.is-hover.fd-button--
|
|
6002
|
-
.fd-button
|
|
6003
|
-
|
|
6004
|
-
|
|
6005
|
-
|
|
6006
|
-
|
|
6007
|
-
.fd-button.is-hover.fd-button--ghost.fd-button--toggled,
|
|
6008
|
-
.fd-button:hover.fd-button--ghost.fd-button--toggled {
|
|
6009
|
-
color: var(--sapButton_Selected_TextColor);
|
|
6010
|
-
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6011
|
-
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6207
|
+
.fd-button.is-hover.fd-button--toggled.is-hover,
|
|
6208
|
+
.fd-button.is-hover.fd-button--toggled:hover,
|
|
6209
|
+
.fd-button:hover.fd-button--toggled.is-hover,
|
|
6210
|
+
.fd-button:hover.fd-button--toggled:hover {
|
|
6211
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6212
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6012
6213
|
}
|
|
6013
6214
|
.fd-button.is-hover.fd-button--positive,
|
|
6014
6215
|
.fd-button:hover.fd-button--positive {
|
|
@@ -6016,76 +6217,177 @@
|
|
|
6016
6217
|
border-color: var(--sapButton_Accept_Hover_BorderColor);
|
|
6017
6218
|
background-color: var(--sapButton_Accept_Hover_Background)
|
|
6018
6219
|
}
|
|
6220
|
+
.fd-button.is-hover.fd-button--positive.is-hover,
|
|
6221
|
+
.fd-button.is-hover.fd-button--positive:hover,
|
|
6222
|
+
.fd-button:hover.fd-button--positive.is-hover,
|
|
6223
|
+
.fd-button:hover.fd-button--positive:hover {
|
|
6224
|
+
-webkit-box-shadow: var(--fdButton_Positive_Hover_Shadow);
|
|
6225
|
+
box-shadow: var(--fdButton_Positive_Hover_Shadow)
|
|
6226
|
+
}
|
|
6019
6227
|
.fd-button.is-hover.fd-button--positive.fd-button--toggled,
|
|
6020
6228
|
.fd-button:hover.fd-button--positive.fd-button--toggled {
|
|
6021
6229
|
color: var(--sapButton_Accept_Selected_TextColor);
|
|
6022
6230
|
border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
|
|
6023
6231
|
background-color: var(--sapButton_Accept_Selected_Hover_Background)
|
|
6024
6232
|
}
|
|
6233
|
+
.fd-button.is-hover.fd-button--positive.fd-button--toggled.is-hover,
|
|
6234
|
+
.fd-button.is-hover.fd-button--positive.fd-button--toggled:hover,
|
|
6235
|
+
.fd-button:hover.fd-button--positive.fd-button--toggled.is-hover,
|
|
6236
|
+
.fd-button:hover.fd-button--positive.fd-button--toggled:hover {
|
|
6237
|
+
-webkit-box-shadow: var(--fdButton_Positive_Hover_Shadow);
|
|
6238
|
+
box-shadow: var(--fdButton_Positive_Hover_Shadow)
|
|
6239
|
+
}
|
|
6025
6240
|
.fd-button.is-hover.fd-button--negative,
|
|
6026
6241
|
.fd-button:hover.fd-button--negative {
|
|
6027
6242
|
color: var(--sapButton_Reject_Hover_TextColor);
|
|
6028
6243
|
border-color: var(--sapButton_Reject_Hover_BorderColor);
|
|
6029
6244
|
background-color: var(--sapButton_Reject_Hover_Background)
|
|
6030
6245
|
}
|
|
6246
|
+
.fd-button.is-hover.fd-button--negative.is-hover,
|
|
6247
|
+
.fd-button.is-hover.fd-button--negative:hover,
|
|
6248
|
+
.fd-button:hover.fd-button--negative.is-hover,
|
|
6249
|
+
.fd-button:hover.fd-button--negative:hover {
|
|
6250
|
+
-webkit-box-shadow: var(--fdButton_Negative_Hover_Shadow);
|
|
6251
|
+
box-shadow: var(--fdButton_Negative_Hover_Shadow)
|
|
6252
|
+
}
|
|
6031
6253
|
.fd-button.is-hover.fd-button--negative.fd-button--toggled,
|
|
6032
6254
|
.fd-button:hover.fd-button--negative.fd-button--toggled {
|
|
6033
6255
|
color: var(--sapButton_Reject_Selected_TextColor);
|
|
6034
6256
|
border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
|
|
6035
6257
|
background-color: var(--sapButton_Reject_Selected_Hover_Background)
|
|
6036
6258
|
}
|
|
6259
|
+
.fd-button.is-hover.fd-button--negative.fd-button--toggled.is-hover,
|
|
6260
|
+
.fd-button.is-hover.fd-button--negative.fd-button--toggled:hover,
|
|
6261
|
+
.fd-button:hover.fd-button--negative.fd-button--toggled.is-hover,
|
|
6262
|
+
.fd-button:hover.fd-button--negative.fd-button--toggled:hover {
|
|
6263
|
+
-webkit-box-shadow: var(--fdButton_Negative_Hover_Shadow);
|
|
6264
|
+
box-shadow: var(--fdButton_Negative_Hover_Shadow)
|
|
6265
|
+
}
|
|
6037
6266
|
.fd-button.is-hover.fd-button--attention,
|
|
6038
6267
|
.fd-button:hover.fd-button--attention {
|
|
6039
6268
|
color: var(--sapButton_Attention_Hover_TextColor);
|
|
6040
6269
|
border-color: var(--sapButton_Attention_Hover_BorderColor);
|
|
6041
6270
|
background-color: var(--sapButton_Attention_Hover_Background)
|
|
6042
6271
|
}
|
|
6272
|
+
.fd-button.is-hover.fd-button--attention.is-hover,
|
|
6273
|
+
.fd-button.is-hover.fd-button--attention:hover,
|
|
6274
|
+
.fd-button:hover.fd-button--attention.is-hover,
|
|
6275
|
+
.fd-button:hover.fd-button--attention:hover {
|
|
6276
|
+
-webkit-box-shadow: var(--fdButton_Attention_Hover_Shadow);
|
|
6277
|
+
box-shadow: var(--fdButton_Attention_Hover_Shadow)
|
|
6278
|
+
}
|
|
6043
6279
|
.fd-button.is-hover.fd-button--attention.fd-button--toggled,
|
|
6044
6280
|
.fd-button:hover.fd-button--attention.fd-button--toggled {
|
|
6045
6281
|
color: var(--sapButton_Attention_Selected_TextColor);
|
|
6046
6282
|
border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
|
|
6047
6283
|
background-color: var(--sapButton_Attention_Selected_Hover_Background)
|
|
6048
6284
|
}
|
|
6285
|
+
.fd-button.is-hover.fd-button--attention.fd-button--toggled.is-hover,
|
|
6286
|
+
.fd-button.is-hover.fd-button--attention.fd-button--toggled:hover,
|
|
6287
|
+
.fd-button:hover.fd-button--attention.fd-button--toggled.is-hover,
|
|
6288
|
+
.fd-button:hover.fd-button--attention.fd-button--toggled:hover {
|
|
6289
|
+
-webkit-box-shadow: var(--fdButton_Attention_Hover_Shadow);
|
|
6290
|
+
box-shadow: var(--fdButton_Attention_Hover_Shadow)
|
|
6291
|
+
}
|
|
6049
6292
|
.fd-button.is-hover.fd-button--emphasized,
|
|
6050
6293
|
.fd-button:hover.fd-button--emphasized {
|
|
6051
6294
|
color: var(--sapButton_Emphasized_Hover_TextColor);
|
|
6052
6295
|
border-color: var(--sapButton_Emphasized_Hover_BorderColor);
|
|
6053
6296
|
background-color: var(--sapButton_Emphasized_Hover_Background)
|
|
6054
6297
|
}
|
|
6298
|
+
.fd-button.is-hover.fd-button--emphasized.is-hover,
|
|
6299
|
+
.fd-button.is-hover.fd-button--emphasized:hover,
|
|
6300
|
+
.fd-button:hover.fd-button--emphasized.is-hover,
|
|
6301
|
+
.fd-button:hover.fd-button--emphasized:hover {
|
|
6302
|
+
-webkit-box-shadow: none;
|
|
6303
|
+
box-shadow: none
|
|
6304
|
+
}
|
|
6055
6305
|
.fd-button.is-hover.fd-button--emphasized.fd-button--toggled,
|
|
6056
6306
|
.fd-button:hover.fd-button--emphasized.fd-button--toggled {
|
|
6057
6307
|
color: var(--sapButton_Selected_TextColor);
|
|
6058
6308
|
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6059
6309
|
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6060
6310
|
}
|
|
6311
|
+
.fd-button.is-hover.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6312
|
+
.fd-button.is-hover.fd-button--emphasized.fd-button--toggled:hover,
|
|
6313
|
+
.fd-button:hover.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6314
|
+
.fd-button:hover.fd-button--emphasized.fd-button--toggled:hover {
|
|
6315
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6316
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6317
|
+
}
|
|
6318
|
+
.fd-button.is-hover.fd-button--transparent,
|
|
6319
|
+
.fd-button:hover.fd-button--transparent {
|
|
6320
|
+
color: var(--sapButton_Lite_Hover_TextColor);
|
|
6321
|
+
border-color: var(--sapButton_Lite_Hover_BorderColor);
|
|
6322
|
+
background-color: var(--sapButton_Lite_Hover_Background)
|
|
6323
|
+
}
|
|
6324
|
+
.fd-button.is-hover.fd-button--transparent.is-hover,
|
|
6325
|
+
.fd-button.is-hover.fd-button--transparent:hover,
|
|
6326
|
+
.fd-button:hover.fd-button--transparent.is-hover,
|
|
6327
|
+
.fd-button:hover.fd-button--transparent:hover {
|
|
6328
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6329
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6330
|
+
}
|
|
6331
|
+
.fd-button.is-hover.fd-button--transparent.fd-button--toggled,
|
|
6332
|
+
.fd-button:hover.fd-button--transparent.fd-button--toggled {
|
|
6333
|
+
color: var(--sapButton_Selected_TextColor);
|
|
6334
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6335
|
+
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6336
|
+
}
|
|
6337
|
+
.fd-button.is-hover.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6338
|
+
.fd-button.is-hover.fd-button--transparent.fd-button--toggled:hover,
|
|
6339
|
+
.fd-button:hover.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6340
|
+
.fd-button:hover.fd-button--transparent.fd-button--toggled:hover {
|
|
6341
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6342
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6343
|
+
}
|
|
6061
6344
|
.fd-button.is-focus,
|
|
6062
6345
|
.fd-button:focus {
|
|
6063
6346
|
z-index: 5;
|
|
6064
|
-
-webkit-box-shadow: none;
|
|
6065
|
-
box-shadow: none;
|
|
6066
6347
|
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
6067
|
-
outline-offset:
|
|
6348
|
+
outline-offset: var(--fdButton_Outline_Offset);
|
|
6349
|
+
-webkit-box-shadow: none;
|
|
6350
|
+
box-shadow: none
|
|
6068
6351
|
}
|
|
6069
6352
|
.fd-button.is-focus.fd-button--toggled,
|
|
6070
6353
|
.fd-button:focus.fd-button--toggled {
|
|
6071
|
-
outline-color: var(--
|
|
6354
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
6072
6355
|
}
|
|
6073
6356
|
.fd-button.is-focus.fd-button--emphasized,
|
|
6074
6357
|
.fd-button:focus.fd-button--emphasized {
|
|
6075
6358
|
outline-color: var(--sapContent_ContrastFocusColor)
|
|
6076
6359
|
}
|
|
6360
|
+
.fd-button.is-focus.fd-button--emphasized.fd-button--toggled,
|
|
6361
|
+
.fd-button:focus.fd-button--emphasized.fd-button--toggled {
|
|
6362
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
6363
|
+
}
|
|
6077
6364
|
.fd-button.is-active,
|
|
6078
6365
|
.fd-button.is-pressed,
|
|
6079
6366
|
.fd-button.is-selected,
|
|
6080
6367
|
.fd-button:active,
|
|
6081
6368
|
.fd-button[aria-pressed=true],
|
|
6082
6369
|
.fd-button[aria-selected=true] {
|
|
6370
|
+
color: var(--sapButton_Active_TextColor);
|
|
6371
|
+
border-color: var(--sapButton_Active_BorderColor);
|
|
6372
|
+
background-color: var(--sapButton_Active_Background);
|
|
6083
6373
|
-webkit-box-shadow: none;
|
|
6084
6374
|
box-shadow: none;
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6375
|
+
outline: 0
|
|
6376
|
+
}
|
|
6377
|
+
.fd-button.is-active.is-hover,
|
|
6378
|
+
.fd-button.is-active:hover,
|
|
6379
|
+
.fd-button.is-pressed.is-hover,
|
|
6380
|
+
.fd-button.is-pressed:hover,
|
|
6381
|
+
.fd-button.is-selected.is-hover,
|
|
6382
|
+
.fd-button.is-selected:hover,
|
|
6383
|
+
.fd-button:active.is-hover,
|
|
6384
|
+
.fd-button:active:hover,
|
|
6385
|
+
.fd-button[aria-pressed=true].is-hover,
|
|
6386
|
+
.fd-button[aria-pressed=true]:hover,
|
|
6387
|
+
.fd-button[aria-selected=true].is-hover,
|
|
6388
|
+
.fd-button[aria-selected=true]:hover {
|
|
6389
|
+
-webkit-box-shadow: none;
|
|
6390
|
+
box-shadow: none
|
|
6089
6391
|
}
|
|
6090
6392
|
.fd-button.is-active.fd-button--toggled,
|
|
6091
6393
|
.fd-button.is-pressed.fd-button--toggled,
|
|
@@ -6097,25 +6399,20 @@
|
|
|
6097
6399
|
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6098
6400
|
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6099
6401
|
}
|
|
6100
|
-
.fd-button.is-active.fd-button--
|
|
6101
|
-
.fd-button.is-
|
|
6102
|
-
.fd-button.is-
|
|
6103
|
-
.fd-button
|
|
6104
|
-
.fd-button
|
|
6105
|
-
.fd-button
|
|
6106
|
-
|
|
6107
|
-
|
|
6108
|
-
|
|
6109
|
-
|
|
6110
|
-
.fd-button
|
|
6111
|
-
.fd-button
|
|
6112
|
-
|
|
6113
|
-
|
|
6114
|
-
.fd-button[aria-pressed=true].fd-button--ghost.fd-button--toggled,
|
|
6115
|
-
.fd-button[aria-selected=true].fd-button--ghost.fd-button--toggled {
|
|
6116
|
-
color: var(--sapButton_Selected_TextColor);
|
|
6117
|
-
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6118
|
-
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6402
|
+
.fd-button.is-active.fd-button--toggled.is-hover,
|
|
6403
|
+
.fd-button.is-active.fd-button--toggled:hover,
|
|
6404
|
+
.fd-button.is-pressed.fd-button--toggled.is-hover,
|
|
6405
|
+
.fd-button.is-pressed.fd-button--toggled:hover,
|
|
6406
|
+
.fd-button.is-selected.fd-button--toggled.is-hover,
|
|
6407
|
+
.fd-button.is-selected.fd-button--toggled:hover,
|
|
6408
|
+
.fd-button:active.fd-button--toggled.is-hover,
|
|
6409
|
+
.fd-button:active.fd-button--toggled:hover,
|
|
6410
|
+
.fd-button[aria-pressed=true].fd-button--toggled.is-hover,
|
|
6411
|
+
.fd-button[aria-pressed=true].fd-button--toggled:hover,
|
|
6412
|
+
.fd-button[aria-selected=true].fd-button--toggled.is-hover,
|
|
6413
|
+
.fd-button[aria-selected=true].fd-button--toggled:hover {
|
|
6414
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6415
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6119
6416
|
}
|
|
6120
6417
|
.fd-button.is-active.fd-button--positive,
|
|
6121
6418
|
.fd-button.is-pressed.fd-button--positive,
|
|
@@ -6127,6 +6424,21 @@
|
|
|
6127
6424
|
border-color: var(--sapButton_Accept_Active_BorderColor);
|
|
6128
6425
|
background-color: var(--sapButton_Accept_Active_Background)
|
|
6129
6426
|
}
|
|
6427
|
+
.fd-button.is-active.fd-button--positive.is-hover,
|
|
6428
|
+
.fd-button.is-active.fd-button--positive:hover,
|
|
6429
|
+
.fd-button.is-pressed.fd-button--positive.is-hover,
|
|
6430
|
+
.fd-button.is-pressed.fd-button--positive:hover,
|
|
6431
|
+
.fd-button.is-selected.fd-button--positive.is-hover,
|
|
6432
|
+
.fd-button.is-selected.fd-button--positive:hover,
|
|
6433
|
+
.fd-button:active.fd-button--positive.is-hover,
|
|
6434
|
+
.fd-button:active.fd-button--positive:hover,
|
|
6435
|
+
.fd-button[aria-pressed=true].fd-button--positive.is-hover,
|
|
6436
|
+
.fd-button[aria-pressed=true].fd-button--positive:hover,
|
|
6437
|
+
.fd-button[aria-selected=true].fd-button--positive.is-hover,
|
|
6438
|
+
.fd-button[aria-selected=true].fd-button--positive:hover {
|
|
6439
|
+
-webkit-box-shadow: none;
|
|
6440
|
+
box-shadow: none
|
|
6441
|
+
}
|
|
6130
6442
|
.fd-button.is-active.fd-button--positive.fd-button--toggled,
|
|
6131
6443
|
.fd-button.is-pressed.fd-button--positive.fd-button--toggled,
|
|
6132
6444
|
.fd-button.is-selected.fd-button--positive.fd-button--toggled,
|
|
@@ -6137,6 +6449,21 @@
|
|
|
6137
6449
|
border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
|
|
6138
6450
|
background-color: var(--sapButton_Accept_Selected_Hover_Background)
|
|
6139
6451
|
}
|
|
6452
|
+
.fd-button.is-active.fd-button--positive.fd-button--toggled.is-hover,
|
|
6453
|
+
.fd-button.is-active.fd-button--positive.fd-button--toggled:hover,
|
|
6454
|
+
.fd-button.is-pressed.fd-button--positive.fd-button--toggled.is-hover,
|
|
6455
|
+
.fd-button.is-pressed.fd-button--positive.fd-button--toggled:hover,
|
|
6456
|
+
.fd-button.is-selected.fd-button--positive.fd-button--toggled.is-hover,
|
|
6457
|
+
.fd-button.is-selected.fd-button--positive.fd-button--toggled:hover,
|
|
6458
|
+
.fd-button:active.fd-button--positive.fd-button--toggled.is-hover,
|
|
6459
|
+
.fd-button:active.fd-button--positive.fd-button--toggled:hover,
|
|
6460
|
+
.fd-button[aria-pressed=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6461
|
+
.fd-button[aria-pressed=true].fd-button--positive.fd-button--toggled:hover,
|
|
6462
|
+
.fd-button[aria-selected=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6463
|
+
.fd-button[aria-selected=true].fd-button--positive.fd-button--toggled:hover {
|
|
6464
|
+
-webkit-box-shadow: var(--fdButton_Positive_Hover_Shadow);
|
|
6465
|
+
box-shadow: var(--fdButton_Positive_Hover_Shadow)
|
|
6466
|
+
}
|
|
6140
6467
|
.fd-button.is-active.fd-button--negative,
|
|
6141
6468
|
.fd-button.is-pressed.fd-button--negative,
|
|
6142
6469
|
.fd-button.is-selected.fd-button--negative,
|
|
@@ -6147,6 +6474,21 @@
|
|
|
6147
6474
|
border-color: var(--sapButton_Reject_Active_BorderColor);
|
|
6148
6475
|
background-color: var(--sapButton_Reject_Active_Background)
|
|
6149
6476
|
}
|
|
6477
|
+
.fd-button.is-active.fd-button--negative.is-hover,
|
|
6478
|
+
.fd-button.is-active.fd-button--negative:hover,
|
|
6479
|
+
.fd-button.is-pressed.fd-button--negative.is-hover,
|
|
6480
|
+
.fd-button.is-pressed.fd-button--negative:hover,
|
|
6481
|
+
.fd-button.is-selected.fd-button--negative.is-hover,
|
|
6482
|
+
.fd-button.is-selected.fd-button--negative:hover,
|
|
6483
|
+
.fd-button:active.fd-button--negative.is-hover,
|
|
6484
|
+
.fd-button:active.fd-button--negative:hover,
|
|
6485
|
+
.fd-button[aria-pressed=true].fd-button--negative.is-hover,
|
|
6486
|
+
.fd-button[aria-pressed=true].fd-button--negative:hover,
|
|
6487
|
+
.fd-button[aria-selected=true].fd-button--negative.is-hover,
|
|
6488
|
+
.fd-button[aria-selected=true].fd-button--negative:hover {
|
|
6489
|
+
-webkit-box-shadow: none;
|
|
6490
|
+
box-shadow: none
|
|
6491
|
+
}
|
|
6150
6492
|
.fd-button.is-active.fd-button--negative.fd-button--toggled,
|
|
6151
6493
|
.fd-button.is-pressed.fd-button--negative.fd-button--toggled,
|
|
6152
6494
|
.fd-button.is-selected.fd-button--negative.fd-button--toggled,
|
|
@@ -6157,6 +6499,21 @@
|
|
|
6157
6499
|
border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
|
|
6158
6500
|
background-color: var(--sapButton_Reject_Selected_Hover_Background)
|
|
6159
6501
|
}
|
|
6502
|
+
.fd-button.is-active.fd-button--negative.fd-button--toggled.is-hover,
|
|
6503
|
+
.fd-button.is-active.fd-button--negative.fd-button--toggled:hover,
|
|
6504
|
+
.fd-button.is-pressed.fd-button--negative.fd-button--toggled.is-hover,
|
|
6505
|
+
.fd-button.is-pressed.fd-button--negative.fd-button--toggled:hover,
|
|
6506
|
+
.fd-button.is-selected.fd-button--negative.fd-button--toggled.is-hover,
|
|
6507
|
+
.fd-button.is-selected.fd-button--negative.fd-button--toggled:hover,
|
|
6508
|
+
.fd-button:active.fd-button--negative.fd-button--toggled.is-hover,
|
|
6509
|
+
.fd-button:active.fd-button--negative.fd-button--toggled:hover,
|
|
6510
|
+
.fd-button[aria-pressed=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
6511
|
+
.fd-button[aria-pressed=true].fd-button--negative.fd-button--toggled:hover,
|
|
6512
|
+
.fd-button[aria-selected=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
6513
|
+
.fd-button[aria-selected=true].fd-button--negative.fd-button--toggled:hover {
|
|
6514
|
+
-webkit-box-shadow: var(--fdButton_Negative_Hover_Shadow);
|
|
6515
|
+
box-shadow: var(--fdButton_Negative_Hover_Shadow)
|
|
6516
|
+
}
|
|
6160
6517
|
.fd-button.is-active.fd-button--attention,
|
|
6161
6518
|
.fd-button.is-pressed.fd-button--attention,
|
|
6162
6519
|
.fd-button.is-selected.fd-button--attention,
|
|
@@ -6167,6 +6524,21 @@
|
|
|
6167
6524
|
border-color: var(--sapButton_Attention_Active_BorderColor);
|
|
6168
6525
|
background-color: var(--sapButton_Attention_Active_Background)
|
|
6169
6526
|
}
|
|
6527
|
+
.fd-button.is-active.fd-button--attention.is-hover,
|
|
6528
|
+
.fd-button.is-active.fd-button--attention:hover,
|
|
6529
|
+
.fd-button.is-pressed.fd-button--attention.is-hover,
|
|
6530
|
+
.fd-button.is-pressed.fd-button--attention:hover,
|
|
6531
|
+
.fd-button.is-selected.fd-button--attention.is-hover,
|
|
6532
|
+
.fd-button.is-selected.fd-button--attention:hover,
|
|
6533
|
+
.fd-button:active.fd-button--attention.is-hover,
|
|
6534
|
+
.fd-button:active.fd-button--attention:hover,
|
|
6535
|
+
.fd-button[aria-pressed=true].fd-button--attention.is-hover,
|
|
6536
|
+
.fd-button[aria-pressed=true].fd-button--attention:hover,
|
|
6537
|
+
.fd-button[aria-selected=true].fd-button--attention.is-hover,
|
|
6538
|
+
.fd-button[aria-selected=true].fd-button--attention:hover {
|
|
6539
|
+
-webkit-box-shadow: none;
|
|
6540
|
+
box-shadow: none
|
|
6541
|
+
}
|
|
6170
6542
|
.fd-button.is-active.fd-button--attention.fd-button--toggled,
|
|
6171
6543
|
.fd-button.is-pressed.fd-button--attention.fd-button--toggled,
|
|
6172
6544
|
.fd-button.is-selected.fd-button--attention.fd-button--toggled,
|
|
@@ -6177,6 +6549,21 @@
|
|
|
6177
6549
|
border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
|
|
6178
6550
|
background-color: var(--sapButton_Attention_Selected_Hover_Background)
|
|
6179
6551
|
}
|
|
6552
|
+
.fd-button.is-active.fd-button--attention.fd-button--toggled.is-hover,
|
|
6553
|
+
.fd-button.is-active.fd-button--attention.fd-button--toggled:hover,
|
|
6554
|
+
.fd-button.is-pressed.fd-button--attention.fd-button--toggled.is-hover,
|
|
6555
|
+
.fd-button.is-pressed.fd-button--attention.fd-button--toggled:hover,
|
|
6556
|
+
.fd-button.is-selected.fd-button--attention.fd-button--toggled.is-hover,
|
|
6557
|
+
.fd-button.is-selected.fd-button--attention.fd-button--toggled:hover,
|
|
6558
|
+
.fd-button:active.fd-button--attention.fd-button--toggled.is-hover,
|
|
6559
|
+
.fd-button:active.fd-button--attention.fd-button--toggled:hover,
|
|
6560
|
+
.fd-button[aria-pressed=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
6561
|
+
.fd-button[aria-pressed=true].fd-button--attention.fd-button--toggled:hover,
|
|
6562
|
+
.fd-button[aria-selected=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
6563
|
+
.fd-button[aria-selected=true].fd-button--attention.fd-button--toggled:hover {
|
|
6564
|
+
-webkit-box-shadow: var(--fdButton_Attention_Hover_Shadow);
|
|
6565
|
+
box-shadow: var(--fdButton_Attention_Hover_Shadow)
|
|
6566
|
+
}
|
|
6180
6567
|
.fd-button.is-active.fd-button--emphasized,
|
|
6181
6568
|
.fd-button.is-pressed.fd-button--emphasized,
|
|
6182
6569
|
.fd-button.is-selected.fd-button--emphasized,
|
|
@@ -6187,6 +6574,21 @@
|
|
|
6187
6574
|
border-color: var(--sapButton_Emphasized_Active_BorderColor);
|
|
6188
6575
|
background-color: var(--sapButton_Emphasized_Active_Background)
|
|
6189
6576
|
}
|
|
6577
|
+
.fd-button.is-active.fd-button--emphasized.is-hover,
|
|
6578
|
+
.fd-button.is-active.fd-button--emphasized:hover,
|
|
6579
|
+
.fd-button.is-pressed.fd-button--emphasized.is-hover,
|
|
6580
|
+
.fd-button.is-pressed.fd-button--emphasized:hover,
|
|
6581
|
+
.fd-button.is-selected.fd-button--emphasized.is-hover,
|
|
6582
|
+
.fd-button.is-selected.fd-button--emphasized:hover,
|
|
6583
|
+
.fd-button:active.fd-button--emphasized.is-hover,
|
|
6584
|
+
.fd-button:active.fd-button--emphasized:hover,
|
|
6585
|
+
.fd-button[aria-pressed=true].fd-button--emphasized.is-hover,
|
|
6586
|
+
.fd-button[aria-pressed=true].fd-button--emphasized:hover,
|
|
6587
|
+
.fd-button[aria-selected=true].fd-button--emphasized.is-hover,
|
|
6588
|
+
.fd-button[aria-selected=true].fd-button--emphasized:hover {
|
|
6589
|
+
-webkit-box-shadow: none;
|
|
6590
|
+
box-shadow: none
|
|
6591
|
+
}
|
|
6190
6592
|
.fd-button.is-active.fd-button--emphasized.fd-button--toggled,
|
|
6191
6593
|
.fd-button.is-pressed.fd-button--emphasized.fd-button--toggled,
|
|
6192
6594
|
.fd-button.is-selected.fd-button--emphasized.fd-button--toggled,
|
|
@@ -6197,172 +6599,607 @@
|
|
|
6197
6599
|
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6198
6600
|
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6199
6601
|
}
|
|
6602
|
+
.fd-button.is-active.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6603
|
+
.fd-button.is-active.fd-button--emphasized.fd-button--toggled:hover,
|
|
6604
|
+
.fd-button.is-pressed.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6605
|
+
.fd-button.is-pressed.fd-button--emphasized.fd-button--toggled:hover,
|
|
6606
|
+
.fd-button.is-selected.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6607
|
+
.fd-button.is-selected.fd-button--emphasized.fd-button--toggled:hover,
|
|
6608
|
+
.fd-button:active.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6609
|
+
.fd-button:active.fd-button--emphasized.fd-button--toggled:hover,
|
|
6610
|
+
.fd-button[aria-pressed=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6611
|
+
.fd-button[aria-pressed=true].fd-button--emphasized.fd-button--toggled:hover,
|
|
6612
|
+
.fd-button[aria-selected=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6613
|
+
.fd-button[aria-selected=true].fd-button--emphasized.fd-button--toggled:hover {
|
|
6614
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6615
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6616
|
+
}
|
|
6617
|
+
.fd-button.is-active.fd-button--transparent,
|
|
6618
|
+
.fd-button.is-pressed.fd-button--transparent,
|
|
6619
|
+
.fd-button.is-selected.fd-button--transparent,
|
|
6620
|
+
.fd-button:active.fd-button--transparent,
|
|
6621
|
+
.fd-button[aria-pressed=true].fd-button--transparent,
|
|
6622
|
+
.fd-button[aria-selected=true].fd-button--transparent {
|
|
6623
|
+
color: var(--sapButton_Active_TextColor);
|
|
6624
|
+
border-color: var(--sapButton_Lite_Active_BorderColor);
|
|
6625
|
+
background-color: var(--sapButton_Lite_Active_Background)
|
|
6626
|
+
}
|
|
6627
|
+
.fd-button.is-active.fd-button--transparent.is-hover,
|
|
6628
|
+
.fd-button.is-active.fd-button--transparent:hover,
|
|
6629
|
+
.fd-button.is-pressed.fd-button--transparent.is-hover,
|
|
6630
|
+
.fd-button.is-pressed.fd-button--transparent:hover,
|
|
6631
|
+
.fd-button.is-selected.fd-button--transparent.is-hover,
|
|
6632
|
+
.fd-button.is-selected.fd-button--transparent:hover,
|
|
6633
|
+
.fd-button:active.fd-button--transparent.is-hover,
|
|
6634
|
+
.fd-button:active.fd-button--transparent:hover,
|
|
6635
|
+
.fd-button[aria-pressed=true].fd-button--transparent.is-hover,
|
|
6636
|
+
.fd-button[aria-pressed=true].fd-button--transparent:hover,
|
|
6637
|
+
.fd-button[aria-selected=true].fd-button--transparent.is-hover,
|
|
6638
|
+
.fd-button[aria-selected=true].fd-button--transparent:hover {
|
|
6639
|
+
-webkit-box-shadow: none;
|
|
6640
|
+
box-shadow: none
|
|
6641
|
+
}
|
|
6642
|
+
.fd-button.is-active.fd-button--transparent.fd-button--toggled,
|
|
6643
|
+
.fd-button.is-pressed.fd-button--transparent.fd-button--toggled,
|
|
6644
|
+
.fd-button.is-selected.fd-button--transparent.fd-button--toggled,
|
|
6645
|
+
.fd-button:active.fd-button--transparent.fd-button--toggled,
|
|
6646
|
+
.fd-button[aria-pressed=true].fd-button--transparent.fd-button--toggled,
|
|
6647
|
+
.fd-button[aria-selected=true].fd-button--transparent.fd-button--toggled {
|
|
6648
|
+
color: var(--sapButton_Selected_TextColor);
|
|
6649
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6650
|
+
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6651
|
+
}
|
|
6652
|
+
.fd-button.is-active.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6653
|
+
.fd-button.is-active.fd-button--transparent.fd-button--toggled:hover,
|
|
6654
|
+
.fd-button.is-pressed.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6655
|
+
.fd-button.is-pressed.fd-button--transparent.fd-button--toggled:hover,
|
|
6656
|
+
.fd-button.is-selected.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6657
|
+
.fd-button.is-selected.fd-button--transparent.fd-button--toggled:hover,
|
|
6658
|
+
.fd-button:active.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6659
|
+
.fd-button:active.fd-button--transparent.fd-button--toggled:hover,
|
|
6660
|
+
.fd-button[aria-pressed=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
6661
|
+
.fd-button[aria-pressed=true].fd-button--transparent.fd-button--toggled:hover,
|
|
6662
|
+
.fd-button[aria-selected=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
6663
|
+
.fd-button[aria-selected=true].fd-button--transparent.fd-button--toggled:hover {
|
|
6664
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6665
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6666
|
+
}
|
|
6200
6667
|
.fd-button.is-disabled,
|
|
6668
|
+
.fd-button:disabled,
|
|
6201
6669
|
.fd-button[aria-disabled=true] {
|
|
6202
|
-
opacity: var(--sapContent_DisabledOpacity);
|
|
6203
|
-
cursor: not-allowed;
|
|
6204
6670
|
color: var(--sapButton_TextColor);
|
|
6205
6671
|
border-color: var(--sapButton_BorderColor);
|
|
6206
|
-
background-color: var(--sapButton_Background)
|
|
6672
|
+
background-color: var(--sapButton_Background);
|
|
6673
|
+
-webkit-box-shadow: none;
|
|
6674
|
+
box-shadow: none;
|
|
6675
|
+
cursor: not-allowed;
|
|
6676
|
+
opacity: var(--sapContent_DisabledOpacity)
|
|
6677
|
+
}
|
|
6678
|
+
.fd-button.is-disabled.is-hover,
|
|
6679
|
+
.fd-button.is-disabled:hover,
|
|
6680
|
+
.fd-button:disabled.is-hover,
|
|
6681
|
+
.fd-button:disabled:hover,
|
|
6682
|
+
.fd-button[aria-disabled=true].is-hover,
|
|
6683
|
+
.fd-button[aria-disabled=true]:hover {
|
|
6684
|
+
-webkit-box-shadow: none;
|
|
6685
|
+
box-shadow: none
|
|
6207
6686
|
}
|
|
6208
6687
|
.fd-button.is-disabled.fd-button--toggled,
|
|
6688
|
+
.fd-button:disabled.fd-button--toggled,
|
|
6209
6689
|
.fd-button[aria-disabled=true].fd-button--toggled {
|
|
6210
6690
|
color: var(--sapButton_Selected_TextColor);
|
|
6211
6691
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
6212
6692
|
background-color: var(--sapButton_Selected_Background)
|
|
6213
6693
|
}
|
|
6694
|
+
.fd-button.is-disabled.fd-button--toggled.is-hover,
|
|
6695
|
+
.fd-button.is-disabled.fd-button--toggled:hover,
|
|
6696
|
+
.fd-button:disabled.fd-button--toggled.is-hover,
|
|
6697
|
+
.fd-button:disabled.fd-button--toggled:hover,
|
|
6698
|
+
.fd-button[aria-disabled=true].fd-button--toggled.is-hover,
|
|
6699
|
+
.fd-button[aria-disabled=true].fd-button--toggled:hover {
|
|
6700
|
+
-webkit-box-shadow: none;
|
|
6701
|
+
box-shadow: none
|
|
6702
|
+
}
|
|
6214
6703
|
.fd-button.is-disabled.fd-button--ghost,
|
|
6704
|
+
.fd-button:disabled.fd-button--ghost,
|
|
6215
6705
|
.fd-button[aria-disabled=true].fd-button--ghost {
|
|
6216
6706
|
color: var(--sapButton_TextColor);
|
|
6217
6707
|
border-color: var(--sapButton_BorderColor);
|
|
6218
|
-
background-color: var(--
|
|
6708
|
+
background-color: var(--fdButton_Ghost_Background)
|
|
6709
|
+
}
|
|
6710
|
+
.fd-button.is-disabled.fd-button--ghost.is-hover,
|
|
6711
|
+
.fd-button.is-disabled.fd-button--ghost:hover,
|
|
6712
|
+
.fd-button:disabled.fd-button--ghost.is-hover,
|
|
6713
|
+
.fd-button:disabled.fd-button--ghost:hover,
|
|
6714
|
+
.fd-button[aria-disabled=true].fd-button--ghost.is-hover,
|
|
6715
|
+
.fd-button[aria-disabled=true].fd-button--ghost:hover {
|
|
6716
|
+
-webkit-box-shadow: none;
|
|
6717
|
+
box-shadow: none
|
|
6219
6718
|
}
|
|
6220
6719
|
.fd-button.is-disabled.fd-button--ghost.fd-button--toggled,
|
|
6720
|
+
.fd-button:disabled.fd-button--ghost.fd-button--toggled,
|
|
6221
6721
|
.fd-button[aria-disabled=true].fd-button--ghost.fd-button--toggled {
|
|
6222
6722
|
color: var(--sapButton_Selected_TextColor);
|
|
6223
6723
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
6224
6724
|
background-color: var(--sapButton_Selected_Background)
|
|
6225
6725
|
}
|
|
6726
|
+
.fd-button.is-disabled.fd-button--ghost.fd-button--toggled.is-hover,
|
|
6727
|
+
.fd-button.is-disabled.fd-button--ghost.fd-button--toggled:hover,
|
|
6728
|
+
.fd-button:disabled.fd-button--ghost.fd-button--toggled.is-hover,
|
|
6729
|
+
.fd-button:disabled.fd-button--ghost.fd-button--toggled:hover,
|
|
6730
|
+
.fd-button[aria-disabled=true].fd-button--ghost.fd-button--toggled.is-hover,
|
|
6731
|
+
.fd-button[aria-disabled=true].fd-button--ghost.fd-button--toggled:hover {
|
|
6732
|
+
-webkit-box-shadow: none;
|
|
6733
|
+
box-shadow: none
|
|
6734
|
+
}
|
|
6226
6735
|
.fd-button.is-disabled.fd-button--positive,
|
|
6736
|
+
.fd-button:disabled.fd-button--positive,
|
|
6227
6737
|
.fd-button[aria-disabled=true].fd-button--positive {
|
|
6228
6738
|
color: var(--sapButton_Accept_TextColor);
|
|
6229
6739
|
border-color: var(--sapButton_Accept_BorderColor);
|
|
6230
6740
|
background-color: var(--sapButton_Accept_Background)
|
|
6231
6741
|
}
|
|
6742
|
+
.fd-button.is-disabled.fd-button--positive.is-hover,
|
|
6743
|
+
.fd-button.is-disabled.fd-button--positive:hover,
|
|
6744
|
+
.fd-button:disabled.fd-button--positive.is-hover,
|
|
6745
|
+
.fd-button:disabled.fd-button--positive:hover,
|
|
6746
|
+
.fd-button[aria-disabled=true].fd-button--positive.is-hover,
|
|
6747
|
+
.fd-button[aria-disabled=true].fd-button--positive:hover {
|
|
6748
|
+
-webkit-box-shadow: none;
|
|
6749
|
+
box-shadow: none
|
|
6750
|
+
}
|
|
6232
6751
|
.fd-button.is-disabled.fd-button--positive.fd-button--toggled,
|
|
6752
|
+
.fd-button:disabled.fd-button--positive.fd-button--toggled,
|
|
6233
6753
|
.fd-button[aria-disabled=true].fd-button--positive.fd-button--toggled {
|
|
6234
6754
|
color: var(--sapButton_Accept_Selected_TextColor);
|
|
6235
6755
|
border-color: var(--sapButton_Accept_Selected_BorderColor);
|
|
6236
6756
|
background-color: var(--sapButton_Accept_Selected_Background)
|
|
6237
6757
|
}
|
|
6758
|
+
.fd-button.is-disabled.fd-button--positive.fd-button--toggled.is-hover,
|
|
6759
|
+
.fd-button.is-disabled.fd-button--positive.fd-button--toggled:hover,
|
|
6760
|
+
.fd-button:disabled.fd-button--positive.fd-button--toggled.is-hover,
|
|
6761
|
+
.fd-button:disabled.fd-button--positive.fd-button--toggled:hover,
|
|
6762
|
+
.fd-button[aria-disabled=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6763
|
+
.fd-button[aria-disabled=true].fd-button--positive.fd-button--toggled:hover {
|
|
6764
|
+
-webkit-box-shadow: none;
|
|
6765
|
+
box-shadow: none
|
|
6766
|
+
}
|
|
6238
6767
|
.fd-button.is-disabled.fd-button--negative,
|
|
6768
|
+
.fd-button:disabled.fd-button--negative,
|
|
6239
6769
|
.fd-button[aria-disabled=true].fd-button--negative {
|
|
6240
6770
|
color: var(--sapButton_Reject_TextColor);
|
|
6241
6771
|
border-color: var(--sapButton_Reject_BorderColor);
|
|
6242
6772
|
background-color: var(--sapButton_Reject_Background)
|
|
6243
6773
|
}
|
|
6774
|
+
.fd-button.is-disabled.fd-button--negative.is-hover,
|
|
6775
|
+
.fd-button.is-disabled.fd-button--negative:hover,
|
|
6776
|
+
.fd-button:disabled.fd-button--negative.is-hover,
|
|
6777
|
+
.fd-button:disabled.fd-button--negative:hover,
|
|
6778
|
+
.fd-button[aria-disabled=true].fd-button--negative.is-hover,
|
|
6779
|
+
.fd-button[aria-disabled=true].fd-button--negative:hover {
|
|
6780
|
+
-webkit-box-shadow: none;
|
|
6781
|
+
box-shadow: none
|
|
6782
|
+
}
|
|
6244
6783
|
.fd-button.is-disabled.fd-button--negative.fd-button--toggled,
|
|
6784
|
+
.fd-button:disabled.fd-button--negative.fd-button--toggled,
|
|
6245
6785
|
.fd-button[aria-disabled=true].fd-button--negative.fd-button--toggled {
|
|
6246
6786
|
color: var(--sapButton_Reject_Selected_TextColor);
|
|
6247
6787
|
border-color: var(--sapButton_Reject_Selected_BorderColor);
|
|
6248
6788
|
background-color: var(--sapButton_Reject_Selected_Background)
|
|
6249
6789
|
}
|
|
6790
|
+
.fd-button.is-disabled.fd-button--negative.fd-button--toggled.is-hover,
|
|
6791
|
+
.fd-button.is-disabled.fd-button--negative.fd-button--toggled:hover,
|
|
6792
|
+
.fd-button:disabled.fd-button--negative.fd-button--toggled.is-hover,
|
|
6793
|
+
.fd-button:disabled.fd-button--negative.fd-button--toggled:hover,
|
|
6794
|
+
.fd-button[aria-disabled=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
6795
|
+
.fd-button[aria-disabled=true].fd-button--negative.fd-button--toggled:hover {
|
|
6796
|
+
-webkit-box-shadow: none;
|
|
6797
|
+
box-shadow: none
|
|
6798
|
+
}
|
|
6250
6799
|
.fd-button.is-disabled.fd-button--attention,
|
|
6800
|
+
.fd-button:disabled.fd-button--attention,
|
|
6251
6801
|
.fd-button[aria-disabled=true].fd-button--attention {
|
|
6252
6802
|
color: var(--sapButton_Attention_TextColor);
|
|
6253
6803
|
border-color: var(--sapButton_Attention_BorderColor);
|
|
6254
6804
|
background-color: var(--sapButton_Attention_Background)
|
|
6255
6805
|
}
|
|
6806
|
+
.fd-button.is-disabled.fd-button--attention.is-hover,
|
|
6807
|
+
.fd-button.is-disabled.fd-button--attention:hover,
|
|
6808
|
+
.fd-button:disabled.fd-button--attention.is-hover,
|
|
6809
|
+
.fd-button:disabled.fd-button--attention:hover,
|
|
6810
|
+
.fd-button[aria-disabled=true].fd-button--attention.is-hover,
|
|
6811
|
+
.fd-button[aria-disabled=true].fd-button--attention:hover {
|
|
6812
|
+
-webkit-box-shadow: none;
|
|
6813
|
+
box-shadow: none
|
|
6814
|
+
}
|
|
6256
6815
|
.fd-button.is-disabled.fd-button--attention.fd-button--toggled,
|
|
6816
|
+
.fd-button:disabled.fd-button--attention.fd-button--toggled,
|
|
6257
6817
|
.fd-button[aria-disabled=true].fd-button--attention.fd-button--toggled {
|
|
6258
6818
|
color: var(--sapButton_Attention_Selected_TextColor);
|
|
6259
6819
|
border-color: var(--sapButton_Attention_Selected_BorderColor);
|
|
6260
6820
|
background-color: var(--sapButton_Attention_Selected_Background)
|
|
6261
6821
|
}
|
|
6822
|
+
.fd-button.is-disabled.fd-button--attention.fd-button--toggled.is-hover,
|
|
6823
|
+
.fd-button.is-disabled.fd-button--attention.fd-button--toggled:hover,
|
|
6824
|
+
.fd-button:disabled.fd-button--attention.fd-button--toggled.is-hover,
|
|
6825
|
+
.fd-button:disabled.fd-button--attention.fd-button--toggled:hover,
|
|
6826
|
+
.fd-button[aria-disabled=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
6827
|
+
.fd-button[aria-disabled=true].fd-button--attention.fd-button--toggled:hover {
|
|
6828
|
+
-webkit-box-shadow: none;
|
|
6829
|
+
box-shadow: none
|
|
6830
|
+
}
|
|
6262
6831
|
.fd-button.is-disabled.fd-button--emphasized,
|
|
6832
|
+
.fd-button:disabled.fd-button--emphasized,
|
|
6263
6833
|
.fd-button[aria-disabled=true].fd-button--emphasized {
|
|
6264
|
-
font-weight:
|
|
6834
|
+
font-weight: var(--sapButton_Emphasized_FontWeight);
|
|
6265
6835
|
border-width: var(--fdButton_Emphasized_Border_Width);
|
|
6266
6836
|
color: var(--sapButton_Emphasized_TextColor);
|
|
6267
6837
|
border-color: var(--sapButton_Emphasized_BorderColor);
|
|
6268
6838
|
background-color: var(--sapButton_Emphasized_Background)
|
|
6269
6839
|
}
|
|
6840
|
+
.fd-button.is-disabled.fd-button--emphasized.is-hover,
|
|
6841
|
+
.fd-button.is-disabled.fd-button--emphasized:hover,
|
|
6842
|
+
.fd-button:disabled.fd-button--emphasized.is-hover,
|
|
6843
|
+
.fd-button:disabled.fd-button--emphasized:hover,
|
|
6844
|
+
.fd-button[aria-disabled=true].fd-button--emphasized.is-hover,
|
|
6845
|
+
.fd-button[aria-disabled=true].fd-button--emphasized:hover {
|
|
6846
|
+
-webkit-box-shadow: none;
|
|
6847
|
+
box-shadow: none
|
|
6848
|
+
}
|
|
6270
6849
|
.fd-button.is-disabled.fd-button--emphasized.fd-button--toggled,
|
|
6850
|
+
.fd-button:disabled.fd-button--emphasized.fd-button--toggled,
|
|
6271
6851
|
.fd-button[aria-disabled=true].fd-button--emphasized.fd-button--toggled {
|
|
6272
6852
|
color: var(--sapButton_Selected_TextColor);
|
|
6273
6853
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
6274
6854
|
background-color: var(--sapButton_Selected_Background)
|
|
6275
6855
|
}
|
|
6856
|
+
.fd-button.is-disabled.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6857
|
+
.fd-button.is-disabled.fd-button--emphasized.fd-button--toggled:hover,
|
|
6858
|
+
.fd-button:disabled.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6859
|
+
.fd-button:disabled.fd-button--emphasized.fd-button--toggled:hover,
|
|
6860
|
+
.fd-button[aria-disabled=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
6861
|
+
.fd-button[aria-disabled=true].fd-button--emphasized.fd-button--toggled:hover {
|
|
6862
|
+
-webkit-box-shadow: none;
|
|
6863
|
+
box-shadow: none
|
|
6864
|
+
}
|
|
6276
6865
|
.fd-button.is-disabled.fd-button--transparent,
|
|
6866
|
+
.fd-button:disabled.fd-button--transparent,
|
|
6277
6867
|
.fd-button[aria-disabled=true].fd-button--transparent {
|
|
6868
|
+
color: var(--sapButton_Lite_TextColor);
|
|
6278
6869
|
border-color: var(--sapButton_Lite_BorderColor);
|
|
6279
6870
|
background-color: var(--sapButton_Lite_Background)
|
|
6280
6871
|
}
|
|
6872
|
+
.fd-button.is-disabled.fd-button--transparent.is-hover,
|
|
6873
|
+
.fd-button.is-disabled.fd-button--transparent:hover,
|
|
6874
|
+
.fd-button:disabled.fd-button--transparent.is-hover,
|
|
6875
|
+
.fd-button:disabled.fd-button--transparent:hover,
|
|
6876
|
+
.fd-button[aria-disabled=true].fd-button--transparent.is-hover,
|
|
6877
|
+
.fd-button[aria-disabled=true].fd-button--transparent:hover {
|
|
6878
|
+
-webkit-box-shadow: none;
|
|
6879
|
+
box-shadow: none
|
|
6880
|
+
}
|
|
6281
6881
|
.fd-button.is-disabled.fd-button--transparent.fd-button--toggled,
|
|
6882
|
+
.fd-button:disabled.fd-button--transparent.fd-button--toggled,
|
|
6282
6883
|
.fd-button[aria-disabled=true].fd-button--transparent.fd-button--toggled {
|
|
6283
6884
|
color: var(--sapButton_Selected_TextColor);
|
|
6284
6885
|
border-color: var(--sapButton_Selected_BorderColor);
|
|
6285
6886
|
background-color: var(--sapButton_Selected_Background)
|
|
6286
6887
|
}
|
|
6287
|
-
.fd-button
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6888
|
+
.fd-button.is-disabled.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6889
|
+
.fd-button.is-disabled.fd-button--transparent.fd-button--toggled:hover,
|
|
6890
|
+
.fd-button:disabled.fd-button--transparent.fd-button--toggled.is-hover,
|
|
6891
|
+
.fd-button:disabled.fd-button--transparent.fd-button--toggled:hover,
|
|
6892
|
+
.fd-button[aria-disabled=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
6893
|
+
.fd-button[aria-disabled=true].fd-button--transparent.fd-button--toggled:hover {
|
|
6291
6894
|
-webkit-box-shadow: none;
|
|
6292
|
-
box-shadow: none
|
|
6293
|
-
color: var(--sapButton_TextColor);
|
|
6294
|
-
border-color: var(--sapButton_BorderColor);
|
|
6295
|
-
background-color: var(--sapButton_Background)
|
|
6895
|
+
box-shadow: none
|
|
6296
6896
|
}
|
|
6297
|
-
.fd-button
|
|
6298
|
-
|
|
6299
|
-
|
|
6300
|
-
|
|
6897
|
+
.fd-button.is-disabled.is-selected,
|
|
6898
|
+
.fd-button.is-disabled[aria-selected=true],
|
|
6899
|
+
.fd-button:disabled.is-selected,
|
|
6900
|
+
.fd-button:disabled[aria-selected=true],
|
|
6901
|
+
.fd-button[aria-disabled=true].is-selected,
|
|
6902
|
+
.fd-button[aria-disabled=true][aria-selected=true] {
|
|
6903
|
+
color: var(--sapButton_Active_TextColor);
|
|
6904
|
+
border-color: var(--sapButton_Active_BorderColor);
|
|
6905
|
+
background-color: var(--sapButton_Active_Background);
|
|
6906
|
+
-webkit-box-shadow: none;
|
|
6907
|
+
box-shadow: none;
|
|
6908
|
+
outline: 0
|
|
6301
6909
|
}
|
|
6302
|
-
.fd-button
|
|
6303
|
-
|
|
6304
|
-
|
|
6305
|
-
|
|
6910
|
+
.fd-button.is-disabled.is-selected.is-hover,
|
|
6911
|
+
.fd-button.is-disabled.is-selected:hover,
|
|
6912
|
+
.fd-button.is-disabled[aria-selected=true].is-hover,
|
|
6913
|
+
.fd-button.is-disabled[aria-selected=true]:hover,
|
|
6914
|
+
.fd-button:disabled.is-selected.is-hover,
|
|
6915
|
+
.fd-button:disabled.is-selected:hover,
|
|
6916
|
+
.fd-button:disabled[aria-selected=true].is-hover,
|
|
6917
|
+
.fd-button:disabled[aria-selected=true]:hover,
|
|
6918
|
+
.fd-button[aria-disabled=true].is-selected.is-hover,
|
|
6919
|
+
.fd-button[aria-disabled=true].is-selected:hover,
|
|
6920
|
+
.fd-button[aria-disabled=true][aria-selected=true].is-hover,
|
|
6921
|
+
.fd-button[aria-disabled=true][aria-selected=true]:hover {
|
|
6922
|
+
-webkit-box-shadow: none;
|
|
6923
|
+
box-shadow: none
|
|
6306
6924
|
}
|
|
6307
|
-
.fd-button
|
|
6925
|
+
.fd-button.is-disabled.is-selected.fd-button--toggled,
|
|
6926
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--toggled,
|
|
6927
|
+
.fd-button:disabled.is-selected.fd-button--toggled,
|
|
6928
|
+
.fd-button:disabled[aria-selected=true].fd-button--toggled,
|
|
6929
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--toggled,
|
|
6930
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--toggled {
|
|
6308
6931
|
color: var(--sapButton_Selected_TextColor);
|
|
6309
|
-
border-color: var(--
|
|
6310
|
-
background-color: var(--
|
|
6932
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
6933
|
+
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6311
6934
|
}
|
|
6312
|
-
.fd-button
|
|
6313
|
-
|
|
6314
|
-
|
|
6315
|
-
|
|
6935
|
+
.fd-button.is-disabled.is-selected.fd-button--toggled.is-hover,
|
|
6936
|
+
.fd-button.is-disabled.is-selected.fd-button--toggled:hover,
|
|
6937
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--toggled.is-hover,
|
|
6938
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--toggled:hover,
|
|
6939
|
+
.fd-button:disabled.is-selected.fd-button--toggled.is-hover,
|
|
6940
|
+
.fd-button:disabled.is-selected.fd-button--toggled:hover,
|
|
6941
|
+
.fd-button:disabled[aria-selected=true].fd-button--toggled.is-hover,
|
|
6942
|
+
.fd-button:disabled[aria-selected=true].fd-button--toggled:hover,
|
|
6943
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--toggled.is-hover,
|
|
6944
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--toggled:hover,
|
|
6945
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--toggled.is-hover,
|
|
6946
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--toggled:hover {
|
|
6947
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
6948
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6949
|
+
}
|
|
6950
|
+
.fd-button.is-disabled.is-selected.fd-button--positive,
|
|
6951
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive,
|
|
6952
|
+
.fd-button:disabled.is-selected.fd-button--positive,
|
|
6953
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive,
|
|
6954
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive,
|
|
6955
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive {
|
|
6956
|
+
color: var(--sapButton_Accept_Active_TextColor);
|
|
6957
|
+
border-color: var(--sapButton_Accept_Active_BorderColor);
|
|
6958
|
+
background-color: var(--sapButton_Accept_Active_Background)
|
|
6959
|
+
}
|
|
6960
|
+
.fd-button.is-disabled.is-selected.fd-button--positive.is-hover,
|
|
6961
|
+
.fd-button.is-disabled.is-selected.fd-button--positive:hover,
|
|
6962
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive.is-hover,
|
|
6963
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive:hover,
|
|
6964
|
+
.fd-button:disabled.is-selected.fd-button--positive.is-hover,
|
|
6965
|
+
.fd-button:disabled.is-selected.fd-button--positive:hover,
|
|
6966
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive.is-hover,
|
|
6967
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive:hover,
|
|
6968
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive.is-hover,
|
|
6969
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive:hover,
|
|
6970
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive.is-hover,
|
|
6971
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive:hover {
|
|
6972
|
+
-webkit-box-shadow: none;
|
|
6973
|
+
box-shadow: none
|
|
6316
6974
|
}
|
|
6317
|
-
.fd-button
|
|
6975
|
+
.fd-button.is-disabled.is-selected.fd-button--positive.fd-button--toggled,
|
|
6976
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive.fd-button--toggled,
|
|
6977
|
+
.fd-button:disabled.is-selected.fd-button--positive.fd-button--toggled,
|
|
6978
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive.fd-button--toggled,
|
|
6979
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive.fd-button--toggled,
|
|
6980
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive.fd-button--toggled {
|
|
6318
6981
|
color: var(--sapButton_Accept_Selected_TextColor);
|
|
6319
|
-
border-color: var(--
|
|
6320
|
-
background-color: var(--
|
|
6982
|
+
border-color: var(--sapButton_Accept_Selected_Hover_BorderColor);
|
|
6983
|
+
background-color: var(--sapButton_Accept_Selected_Hover_Background)
|
|
6321
6984
|
}
|
|
6322
|
-
.fd-button
|
|
6323
|
-
|
|
6324
|
-
|
|
6325
|
-
|
|
6985
|
+
.fd-button.is-disabled.is-selected.fd-button--positive.fd-button--toggled.is-hover,
|
|
6986
|
+
.fd-button.is-disabled.is-selected.fd-button--positive.fd-button--toggled:hover,
|
|
6987
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6988
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--positive.fd-button--toggled:hover,
|
|
6989
|
+
.fd-button:disabled.is-selected.fd-button--positive.fd-button--toggled.is-hover,
|
|
6990
|
+
.fd-button:disabled.is-selected.fd-button--positive.fd-button--toggled:hover,
|
|
6991
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6992
|
+
.fd-button:disabled[aria-selected=true].fd-button--positive.fd-button--toggled:hover,
|
|
6993
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive.fd-button--toggled.is-hover,
|
|
6994
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--positive.fd-button--toggled:hover,
|
|
6995
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive.fd-button--toggled.is-hover,
|
|
6996
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--positive.fd-button--toggled:hover {
|
|
6997
|
+
-webkit-box-shadow: var(--fdButton_Positive_Hover_Shadow);
|
|
6998
|
+
box-shadow: var(--fdButton_Positive_Hover_Shadow)
|
|
6999
|
+
}
|
|
7000
|
+
.fd-button.is-disabled.is-selected.fd-button--negative,
|
|
7001
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative,
|
|
7002
|
+
.fd-button:disabled.is-selected.fd-button--negative,
|
|
7003
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative,
|
|
7004
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative,
|
|
7005
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative {
|
|
7006
|
+
color: var(--sapButton_Reject_Active_TextColor);
|
|
7007
|
+
border-color: var(--sapButton_Reject_Active_BorderColor);
|
|
7008
|
+
background-color: var(--sapButton_Reject_Active_Background)
|
|
7009
|
+
}
|
|
7010
|
+
.fd-button.is-disabled.is-selected.fd-button--negative.is-hover,
|
|
7011
|
+
.fd-button.is-disabled.is-selected.fd-button--negative:hover,
|
|
7012
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative.is-hover,
|
|
7013
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative:hover,
|
|
7014
|
+
.fd-button:disabled.is-selected.fd-button--negative.is-hover,
|
|
7015
|
+
.fd-button:disabled.is-selected.fd-button--negative:hover,
|
|
7016
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative.is-hover,
|
|
7017
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative:hover,
|
|
7018
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative.is-hover,
|
|
7019
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative:hover,
|
|
7020
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative.is-hover,
|
|
7021
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative:hover {
|
|
7022
|
+
-webkit-box-shadow: none;
|
|
7023
|
+
box-shadow: none
|
|
6326
7024
|
}
|
|
6327
|
-
.fd-button
|
|
7025
|
+
.fd-button.is-disabled.is-selected.fd-button--negative.fd-button--toggled,
|
|
7026
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative.fd-button--toggled,
|
|
7027
|
+
.fd-button:disabled.is-selected.fd-button--negative.fd-button--toggled,
|
|
7028
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative.fd-button--toggled,
|
|
7029
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative.fd-button--toggled,
|
|
7030
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative.fd-button--toggled {
|
|
6328
7031
|
color: var(--sapButton_Reject_Selected_TextColor);
|
|
6329
|
-
border-color: var(--
|
|
6330
|
-
background-color: var(--
|
|
7032
|
+
border-color: var(--sapButton_Reject_Selected_Hover_BorderColor);
|
|
7033
|
+
background-color: var(--sapButton_Reject_Selected_Hover_Background)
|
|
6331
7034
|
}
|
|
6332
|
-
.fd-button
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
7035
|
+
.fd-button.is-disabled.is-selected.fd-button--negative.fd-button--toggled.is-hover,
|
|
7036
|
+
.fd-button.is-disabled.is-selected.fd-button--negative.fd-button--toggled:hover,
|
|
7037
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
7038
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--negative.fd-button--toggled:hover,
|
|
7039
|
+
.fd-button:disabled.is-selected.fd-button--negative.fd-button--toggled.is-hover,
|
|
7040
|
+
.fd-button:disabled.is-selected.fd-button--negative.fd-button--toggled:hover,
|
|
7041
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
7042
|
+
.fd-button:disabled[aria-selected=true].fd-button--negative.fd-button--toggled:hover,
|
|
7043
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative.fd-button--toggled.is-hover,
|
|
7044
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--negative.fd-button--toggled:hover,
|
|
7045
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative.fd-button--toggled.is-hover,
|
|
7046
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--negative.fd-button--toggled:hover {
|
|
7047
|
+
-webkit-box-shadow: var(--fdButton_Negative_Hover_Shadow);
|
|
7048
|
+
box-shadow: var(--fdButton_Negative_Hover_Shadow)
|
|
7049
|
+
}
|
|
7050
|
+
.fd-button.is-disabled.is-selected.fd-button--attention,
|
|
7051
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention,
|
|
7052
|
+
.fd-button:disabled.is-selected.fd-button--attention,
|
|
7053
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention,
|
|
7054
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention,
|
|
7055
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention {
|
|
7056
|
+
color: var(--sapButton_Attention_Active_TextColor);
|
|
7057
|
+
border-color: var(--sapButton_Attention_Active_BorderColor);
|
|
7058
|
+
background-color: var(--sapButton_Attention_Active_Background)
|
|
6336
7059
|
}
|
|
6337
|
-
.fd-button
|
|
7060
|
+
.fd-button.is-disabled.is-selected.fd-button--attention.is-hover,
|
|
7061
|
+
.fd-button.is-disabled.is-selected.fd-button--attention:hover,
|
|
7062
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention.is-hover,
|
|
7063
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention:hover,
|
|
7064
|
+
.fd-button:disabled.is-selected.fd-button--attention.is-hover,
|
|
7065
|
+
.fd-button:disabled.is-selected.fd-button--attention:hover,
|
|
7066
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention.is-hover,
|
|
7067
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention:hover,
|
|
7068
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention.is-hover,
|
|
7069
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention:hover,
|
|
7070
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention.is-hover,
|
|
7071
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention:hover {
|
|
7072
|
+
-webkit-box-shadow: none;
|
|
7073
|
+
box-shadow: none
|
|
7074
|
+
}
|
|
7075
|
+
.fd-button.is-disabled.is-selected.fd-button--attention.fd-button--toggled,
|
|
7076
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention.fd-button--toggled,
|
|
7077
|
+
.fd-button:disabled.is-selected.fd-button--attention.fd-button--toggled,
|
|
7078
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention.fd-button--toggled,
|
|
7079
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention.fd-button--toggled,
|
|
7080
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention.fd-button--toggled {
|
|
6338
7081
|
color: var(--sapButton_Attention_Selected_TextColor);
|
|
6339
|
-
border-color: var(--
|
|
6340
|
-
background-color: var(--
|
|
7082
|
+
border-color: var(--sapButton_Attention_Selected_Hover_BorderColor);
|
|
7083
|
+
background-color: var(--sapButton_Attention_Selected_Hover_Background)
|
|
6341
7084
|
}
|
|
6342
|
-
.fd-button
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
7085
|
+
.fd-button.is-disabled.is-selected.fd-button--attention.fd-button--toggled.is-hover,
|
|
7086
|
+
.fd-button.is-disabled.is-selected.fd-button--attention.fd-button--toggled:hover,
|
|
7087
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
7088
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--attention.fd-button--toggled:hover,
|
|
7089
|
+
.fd-button:disabled.is-selected.fd-button--attention.fd-button--toggled.is-hover,
|
|
7090
|
+
.fd-button:disabled.is-selected.fd-button--attention.fd-button--toggled:hover,
|
|
7091
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
7092
|
+
.fd-button:disabled[aria-selected=true].fd-button--attention.fd-button--toggled:hover,
|
|
7093
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention.fd-button--toggled.is-hover,
|
|
7094
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--attention.fd-button--toggled:hover,
|
|
7095
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention.fd-button--toggled.is-hover,
|
|
7096
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--attention.fd-button--toggled:hover {
|
|
7097
|
+
-webkit-box-shadow: var(--fdButton_Attention_Hover_Shadow);
|
|
7098
|
+
box-shadow: var(--fdButton_Attention_Hover_Shadow)
|
|
7099
|
+
}
|
|
7100
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized,
|
|
7101
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized,
|
|
7102
|
+
.fd-button:disabled.is-selected.fd-button--emphasized,
|
|
7103
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized,
|
|
7104
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized,
|
|
7105
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized {
|
|
7106
|
+
color: var(--sapButton_Emphasized_Active_TextColor);
|
|
7107
|
+
border-color: var(--sapButton_Emphasized_Active_BorderColor);
|
|
7108
|
+
background-color: var(--sapButton_Emphasized_Active_Background)
|
|
7109
|
+
}
|
|
7110
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized.is-hover,
|
|
7111
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized:hover,
|
|
7112
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized.is-hover,
|
|
7113
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized:hover,
|
|
7114
|
+
.fd-button:disabled.is-selected.fd-button--emphasized.is-hover,
|
|
7115
|
+
.fd-button:disabled.is-selected.fd-button--emphasized:hover,
|
|
7116
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized.is-hover,
|
|
7117
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized:hover,
|
|
7118
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized.is-hover,
|
|
7119
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized:hover,
|
|
7120
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized.is-hover,
|
|
7121
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized:hover {
|
|
7122
|
+
-webkit-box-shadow: none;
|
|
7123
|
+
box-shadow: none
|
|
6348
7124
|
}
|
|
6349
|
-
.fd-button
|
|
7125
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized.fd-button--toggled,
|
|
7126
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled,
|
|
7127
|
+
.fd-button:disabled.is-selected.fd-button--emphasized.fd-button--toggled,
|
|
7128
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled,
|
|
7129
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized.fd-button--toggled,
|
|
7130
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized.fd-button--toggled {
|
|
6350
7131
|
color: var(--sapButton_Selected_TextColor);
|
|
6351
|
-
border-color: var(--
|
|
6352
|
-
background-color: var(--
|
|
7132
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
7133
|
+
background-color: var(--sapButton_Selected_Hover_Background)
|
|
6353
7134
|
}
|
|
6354
|
-
.fd-button
|
|
6355
|
-
|
|
6356
|
-
|
|
7135
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7136
|
+
.fd-button.is-disabled.is-selected.fd-button--emphasized.fd-button--toggled:hover,
|
|
7137
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7138
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled:hover,
|
|
7139
|
+
.fd-button:disabled.is-selected.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7140
|
+
.fd-button:disabled.is-selected.fd-button--emphasized.fd-button--toggled:hover,
|
|
7141
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7142
|
+
.fd-button:disabled[aria-selected=true].fd-button--emphasized.fd-button--toggled:hover,
|
|
7143
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7144
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--emphasized.fd-button--toggled:hover,
|
|
7145
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized.fd-button--toggled.is-hover,
|
|
7146
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--emphasized.fd-button--toggled:hover {
|
|
7147
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
7148
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
7149
|
+
}
|
|
7150
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent,
|
|
7151
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent,
|
|
7152
|
+
.fd-button:disabled.is-selected.fd-button--transparent,
|
|
7153
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent,
|
|
7154
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent,
|
|
7155
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent {
|
|
7156
|
+
color: var(--sapButton_Active_TextColor);
|
|
7157
|
+
border-color: var(--sapButton_Lite_Active_BorderColor);
|
|
7158
|
+
background-color: var(--sapButton_Lite_Active_Background)
|
|
7159
|
+
}
|
|
7160
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent.is-hover,
|
|
7161
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent:hover,
|
|
7162
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent.is-hover,
|
|
7163
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent:hover,
|
|
7164
|
+
.fd-button:disabled.is-selected.fd-button--transparent.is-hover,
|
|
7165
|
+
.fd-button:disabled.is-selected.fd-button--transparent:hover,
|
|
7166
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent.is-hover,
|
|
7167
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent:hover,
|
|
7168
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent.is-hover,
|
|
7169
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent:hover,
|
|
7170
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent.is-hover,
|
|
7171
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent:hover {
|
|
7172
|
+
-webkit-box-shadow: none;
|
|
7173
|
+
box-shadow: none
|
|
6357
7174
|
}
|
|
6358
|
-
.fd-button
|
|
7175
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent.fd-button--toggled,
|
|
7176
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent.fd-button--toggled,
|
|
7177
|
+
.fd-button:disabled.is-selected.fd-button--transparent.fd-button--toggled,
|
|
7178
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent.fd-button--toggled,
|
|
7179
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent.fd-button--toggled,
|
|
7180
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent.fd-button--toggled {
|
|
6359
7181
|
color: var(--sapButton_Selected_TextColor);
|
|
6360
|
-
border-color: var(--
|
|
6361
|
-
background-color: var(--
|
|
7182
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
7183
|
+
background-color: var(--sapButton_Selected_Hover_Background)
|
|
7184
|
+
}
|
|
7185
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent.fd-button--toggled.is-hover,
|
|
7186
|
+
.fd-button.is-disabled.is-selected.fd-button--transparent.fd-button--toggled:hover,
|
|
7187
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
7188
|
+
.fd-button.is-disabled[aria-selected=true].fd-button--transparent.fd-button--toggled:hover,
|
|
7189
|
+
.fd-button:disabled.is-selected.fd-button--transparent.fd-button--toggled.is-hover,
|
|
7190
|
+
.fd-button:disabled.is-selected.fd-button--transparent.fd-button--toggled:hover,
|
|
7191
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
7192
|
+
.fd-button:disabled[aria-selected=true].fd-button--transparent.fd-button--toggled:hover,
|
|
7193
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent.fd-button--toggled.is-hover,
|
|
7194
|
+
.fd-button[aria-disabled=true].is-selected.fd-button--transparent.fd-button--toggled:hover,
|
|
7195
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent.fd-button--toggled.is-hover,
|
|
7196
|
+
.fd-button[aria-disabled=true][aria-selected=true].fd-button--transparent.fd-button--toggled:hover {
|
|
7197
|
+
-webkit-box-shadow: var(--fdButton_Hover_Shadow);
|
|
7198
|
+
box-shadow: var(--fdButton_Hover_Shadow)
|
|
6362
7199
|
}
|
|
6363
7200
|
/*!
|
|
6364
|
-
.fd-button-split
|
|
6365
|
-
|
|
7201
|
+
.fd-button-split
|
|
7202
|
+
button
|
|
6366
7203
|
*/
|
|
6367
7204
|
.fd-button-split {
|
|
6368
7205
|
font-size: var(--sapFontSize);
|
|
@@ -6375,6 +7212,7 @@
|
|
|
6375
7212
|
padding: 0;
|
|
6376
7213
|
margin: 0;
|
|
6377
7214
|
border: 0;
|
|
7215
|
+
position: relative;
|
|
6378
7216
|
display: -webkit-inline-box;
|
|
6379
7217
|
display: -ms-inline-flexbox;
|
|
6380
7218
|
display: inline-flex;
|
|
@@ -6387,47 +7225,56 @@
|
|
|
6387
7225
|
box-sizing: inherit;
|
|
6388
7226
|
font-size: inherit
|
|
6389
7227
|
}
|
|
6390
|
-
.fd-button-split
|
|
6391
|
-
|
|
6392
|
-
|
|
6393
|
-
|
|
7228
|
+
.fd-button-split::before {
|
|
7229
|
+
content: "";
|
|
7230
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7231
|
+
left: 0;
|
|
7232
|
+
top: 0;
|
|
7233
|
+
width: 100%;
|
|
7234
|
+
height: 100%;
|
|
7235
|
+
position: absolute;
|
|
7236
|
+
background: var(--sapButton_Background);
|
|
7237
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
6394
7238
|
}
|
|
6395
|
-
.fd-button-split >
|
|
6396
|
-
margin: 0
|
|
6397
|
-
border-top-left-radius: 0;
|
|
6398
|
-
border-bottom-left-radius: 0
|
|
7239
|
+
.fd-button-split > button {
|
|
7240
|
+
margin: 0
|
|
6399
7241
|
}
|
|
6400
|
-
.fd-button-split > :nth-
|
|
6401
|
-
border-left-width:
|
|
7242
|
+
.fd-button-split > button:nth-of-type(2) {
|
|
7243
|
+
border-left-width: var(--fdButton_Menu_Border_Width)
|
|
6402
7244
|
}
|
|
6403
|
-
.fd-button-split[dir=rtl]
|
|
6404
|
-
[dir=rtl] .fd-button-split > :
|
|
6405
|
-
border-
|
|
6406
|
-
border-
|
|
6407
|
-
border-top-right-radius: var(--sapButton_BorderCornerRadius);
|
|
6408
|
-
border-bottom-right-radius: var(--sapButton_BorderCornerRadius)
|
|
7245
|
+
.fd-button-split > button:nth-of-type(2)[dir=rtl],
|
|
7246
|
+
[dir=rtl] .fd-button-split > button:nth-of-type(2) {
|
|
7247
|
+
border-left-width: var(--sapButton_BorderWidth);
|
|
7248
|
+
border-right-width: var(--fdButton_Menu_Border_Width)
|
|
6409
7249
|
}
|
|
6410
|
-
.fd-button-split
|
|
6411
|
-
|
|
6412
|
-
border-top-left-radius: var(--sapButton_BorderCornerRadius);
|
|
6413
|
-
border-bottom-left-radius: var(--sapButton_BorderCornerRadius);
|
|
6414
|
-
border-top-right-radius: 0;
|
|
6415
|
-
border-bottom-right-radius: 0;
|
|
6416
|
-
border-left-width: var(--sapButton_BorderWidth)
|
|
7250
|
+
.fd-button-split > button:first-of-type:hover + button::after {
|
|
7251
|
+
display: none
|
|
6417
7252
|
}
|
|
6418
|
-
.fd-button-split
|
|
6419
|
-
|
|
6420
|
-
border-right-width: 0
|
|
7253
|
+
.fd-button-split > button:nth-of-type(2) {
|
|
7254
|
+
position: relative
|
|
6421
7255
|
}
|
|
6422
|
-
.fd-button-split >
|
|
6423
|
-
|
|
7256
|
+
.fd-button-split > button:nth-of-type(2)::after {
|
|
7257
|
+
content: "";
|
|
7258
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7259
|
+
position: absolute;
|
|
7260
|
+
top: 50%;
|
|
7261
|
+
left: -.0625rem;
|
|
7262
|
+
width: var(--sapButton_BorderWidth);
|
|
7263
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7264
|
+
background: var(--sapButton_TextColor);
|
|
7265
|
+
-webkit-transform: translate(0,-50%);
|
|
7266
|
+
transform: translate(0,-50%)
|
|
7267
|
+
}
|
|
7268
|
+
.fd-button-split > button:nth-of-type(2)[dir=rtl]::after,
|
|
7269
|
+
[dir=rtl] .fd-button-split > button:nth-of-type(2)::after {
|
|
7270
|
+
left: auto;
|
|
7271
|
+
right: -.0625rem
|
|
6424
7272
|
}
|
|
6425
|
-
.fd-button-split >
|
|
6426
|
-
|
|
6427
|
-
|
|
6428
|
-
margin-left: .0625rem
|
|
7273
|
+
.fd-button-split > button:nth-of-type(2).is-hover::after,
|
|
7274
|
+
.fd-button-split > button:nth-of-type(2):hover::after {
|
|
7275
|
+
display: none
|
|
6429
7276
|
}
|
|
6430
|
-
.fd-button-split > :first-
|
|
7277
|
+
.fd-button-split > button:first-of-type {
|
|
6431
7278
|
display: -webkit-box;
|
|
6432
7279
|
display: -ms-flexbox;
|
|
6433
7280
|
display: flex;
|
|
@@ -6436,35 +7283,289 @@
|
|
|
6436
7283
|
align-items: center;
|
|
6437
7284
|
-webkit-box-pack: start;
|
|
6438
7285
|
-ms-flex-pack: start;
|
|
6439
|
-
justify-content: flex-start
|
|
7286
|
+
justify-content: flex-start;
|
|
7287
|
+
border-radius: var(--fdButton_Border_Radius_Left)
|
|
6440
7288
|
}
|
|
6441
|
-
.fd-button-split > :first-
|
|
6442
|
-
|
|
7289
|
+
.fd-button-split > button:first-of-type[dir=rtl],
|
|
7290
|
+
[dir=rtl] .fd-button-split > button:first-of-type {
|
|
7291
|
+
border-radius: var(--fdButton_Border_Radius_Left_RTL)
|
|
6443
7292
|
}
|
|
6444
|
-
.fd-button-split > :
|
|
6445
|
-
|
|
7293
|
+
.fd-button-split > button:nth-of-type(2) {
|
|
7294
|
+
border-radius: var(--fdButton_Border_Radius_Right)
|
|
6446
7295
|
}
|
|
6447
|
-
.fd-button-split > :
|
|
6448
|
-
|
|
7296
|
+
.fd-button-split > button:nth-of-type(2)[dir=rtl],
|
|
7297
|
+
[dir=rtl] .fd-button-split > button:nth-of-type(2) {
|
|
7298
|
+
border-radius: var(--fdButton_Border_Radius_Right_RTL)
|
|
6449
7299
|
}
|
|
6450
|
-
.fd-button-split
|
|
6451
|
-
|
|
6452
|
-
|
|
7300
|
+
.fd-button-split > button.is-hover,
|
|
7301
|
+
.fd-button-split > button:hover {
|
|
7302
|
+
z-index: 2
|
|
6453
7303
|
}
|
|
6454
|
-
.fd-button-split--emphasized
|
|
6455
|
-
|
|
7304
|
+
.fd-button-split--emphasized {
|
|
7305
|
+
position: relative
|
|
6456
7306
|
}
|
|
6457
|
-
.fd-button-split--emphasized
|
|
6458
|
-
|
|
7307
|
+
.fd-button-split--emphasized::before {
|
|
7308
|
+
content: "";
|
|
7309
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7310
|
+
left: 0;
|
|
7311
|
+
top: 0;
|
|
7312
|
+
width: 100%;
|
|
7313
|
+
height: 100%;
|
|
7314
|
+
position: absolute;
|
|
7315
|
+
background: var(--sapButton_Emphasized_Background);
|
|
7316
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
6459
7317
|
}
|
|
6460
|
-
.fd-button-split--
|
|
6461
|
-
|
|
7318
|
+
.fd-button-split--emphasized > button:first-of-type:hover + button::after {
|
|
7319
|
+
display: none
|
|
6462
7320
|
}
|
|
6463
|
-
.fd-button-split--
|
|
6464
|
-
|
|
7321
|
+
.fd-button-split--emphasized > button:nth-of-type(2) {
|
|
7322
|
+
position: relative
|
|
6465
7323
|
}
|
|
6466
|
-
.fd-button-split--
|
|
6467
|
-
|
|
7324
|
+
.fd-button-split--emphasized > button:nth-of-type(2)::after {
|
|
7325
|
+
content: "";
|
|
7326
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7327
|
+
position: absolute;
|
|
7328
|
+
top: 50%;
|
|
7329
|
+
left: -.0625rem;
|
|
7330
|
+
width: var(--sapButton_BorderWidth);
|
|
7331
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7332
|
+
background: var(--sapButton_Emphasized_TextColor);
|
|
7333
|
+
-webkit-transform: translate(0,-50%);
|
|
7334
|
+
transform: translate(0,-50%)
|
|
7335
|
+
}
|
|
7336
|
+
.fd-button-split--emphasized > button:nth-of-type(2)[dir=rtl]::after,
|
|
7337
|
+
[dir=rtl] .fd-button-split--emphasized > button:nth-of-type(2)::after {
|
|
7338
|
+
left: auto;
|
|
7339
|
+
right: -.0625rem
|
|
7340
|
+
}
|
|
7341
|
+
.fd-button-split--emphasized > button:nth-of-type(2).is-hover::after,
|
|
7342
|
+
.fd-button-split--emphasized > button:nth-of-type(2):hover::after {
|
|
7343
|
+
display: none
|
|
7344
|
+
}
|
|
7345
|
+
.fd-button-split--transparent {
|
|
7346
|
+
position: relative
|
|
7347
|
+
}
|
|
7348
|
+
.fd-button-split--transparent::before {
|
|
7349
|
+
content: "";
|
|
7350
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7351
|
+
left: 0;
|
|
7352
|
+
top: 0;
|
|
7353
|
+
width: 100%;
|
|
7354
|
+
height: 100%;
|
|
7355
|
+
position: absolute;
|
|
7356
|
+
background: var(--sapButton_Lite_Background);
|
|
7357
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
7358
|
+
}
|
|
7359
|
+
.fd-button-split--transparent > button:first-of-type:hover + button::after {
|
|
7360
|
+
display: none
|
|
7361
|
+
}
|
|
7362
|
+
.fd-button-split--transparent > button:nth-of-type(2) {
|
|
7363
|
+
position: relative
|
|
7364
|
+
}
|
|
7365
|
+
.fd-button-split--transparent > button:nth-of-type(2)::after {
|
|
7366
|
+
content: "";
|
|
7367
|
+
display: var(--fdButton_Menu_Transparent_Separator_Display);
|
|
7368
|
+
position: absolute;
|
|
7369
|
+
top: 50%;
|
|
7370
|
+
left: -.0625rem;
|
|
7371
|
+
width: var(--sapButton_BorderWidth);
|
|
7372
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7373
|
+
background: var(--sapButton_Lite_TextColor);
|
|
7374
|
+
-webkit-transform: translate(0,-50%);
|
|
7375
|
+
transform: translate(0,-50%)
|
|
7376
|
+
}
|
|
7377
|
+
.fd-button-split--transparent > button:nth-of-type(2)[dir=rtl]::after,
|
|
7378
|
+
[dir=rtl] .fd-button-split--transparent > button:nth-of-type(2)::after {
|
|
7379
|
+
left: auto;
|
|
7380
|
+
right: -.0625rem
|
|
7381
|
+
}
|
|
7382
|
+
.fd-button-split--transparent > button:nth-of-type(2).is-hover::after,
|
|
7383
|
+
.fd-button-split--transparent > button:nth-of-type(2):hover::after {
|
|
7384
|
+
display: none
|
|
7385
|
+
}
|
|
7386
|
+
.fd-button-split--ghost {
|
|
7387
|
+
position: relative
|
|
7388
|
+
}
|
|
7389
|
+
.fd-button-split--ghost::before {
|
|
7390
|
+
content: "";
|
|
7391
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7392
|
+
left: 0;
|
|
7393
|
+
top: 0;
|
|
7394
|
+
width: 100%;
|
|
7395
|
+
height: 100%;
|
|
7396
|
+
position: absolute;
|
|
7397
|
+
background: var(--fdButton_Ghost_Background);
|
|
7398
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
7399
|
+
}
|
|
7400
|
+
.fd-button-split--ghost > button:first-of-type:hover + button::after {
|
|
7401
|
+
display: none
|
|
7402
|
+
}
|
|
7403
|
+
.fd-button-split--ghost > button:nth-of-type(2) {
|
|
7404
|
+
position: relative
|
|
7405
|
+
}
|
|
7406
|
+
.fd-button-split--ghost > button:nth-of-type(2)::after {
|
|
7407
|
+
content: "";
|
|
7408
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7409
|
+
position: absolute;
|
|
7410
|
+
top: 50%;
|
|
7411
|
+
left: -.0625rem;
|
|
7412
|
+
width: var(--sapButton_BorderWidth);
|
|
7413
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7414
|
+
background: var(--sapButton_TextColor);
|
|
7415
|
+
-webkit-transform: translate(0,-50%);
|
|
7416
|
+
transform: translate(0,-50%)
|
|
7417
|
+
}
|
|
7418
|
+
.fd-button-split--ghost > button:nth-of-type(2)[dir=rtl]::after,
|
|
7419
|
+
[dir=rtl] .fd-button-split--ghost > button:nth-of-type(2)::after {
|
|
7420
|
+
left: auto;
|
|
7421
|
+
right: -.0625rem
|
|
7422
|
+
}
|
|
7423
|
+
.fd-button-split--ghost > button:nth-of-type(2).is-hover::after,
|
|
7424
|
+
.fd-button-split--ghost > button:nth-of-type(2):hover::after {
|
|
7425
|
+
display: none
|
|
7426
|
+
}
|
|
7427
|
+
.fd-button-split--positive {
|
|
7428
|
+
position: relative
|
|
7429
|
+
}
|
|
7430
|
+
.fd-button-split--positive::before {
|
|
7431
|
+
content: "";
|
|
7432
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7433
|
+
left: 0;
|
|
7434
|
+
top: 0;
|
|
7435
|
+
width: 100%;
|
|
7436
|
+
height: 100%;
|
|
7437
|
+
position: absolute;
|
|
7438
|
+
background: var(--sapButton_Accept_Background);
|
|
7439
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
7440
|
+
}
|
|
7441
|
+
.fd-button-split--positive > button:first-of-type:hover + button::after {
|
|
7442
|
+
display: none
|
|
7443
|
+
}
|
|
7444
|
+
.fd-button-split--positive > button:nth-of-type(2) {
|
|
7445
|
+
position: relative
|
|
7446
|
+
}
|
|
7447
|
+
.fd-button-split--positive > button:nth-of-type(2)::after {
|
|
7448
|
+
content: "";
|
|
7449
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7450
|
+
position: absolute;
|
|
7451
|
+
top: 50%;
|
|
7452
|
+
left: -.0625rem;
|
|
7453
|
+
width: var(--sapButton_BorderWidth);
|
|
7454
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7455
|
+
background: var(--sapButton_Accept_TextColor);
|
|
7456
|
+
-webkit-transform: translate(0,-50%);
|
|
7457
|
+
transform: translate(0,-50%)
|
|
7458
|
+
}
|
|
7459
|
+
.fd-button-split--positive > button:nth-of-type(2)[dir=rtl]::after,
|
|
7460
|
+
[dir=rtl] .fd-button-split--positive > button:nth-of-type(2)::after {
|
|
7461
|
+
left: auto;
|
|
7462
|
+
right: -.0625rem
|
|
7463
|
+
}
|
|
7464
|
+
.fd-button-split--positive > button:nth-of-type(2).is-hover::after,
|
|
7465
|
+
.fd-button-split--positive > button:nth-of-type(2):hover::after {
|
|
7466
|
+
display: none
|
|
7467
|
+
}
|
|
7468
|
+
.fd-button-split--negative {
|
|
7469
|
+
position: relative
|
|
7470
|
+
}
|
|
7471
|
+
.fd-button-split--negative::before {
|
|
7472
|
+
content: "";
|
|
7473
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7474
|
+
left: 0;
|
|
7475
|
+
top: 0;
|
|
7476
|
+
width: 100%;
|
|
7477
|
+
height: 100%;
|
|
7478
|
+
position: absolute;
|
|
7479
|
+
background: var(--sapButton_Reject_Background);
|
|
7480
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
7481
|
+
}
|
|
7482
|
+
.fd-button-split--negative > button:first-of-type:hover + button::after {
|
|
7483
|
+
display: none
|
|
7484
|
+
}
|
|
7485
|
+
.fd-button-split--negative > button:nth-of-type(2) {
|
|
7486
|
+
position: relative
|
|
7487
|
+
}
|
|
7488
|
+
.fd-button-split--negative > button:nth-of-type(2)::after {
|
|
7489
|
+
content: "";
|
|
7490
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7491
|
+
position: absolute;
|
|
7492
|
+
top: 50%;
|
|
7493
|
+
left: -.0625rem;
|
|
7494
|
+
width: var(--sapButton_BorderWidth);
|
|
7495
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7496
|
+
background: var(--sapButton_Reject_TextColor);
|
|
7497
|
+
-webkit-transform: translate(0,-50%);
|
|
7498
|
+
transform: translate(0,-50%)
|
|
7499
|
+
}
|
|
7500
|
+
.fd-button-split--negative > button:nth-of-type(2)[dir=rtl]::after,
|
|
7501
|
+
[dir=rtl] .fd-button-split--negative > button:nth-of-type(2)::after {
|
|
7502
|
+
left: auto;
|
|
7503
|
+
right: -.0625rem
|
|
7504
|
+
}
|
|
7505
|
+
.fd-button-split--negative > button:nth-of-type(2).is-hover::after,
|
|
7506
|
+
.fd-button-split--negative > button:nth-of-type(2):hover::after {
|
|
7507
|
+
display: none
|
|
7508
|
+
}
|
|
7509
|
+
.fd-button-split--attention {
|
|
7510
|
+
position: relative
|
|
7511
|
+
}
|
|
7512
|
+
.fd-button-split--attention::before {
|
|
7513
|
+
content: "";
|
|
7514
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
7515
|
+
left: 0;
|
|
7516
|
+
top: 0;
|
|
7517
|
+
width: 100%;
|
|
7518
|
+
height: 100%;
|
|
7519
|
+
position: absolute;
|
|
7520
|
+
background: var(--sapButton_Attention_Background);
|
|
7521
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
7522
|
+
}
|
|
7523
|
+
.fd-button-split--attention > button:first-of-type:hover + button::after {
|
|
7524
|
+
display: none
|
|
7525
|
+
}
|
|
7526
|
+
.fd-button-split--attention > button:nth-of-type(2) {
|
|
7527
|
+
position: relative
|
|
7528
|
+
}
|
|
7529
|
+
.fd-button-split--attention > button:nth-of-type(2)::after {
|
|
7530
|
+
content: "";
|
|
7531
|
+
display: var(--fdButton_Menu_Separator_Display);
|
|
7532
|
+
position: absolute;
|
|
7533
|
+
top: 50%;
|
|
7534
|
+
left: -.0625rem;
|
|
7535
|
+
width: var(--sapButton_BorderWidth);
|
|
7536
|
+
height: var(--fdButton_Menu_Transparent_Separator_Height);
|
|
7537
|
+
background: var(--sapButton_Attention_TextColor);
|
|
7538
|
+
-webkit-transform: translate(0,-50%);
|
|
7539
|
+
transform: translate(0,-50%)
|
|
7540
|
+
}
|
|
7541
|
+
.fd-button-split--attention > button:nth-of-type(2)[dir=rtl]::after,
|
|
7542
|
+
[dir=rtl] .fd-button-split--attention > button:nth-of-type(2)::after {
|
|
7543
|
+
left: auto;
|
|
7544
|
+
right: -.0625rem
|
|
7545
|
+
}
|
|
7546
|
+
.fd-button-split--attention > button:nth-of-type(2).is-hover::after,
|
|
7547
|
+
.fd-button-split--attention > button:nth-of-type(2):hover::after {
|
|
7548
|
+
display: none
|
|
7549
|
+
}
|
|
7550
|
+
.fd-button-split--emphasized > button:first-of-type {
|
|
7551
|
+
margin-right: var(--fdButton_Menu_Emphasized_Margin)
|
|
7552
|
+
}
|
|
7553
|
+
.fd-button-split--emphasized > button:first-of-type[dir=rtl],
|
|
7554
|
+
[dir=rtl] .fd-button-split--emphasized > button:first-of-type {
|
|
7555
|
+
margin-right: 0;
|
|
7556
|
+
margin-left: var(--fdButton_Menu_Emphasized_Margin)
|
|
7557
|
+
}
|
|
7558
|
+
.fd-button-split--emphasized > button:nth-of-type(2)[dir=rtl],
|
|
7559
|
+
[dir=rtl] .fd-button-split--emphasized > button:nth-of-type(2) {
|
|
7560
|
+
border-left-width: var(--fdButton_Emphasized_Border_Width)
|
|
7561
|
+
}
|
|
7562
|
+
.fd-button-split--transparent > button:nth-of-type(2) {
|
|
7563
|
+
border-left-width: var(--fdButton_Menu_Transparent_Border_Width)
|
|
7564
|
+
}
|
|
7565
|
+
.fd-button-split--transparent > button:nth-of-type(2)[dir=rtl],
|
|
7566
|
+
[dir=rtl] .fd-button-split--transparent > button:nth-of-type(2) {
|
|
7567
|
+
border-left-width: var(--sapButton_BorderWidth);
|
|
7568
|
+
border-right-width: var(--fdButton_Menu_Transparent_Border_Width)
|
|
6468
7569
|
}
|
|
6469
7570
|
.fd-button-split .fd-button-split__text {
|
|
6470
7571
|
font-size: var(--sapFontSize);
|
|
@@ -6480,9 +7581,9 @@
|
|
|
6480
7581
|
white-space: nowrap;
|
|
6481
7582
|
overflow: hidden;
|
|
6482
7583
|
text-overflow: ellipsis;
|
|
6483
|
-
color:
|
|
6484
|
-
|
|
6485
|
-
|
|
7584
|
+
color: inherit;
|
|
7585
|
+
display: block;
|
|
7586
|
+
max-width: 9.75rem
|
|
6486
7587
|
}
|
|
6487
7588
|
.fd-button-split .fd-button-split__text::after,
|
|
6488
7589
|
.fd-button-split .fd-button-split__text::before {
|
|
@@ -7400,14 +8501,14 @@
|
|
|
7400
8501
|
-webkit-box-direction: normal;
|
|
7401
8502
|
-ms-flex-direction: column;
|
|
7402
8503
|
flex-direction: column;
|
|
7403
|
-
height: 100%;
|
|
8504
|
+
min-height: 100%;
|
|
7404
8505
|
width: 100%;
|
|
7405
8506
|
position: relative;
|
|
7406
|
-
background: var(--
|
|
8507
|
+
background: var(--fdCard_Background_Color);
|
|
7407
8508
|
-webkit-box-shadow: var(--fdCard_Box_Shadow);
|
|
7408
8509
|
box-shadow: var(--fdCard_Box_Shadow);
|
|
7409
|
-
border-radius: var(--
|
|
7410
|
-
border:
|
|
8510
|
+
border-radius: var(--fdCard_Border_Radius);
|
|
8511
|
+
border: var(--fdCard_Border)
|
|
7411
8512
|
}
|
|
7412
8513
|
.fd-card::after,
|
|
7413
8514
|
.fd-card::before {
|
|
@@ -7434,9 +8535,9 @@
|
|
|
7434
8535
|
-ms-flex-direction: row;
|
|
7435
8536
|
flex-direction: row;
|
|
7436
8537
|
padding: 1rem;
|
|
7437
|
-
background: var(--
|
|
7438
|
-
border-bottom:
|
|
7439
|
-
border-radius: var(--
|
|
8538
|
+
background: var(--fdCard_Background_Color);
|
|
8539
|
+
border-bottom: var(--fdCard_Header_Border_Bottom);
|
|
8540
|
+
border-radius: var(--fdCard_Border_Radius) var(--fdCard_Border_Radius) 0 0;
|
|
7440
8541
|
text-decoration: none;
|
|
7441
8542
|
cursor: pointer;
|
|
7442
8543
|
position: relative
|
|
@@ -7462,6 +8563,7 @@
|
|
|
7462
8563
|
left: .0625rem;
|
|
7463
8564
|
right: .0625rem;
|
|
7464
8565
|
bottom: .125rem;
|
|
8566
|
+
border-radius: var(--fdCard_Border_Radius) var(--fdCard_Border_Radius) 0 0;
|
|
7465
8567
|
z-index: 3
|
|
7466
8568
|
}
|
|
7467
8569
|
.fd-card__header.is-hover,
|
|
@@ -7485,16 +8587,16 @@
|
|
|
7485
8587
|
}
|
|
7486
8588
|
.fd-card__header--non-interactive.is-hover,
|
|
7487
8589
|
.fd-card__header--non-interactive:hover {
|
|
7488
|
-
background: var(--
|
|
8590
|
+
background: var(--fdCard_Background_Color)
|
|
7489
8591
|
}
|
|
7490
8592
|
.fd-card__header--non-interactive.is-active,
|
|
7491
8593
|
.fd-card__header--non-interactive:active {
|
|
7492
|
-
background: var(--
|
|
8594
|
+
background: var(--fdCard_Background_Color)
|
|
7493
8595
|
}
|
|
7494
8596
|
.fd-card__header:last-child {
|
|
7495
8597
|
border-bottom: none;
|
|
7496
|
-
border-top:
|
|
7497
|
-
border-radius: 0 0 var(--
|
|
8598
|
+
border-top: var(--fdCard_Header_Border_Bottom);
|
|
8599
|
+
border-radius: 0 0 var(--fdCard_Border_Radius) var(--fdCard_Border_Radius)
|
|
7498
8600
|
}
|
|
7499
8601
|
.fd-card__header:last-child.is-focus,
|
|
7500
8602
|
.fd-card__header:last-child:focus {
|
|
@@ -7503,7 +8605,8 @@
|
|
|
7503
8605
|
.fd-card__header:last-child.is-focus::before,
|
|
7504
8606
|
.fd-card__header:last-child:focus::before {
|
|
7505
8607
|
top: .125rem;
|
|
7506
|
-
bottom: .0625rem
|
|
8608
|
+
bottom: .0625rem;
|
|
8609
|
+
border-radius: 0 0 var(--fdCard_Border_Radius) var(--fdCard_Border_Radius)
|
|
7507
8610
|
}
|
|
7508
8611
|
.fd-card__header-text {
|
|
7509
8612
|
font-size: var(--sapFontSize);
|
|
@@ -7655,15 +8758,13 @@
|
|
|
7655
8758
|
}
|
|
7656
8759
|
.fd-card__counter.fd-object-status {
|
|
7657
8760
|
font-size: var(--sapFontSmallSize);
|
|
7658
|
-
|
|
7659
|
-
margin
|
|
7660
|
-
margin-right: 0;
|
|
8761
|
+
text-align: right;
|
|
8762
|
+
margin: var(--fdCard_Counter_Margin);
|
|
7661
8763
|
white-space: nowrap
|
|
7662
8764
|
}
|
|
7663
8765
|
.fd-card__counter.fd-object-status[dir=rtl],
|
|
7664
8766
|
[dir=rtl] .fd-card__counter.fd-object-status {
|
|
7665
|
-
margin
|
|
7666
|
-
margin-right: 1rem
|
|
8767
|
+
margin: var(--fdCard_Counter_Margin_RTL)
|
|
7667
8768
|
}
|
|
7668
8769
|
.fd-card__currency {
|
|
7669
8770
|
font-size: var(--sapFontSize);
|
|
@@ -8082,12 +9183,26 @@
|
|
|
8082
9183
|
text-overflow: ellipsis;
|
|
8083
9184
|
max-height: 2.8rem
|
|
8084
9185
|
}
|
|
8085
|
-
.fd-card--table {
|
|
8086
|
-
border: hidden
|
|
8087
|
-
}
|
|
8088
9186
|
.fd-card--table.fd-card--compact .fd-card__content {
|
|
8089
9187
|
padding-bottom: .5rem
|
|
8090
9188
|
}
|
|
9189
|
+
.fd-card--table .fd-card__content .fd-table__header {
|
|
9190
|
+
border-right: none;
|
|
9191
|
+
border-left: none
|
|
9192
|
+
}
|
|
9193
|
+
.fd-card--table .fd-card__content .fd-table__body {
|
|
9194
|
+
border: none
|
|
9195
|
+
}
|
|
9196
|
+
.fd-card--table .fd-card__content .fd-table__body tr:last-child td:first-child {
|
|
9197
|
+
border-bottom-left-radius: var(--fdCard_Border_Radius)
|
|
9198
|
+
}
|
|
9199
|
+
.fd-card--table .fd-card__content .fd-table__body tr:last-child td:last-child {
|
|
9200
|
+
border-bottom-right-radius: var(--fdCard_Border_Radius)
|
|
9201
|
+
}
|
|
9202
|
+
.fd-card--list .fd-card__content .fd-list__item:last-child {
|
|
9203
|
+
border-bottom-left-radius: var(--fdCard_Border_Radius);
|
|
9204
|
+
border-bottom-right-radius: var(--fdCard_Border_Radius)
|
|
9205
|
+
}
|
|
8091
9206
|
.fd-card--object .fd-card__content {
|
|
8092
9207
|
padding: 1rem
|
|
8093
9208
|
}
|
|
@@ -8426,7 +9541,7 @@ fd-carousel:focus {
|
|
|
8426
9541
|
}
|
|
8427
9542
|
.fd-carousel__button.fd-button.is-active.fd-carousel--toggled,
|
|
8428
9543
|
.fd-carousel__button.fd-button:active.fd-carousel--toggled {
|
|
8429
|
-
outline-color: var(--
|
|
9544
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
8430
9545
|
}
|
|
8431
9546
|
.fd-carousel--no-navigation .fd-carousel__button.fd-button {
|
|
8432
9547
|
display: none
|
|
@@ -8734,8 +9849,10 @@ fd-carousel:focus {
|
|
|
8734
9849
|
}
|
|
8735
9850
|
.fd-checkbox__label.is-hover::before,
|
|
8736
9851
|
.fd-checkbox__label:hover::before {
|
|
8737
|
-
background-color: var(--
|
|
8738
|
-
border-color: var(--sapField_Hover_BorderColor)
|
|
9852
|
+
background-color: var(--fdCheckbox_Hover_Background);
|
|
9853
|
+
border-color: var(--sapField_Hover_BorderColor);
|
|
9854
|
+
-webkit-box-shadow: var(--fdCheckbox_Hover_Shadow);
|
|
9855
|
+
box-shadow: var(--fdCheckbox_Hover_Shadow)
|
|
8739
9856
|
}
|
|
8740
9857
|
.fd-checkbox__label:focus {
|
|
8741
9858
|
outline: 0
|
|
@@ -8861,7 +9978,7 @@ fd-carousel:focus {
|
|
|
8861
9978
|
.fd-checkbox.is-alert + .fd-checkbox__label::before,
|
|
8862
9979
|
.fd-checkbox.is-warning + .fd-checkbox__label::before {
|
|
8863
9980
|
background-color: var(--sapField_WarningBackground);
|
|
8864
|
-
border:
|
|
9981
|
+
border: var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle) var(--sapField_WarningColor);
|
|
8865
9982
|
color: var(--sapField_TextColor)
|
|
8866
9983
|
}
|
|
8867
9984
|
.fd-checkbox.is-alert + .fd-checkbox__label::after,
|
|
@@ -8886,11 +10003,13 @@ fd-carousel:focus {
|
|
|
8886
10003
|
.fd-checkbox.is-alert + .fd-checkbox__label:hover::before,
|
|
8887
10004
|
.fd-checkbox.is-warning + .fd-checkbox__label.is-hover::before,
|
|
8888
10005
|
.fd-checkbox.is-warning + .fd-checkbox__label:hover::before {
|
|
8889
|
-
background-color: var(--
|
|
10006
|
+
background-color: var(--fdCheckbox_State_Hover_Background);
|
|
10007
|
+
-webkit-box-shadow: var(--fdCheckbox_Warning_State_Shadow);
|
|
10008
|
+
box-shadow: var(--fdCheckbox_Warning_State_Shadow)
|
|
8890
10009
|
}
|
|
8891
10010
|
.fd-checkbox.is-error + .fd-checkbox__label::before {
|
|
8892
10011
|
background-color: var(--sapField_InvalidBackground);
|
|
8893
|
-
border:
|
|
10012
|
+
border: var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle) var(--sapField_InvalidColor);
|
|
8894
10013
|
color: var(--sapField_InvalidColor)
|
|
8895
10014
|
}
|
|
8896
10015
|
.fd-checkbox.is-error + .fd-checkbox__label::after {
|
|
@@ -8906,11 +10025,13 @@ fd-carousel:focus {
|
|
|
8906
10025
|
}
|
|
8907
10026
|
.fd-checkbox.is-error + .fd-checkbox__label.is-hover::before,
|
|
8908
10027
|
.fd-checkbox.is-error + .fd-checkbox__label:hover::before {
|
|
8909
|
-
background-color: var(--
|
|
10028
|
+
background-color: var(--fdCheckbox_State_Hover_Background);
|
|
10029
|
+
-webkit-box-shadow: var(--fdCheckbox_Error_State_Shadow);
|
|
10030
|
+
box-shadow: var(--fdCheckbox_Error_State_Shadow)
|
|
8910
10031
|
}
|
|
8911
10032
|
.fd-checkbox.is-success + .fd-checkbox__label::before {
|
|
8912
10033
|
background-color: var(--sapField_SuccessBackground);
|
|
8913
|
-
border: var(--
|
|
10034
|
+
border: var(--sapField_SuccessBorderWidth) var(--sapField_SuccessBorderStyle) var(--sapField_SuccessColor);
|
|
8914
10035
|
color: var(--sapField_SuccessColor)
|
|
8915
10036
|
}
|
|
8916
10037
|
.fd-checkbox.is-success + .fd-checkbox__label::after {
|
|
@@ -8926,11 +10047,13 @@ fd-carousel:focus {
|
|
|
8926
10047
|
}
|
|
8927
10048
|
.fd-checkbox.is-success + .fd-checkbox__label.is-hover::before,
|
|
8928
10049
|
.fd-checkbox.is-success + .fd-checkbox__label:hover::before {
|
|
8929
|
-
background-color: var(--
|
|
10050
|
+
background-color: var(--fdCheckbox_State_Hover_Background);
|
|
10051
|
+
-webkit-box-shadow: var(--fdCheckbox_Success_State_Shadow);
|
|
10052
|
+
box-shadow: var(--fdCheckbox_Success_State_Shadow)
|
|
8930
10053
|
}
|
|
8931
10054
|
.fd-checkbox.is-information + .fd-checkbox__label::before {
|
|
8932
10055
|
background-color: var(--sapField_InformationBackground);
|
|
8933
|
-
border:
|
|
10056
|
+
border: var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle) var(--sapField_InformationColor);
|
|
8934
10057
|
color: var(--sapField_InformationColor)
|
|
8935
10058
|
}
|
|
8936
10059
|
.fd-checkbox.is-information + .fd-checkbox__label::after {
|
|
@@ -8946,12 +10069,14 @@ fd-carousel:focus {
|
|
|
8946
10069
|
}
|
|
8947
10070
|
.fd-checkbox.is-information + .fd-checkbox__label.is-hover::before,
|
|
8948
10071
|
.fd-checkbox.is-information + .fd-checkbox__label:hover::before {
|
|
8949
|
-
background-color: var(--
|
|
10072
|
+
background-color: var(--fdCheckbox_State_Hover_Background);
|
|
10073
|
+
-webkit-box-shadow: var(--fdCheckbox_Information_State_Shadow);
|
|
10074
|
+
box-shadow: var(--fdCheckbox_Information_State_Shadow)
|
|
8950
10075
|
}
|
|
8951
10076
|
.fd-checkbox.is-readonly + .fd-checkbox__label::before,
|
|
8952
10077
|
.fd-checkbox[readonly] + .fd-checkbox__label::before {
|
|
8953
10078
|
background-color: var(--sapField_ReadOnly_Background);
|
|
8954
|
-
border: var(--
|
|
10079
|
+
border: var(--fdCheckbox_Readonly_Border_Width) var(--fdCheckbox_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor);
|
|
8955
10080
|
color: var(--sapContent_NonInteractiveIconColor)
|
|
8956
10081
|
}
|
|
8957
10082
|
.fd-checkbox.is-readonly + .fd-checkbox__label::after,
|
|
@@ -8976,7 +10101,9 @@ fd-carousel:focus {
|
|
|
8976
10101
|
.fd-checkbox.is-readonly + .fd-checkbox__label:hover::before,
|
|
8977
10102
|
.fd-checkbox[readonly] + .fd-checkbox__label.is-hover::before,
|
|
8978
10103
|
.fd-checkbox[readonly] + .fd-checkbox__label:hover::before {
|
|
8979
|
-
background-color: var(--
|
|
10104
|
+
background-color: var(--fdCheckbox_State_Hover_Background);
|
|
10105
|
+
-webkit-box-shadow: none;
|
|
10106
|
+
box-shadow: none
|
|
8980
10107
|
}
|
|
8981
10108
|
.fd-checkbox.is-focus,
|
|
8982
10109
|
.fd-checkbox:focus {
|
|
@@ -12801,6 +13928,7 @@ fd-carousel:focus {
|
|
|
12801
13928
|
}
|
|
12802
13929
|
.fd-container.fd-form-layout-grid-container .fd-row .fd-col {
|
|
12803
13930
|
padding-top: 0;
|
|
13931
|
+
padding-bottom: 0;
|
|
12804
13932
|
white-space: nowrap;
|
|
12805
13933
|
overflow: hidden;
|
|
12806
13934
|
text-overflow: ellipsis
|
|
@@ -12808,17 +13936,23 @@ fd-carousel:focus {
|
|
|
12808
13936
|
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-select__control {
|
|
12809
13937
|
margin: .25rem 0
|
|
12810
13938
|
}
|
|
13939
|
+
.fd-container.fd-form-layout-grid-container .fd-row .fd-col--compact .fd-select__control {
|
|
13940
|
+
margin: .1875rem 0 .25rem 0
|
|
13941
|
+
}
|
|
12811
13942
|
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label {
|
|
12812
13943
|
margin-right: 0;
|
|
12813
|
-
|
|
13944
|
+
white-space: initial
|
|
12814
13945
|
}
|
|
12815
13946
|
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label[dir=rtl],
|
|
12816
13947
|
[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label {
|
|
12817
13948
|
margin-right: 0;
|
|
12818
13949
|
margin-left: 0
|
|
12819
13950
|
}
|
|
12820
|
-
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label
|
|
12821
|
-
|
|
13951
|
+
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required {
|
|
13952
|
+
padding-right: .5rem
|
|
13953
|
+
}
|
|
13954
|
+
.fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required[dir=rtl],
|
|
13955
|
+
[dir=rtl] .fd-container.fd-form-layout-grid-container .fd-row .fd-col .fd-form-label--required {
|
|
12822
13956
|
padding-right: 0;
|
|
12823
13957
|
padding-left: .5rem
|
|
12824
13958
|
}
|
|
@@ -12977,7 +14111,7 @@ fd-carousel:focus {
|
|
|
12977
14111
|
padding: 1rem
|
|
12978
14112
|
}
|
|
12979
14113
|
.fd-container.fd-form-layout-grid-container .fd-row {
|
|
12980
|
-
margin: 0 -.25rem;
|
|
14114
|
+
margin: 0 -.25rem .625rem;
|
|
12981
14115
|
min-width: calc(100% + .25rem * 2)
|
|
12982
14116
|
}
|
|
12983
14117
|
.fd-container.fd-form-layout-grid-container .fd-row .fd-col {
|
|
@@ -13550,8 +14684,8 @@ fd-carousel:focus {
|
|
|
13550
14684
|
background-color: var(--sapGroup_TitleBackground);
|
|
13551
14685
|
padding-left: 1rem;
|
|
13552
14686
|
padding-right: 1rem;
|
|
13553
|
-
-webkit-box-shadow: 0 var(--fdFormHeader_Border_Width)
|
|
13554
|
-
box-shadow: 0 var(--fdFormHeader_Border_Width)
|
|
14687
|
+
-webkit-box-shadow: 0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor);
|
|
14688
|
+
box-shadow: 0 var(--fdFormHeader_Border_Width) 0 var(--sapGroup_TitleBorderColor)
|
|
13555
14689
|
}
|
|
13556
14690
|
.fd-form-header::after,
|
|
13557
14691
|
.fd-form-header::before {
|
|
@@ -16364,6 +17498,253 @@ fd-carousel:focus {
|
|
|
16364
17498
|
padding-right: 3rem
|
|
16365
17499
|
}
|
|
16366
17500
|
}
|
|
17501
|
+
.fd-illustrated-message {
|
|
17502
|
+
font-size: var(--sapFontSize);
|
|
17503
|
+
line-height: var(--sapContent_LineHeight);
|
|
17504
|
+
color: var(--sapTextColor);
|
|
17505
|
+
font-family: var(--sapFontFamily);
|
|
17506
|
+
font-weight: 400;
|
|
17507
|
+
-webkit-box-sizing: border-box;
|
|
17508
|
+
box-sizing: border-box;
|
|
17509
|
+
padding: 0;
|
|
17510
|
+
margin: 0;
|
|
17511
|
+
border: 0;
|
|
17512
|
+
display: -webkit-box;
|
|
17513
|
+
display: -ms-flexbox;
|
|
17514
|
+
display: flex;
|
|
17515
|
+
-webkit-box-orient: vertical;
|
|
17516
|
+
-webkit-box-direction: normal;
|
|
17517
|
+
-ms-flex-direction: column;
|
|
17518
|
+
flex-direction: column;
|
|
17519
|
+
-webkit-box-align: center;
|
|
17520
|
+
-ms-flex-align: center;
|
|
17521
|
+
align-items: center;
|
|
17522
|
+
width: 100%;
|
|
17523
|
+
max-width: 30rem;
|
|
17524
|
+
height: auto;
|
|
17525
|
+
padding: 1rem;
|
|
17526
|
+
margin-top: 5rem;
|
|
17527
|
+
text-align: center
|
|
17528
|
+
}
|
|
17529
|
+
.fd-illustrated-message::after,
|
|
17530
|
+
.fd-illustrated-message::before {
|
|
17531
|
+
-webkit-box-sizing: inherit;
|
|
17532
|
+
box-sizing: inherit;
|
|
17533
|
+
font-size: inherit
|
|
17534
|
+
}
|
|
17535
|
+
.fd-illustrated-message__illustration {
|
|
17536
|
+
font-size: var(--sapFontSize);
|
|
17537
|
+
line-height: var(--sapContent_LineHeight);
|
|
17538
|
+
color: var(--sapTextColor);
|
|
17539
|
+
font-family: var(--sapFontFamily);
|
|
17540
|
+
font-weight: 400;
|
|
17541
|
+
-webkit-box-sizing: border-box;
|
|
17542
|
+
box-sizing: border-box;
|
|
17543
|
+
padding: 0;
|
|
17544
|
+
margin: 0;
|
|
17545
|
+
border: 0;
|
|
17546
|
+
height: 15rem;
|
|
17547
|
+
width: 20rem
|
|
17548
|
+
}
|
|
17549
|
+
.fd-illustrated-message__illustration::after,
|
|
17550
|
+
.fd-illustrated-message__illustration::before {
|
|
17551
|
+
-webkit-box-sizing: inherit;
|
|
17552
|
+
box-sizing: inherit;
|
|
17553
|
+
font-size: inherit
|
|
17554
|
+
}
|
|
17555
|
+
.fd-illustrated-message__figcaption {
|
|
17556
|
+
font-size: var(--sapFontSize);
|
|
17557
|
+
line-height: var(--sapContent_LineHeight);
|
|
17558
|
+
color: var(--sapTextColor);
|
|
17559
|
+
font-family: var(--sapFontFamily);
|
|
17560
|
+
font-weight: 400;
|
|
17561
|
+
-webkit-box-sizing: border-box;
|
|
17562
|
+
box-sizing: border-box;
|
|
17563
|
+
padding: 0;
|
|
17564
|
+
margin: 0;
|
|
17565
|
+
border: 0;
|
|
17566
|
+
display: -webkit-box;
|
|
17567
|
+
display: -ms-flexbox;
|
|
17568
|
+
display: flex;
|
|
17569
|
+
-webkit-box-orient: vertical;
|
|
17570
|
+
-webkit-box-direction: normal;
|
|
17571
|
+
-ms-flex-direction: column;
|
|
17572
|
+
flex-direction: column;
|
|
17573
|
+
-webkit-box-align: center;
|
|
17574
|
+
-ms-flex-align: center;
|
|
17575
|
+
align-items: center;
|
|
17576
|
+
width: 100%
|
|
17577
|
+
}
|
|
17578
|
+
.fd-illustrated-message__figcaption::after,
|
|
17579
|
+
.fd-illustrated-message__figcaption::before {
|
|
17580
|
+
-webkit-box-sizing: inherit;
|
|
17581
|
+
box-sizing: inherit;
|
|
17582
|
+
font-size: inherit
|
|
17583
|
+
}
|
|
17584
|
+
.fd-illustrated-message__title {
|
|
17585
|
+
font-size: var(--sapFontSize);
|
|
17586
|
+
line-height: var(--sapContent_LineHeight);
|
|
17587
|
+
color: var(--sapTextColor);
|
|
17588
|
+
font-family: var(--sapFontFamily);
|
|
17589
|
+
font-weight: 400;
|
|
17590
|
+
-webkit-box-sizing: border-box;
|
|
17591
|
+
box-sizing: border-box;
|
|
17592
|
+
padding: 0;
|
|
17593
|
+
margin: 0;
|
|
17594
|
+
border: 0;
|
|
17595
|
+
width: 100%;
|
|
17596
|
+
font-size: var(--sapFontHeader2Size);
|
|
17597
|
+
font-weight: var(--sapFontHeaderWeight);
|
|
17598
|
+
line-height: 1.3;
|
|
17599
|
+
text-align: center;
|
|
17600
|
+
color: var(--sapGroup_TitleTextColor);
|
|
17601
|
+
margin-top: 2rem;
|
|
17602
|
+
margin-bottom: .5rem
|
|
17603
|
+
}
|
|
17604
|
+
.fd-illustrated-message__title::after,
|
|
17605
|
+
.fd-illustrated-message__title::before {
|
|
17606
|
+
-webkit-box-sizing: inherit;
|
|
17607
|
+
box-sizing: inherit;
|
|
17608
|
+
font-size: inherit
|
|
17609
|
+
}
|
|
17610
|
+
.fd-illustrated-message__text {
|
|
17611
|
+
font-size: var(--sapFontSize);
|
|
17612
|
+
line-height: var(--sapContent_LineHeight);
|
|
17613
|
+
color: var(--sapTextColor);
|
|
17614
|
+
font-family: var(--sapFontFamily);
|
|
17615
|
+
font-weight: 400;
|
|
17616
|
+
-webkit-box-sizing: border-box;
|
|
17617
|
+
box-sizing: border-box;
|
|
17618
|
+
padding: 0;
|
|
17619
|
+
margin: 0;
|
|
17620
|
+
border: 0;
|
|
17621
|
+
width: 100%;
|
|
17622
|
+
font-size: var(--sapFontLargeSize);
|
|
17623
|
+
font-weight: 400;
|
|
17624
|
+
line-height: 1.4;
|
|
17625
|
+
text-align: center;
|
|
17626
|
+
color: var(--sapContent_LabelColor);
|
|
17627
|
+
margin-bottom: 2rem
|
|
17628
|
+
}
|
|
17629
|
+
.fd-illustrated-message__text::after,
|
|
17630
|
+
.fd-illustrated-message__text::before {
|
|
17631
|
+
-webkit-box-sizing: inherit;
|
|
17632
|
+
box-sizing: inherit;
|
|
17633
|
+
font-size: inherit
|
|
17634
|
+
}
|
|
17635
|
+
.fd-illustrated-message__actions {
|
|
17636
|
+
font-size: var(--sapFontSize);
|
|
17637
|
+
line-height: var(--sapContent_LineHeight);
|
|
17638
|
+
color: var(--sapTextColor);
|
|
17639
|
+
font-family: var(--sapFontFamily);
|
|
17640
|
+
font-weight: 400;
|
|
17641
|
+
-webkit-box-sizing: border-box;
|
|
17642
|
+
box-sizing: border-box;
|
|
17643
|
+
padding: 0;
|
|
17644
|
+
margin: 0;
|
|
17645
|
+
border: 0;
|
|
17646
|
+
display: -webkit-box;
|
|
17647
|
+
display: -ms-flexbox;
|
|
17648
|
+
display: flex;
|
|
17649
|
+
-webkit-box-pack: center;
|
|
17650
|
+
-ms-flex-pack: center;
|
|
17651
|
+
justify-content: center;
|
|
17652
|
+
-webkit-box-align: center;
|
|
17653
|
+
-ms-flex-align: center;
|
|
17654
|
+
align-items: center;
|
|
17655
|
+
margin-bottom: 2rem;
|
|
17656
|
+
width: 100%
|
|
17657
|
+
}
|
|
17658
|
+
.fd-illustrated-message__actions::after,
|
|
17659
|
+
.fd-illustrated-message__actions::before {
|
|
17660
|
+
-webkit-box-sizing: inherit;
|
|
17661
|
+
box-sizing: inherit;
|
|
17662
|
+
font-size: inherit
|
|
17663
|
+
}
|
|
17664
|
+
.fd-illustrated-message__actions * {
|
|
17665
|
+
margin: 0 .25rem
|
|
17666
|
+
}
|
|
17667
|
+
@media screen and (max-width:599px) {
|
|
17668
|
+
.fd-illustrated-message {
|
|
17669
|
+
max-width: 20rem
|
|
17670
|
+
}
|
|
17671
|
+
.fd-illustrated-message .fd-illustrated-message__illustration {
|
|
17672
|
+
height: 10rem;
|
|
17673
|
+
width: 10rem
|
|
17674
|
+
}
|
|
17675
|
+
}
|
|
17676
|
+
.fd-illustrated-message--dialog {
|
|
17677
|
+
margin-top: 0;
|
|
17678
|
+
max-width: 100%
|
|
17679
|
+
}
|
|
17680
|
+
.fd-illustrated-message--dialog .fd-illustrated-message__illustration {
|
|
17681
|
+
height: 10rem;
|
|
17682
|
+
width: 10rem;
|
|
17683
|
+
margin-top: 1rem;
|
|
17684
|
+
margin-bottom: 2rem
|
|
17685
|
+
}
|
|
17686
|
+
.fd-illustrated-message--dialog .fd-illustrated-message__title {
|
|
17687
|
+
padding: 0;
|
|
17688
|
+
margin: 0;
|
|
17689
|
+
font-size: var(--sapFontHeader4Size);
|
|
17690
|
+
max-width: 25rem;
|
|
17691
|
+
margin-bottom: .25rem
|
|
17692
|
+
}
|
|
17693
|
+
.fd-illustrated-message--dialog .fd-illustrated-message__text {
|
|
17694
|
+
font-size: var(--sapFontSize);
|
|
17695
|
+
max-width: 25rem;
|
|
17696
|
+
color: var(--sapTile_TextColor)
|
|
17697
|
+
}
|
|
17698
|
+
@media screen and (max-width:599px) {
|
|
17699
|
+
.fd-illustrated-message--dialog .fd-illustrated-message__title {
|
|
17700
|
+
max-width: 18rem
|
|
17701
|
+
}
|
|
17702
|
+
.fd-illustrated-message--dialog .fd-illustrated-message__text {
|
|
17703
|
+
max-width: 18rem
|
|
17704
|
+
}
|
|
17705
|
+
}
|
|
17706
|
+
.fd-illustrated-message--spot {
|
|
17707
|
+
margin-top: 0;
|
|
17708
|
+
max-width: 100%
|
|
17709
|
+
}
|
|
17710
|
+
.fd-illustrated-message--spot .fd-illustrated-message__illustration {
|
|
17711
|
+
padding: 0;
|
|
17712
|
+
margin: 0;
|
|
17713
|
+
height: 8rem;
|
|
17714
|
+
width: 8rem;
|
|
17715
|
+
margin-top: .5rem;
|
|
17716
|
+
margin-bottom: .5rem
|
|
17717
|
+
}
|
|
17718
|
+
.fd-illustrated-message--spot .fd-illustrated-message__title {
|
|
17719
|
+
padding: 0;
|
|
17720
|
+
margin: 0;
|
|
17721
|
+
font-size: var(--sapFontHeader5Size);
|
|
17722
|
+
line-height: 1.25;
|
|
17723
|
+
margin-bottom: .25rem;
|
|
17724
|
+
max-width: 25rem
|
|
17725
|
+
}
|
|
17726
|
+
.fd-illustrated-message--spot .fd-illustrated-message__text {
|
|
17727
|
+
padding: 0;
|
|
17728
|
+
margin: 0;
|
|
17729
|
+
font-size: var(--sapFontSize);
|
|
17730
|
+
color: var(--sapTile_TextColor);
|
|
17731
|
+
margin-bottom: 1rem;
|
|
17732
|
+
max-width: 25rem
|
|
17733
|
+
}
|
|
17734
|
+
.fd-illustrated-message--spot .fd-illustrated-message__actions {
|
|
17735
|
+
padding: 0;
|
|
17736
|
+
margin: 0;
|
|
17737
|
+
margin-top: .5rem;
|
|
17738
|
+
margin-bottom: 1rem
|
|
17739
|
+
}
|
|
17740
|
+
@media screen and (max-width:599px) {
|
|
17741
|
+
.fd-illustrated-message--spot .fd-illustrated-message__title {
|
|
17742
|
+
max-width: 18rem
|
|
17743
|
+
}
|
|
17744
|
+
.fd-illustrated-message--spot .fd-illustrated-message__text {
|
|
17745
|
+
max-width: 18rem
|
|
17746
|
+
}
|
|
17747
|
+
}
|
|
16367
17748
|
.fd-info-label {
|
|
16368
17749
|
font-size: var(--sapFontSize);
|
|
16369
17750
|
line-height: var(--sapContent_LineHeight);
|
|
@@ -17166,7 +18547,7 @@ fd-carousel:focus {
|
|
|
17166
18547
|
}
|
|
17167
18548
|
.fd-input-group__button.is-focus.fd-input-group--toggled,
|
|
17168
18549
|
.fd-input-group__button:focus.fd-input-group--toggled {
|
|
17169
|
-
outline-color: var(--
|
|
18550
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
17170
18551
|
}
|
|
17171
18552
|
.fd-input-group__button::before {
|
|
17172
18553
|
display: none!important
|
|
@@ -22646,7 +24027,6 @@ fd-carousel:focus {
|
|
|
22646
24027
|
align-items: center;
|
|
22647
24028
|
width: 100%;
|
|
22648
24029
|
height: 100%;
|
|
22649
|
-
padding: 1rem;
|
|
22650
24030
|
background: var(--sapBackgroundColor)
|
|
22651
24031
|
}
|
|
22652
24032
|
.fd-message-page::after,
|
|
@@ -22700,8 +24080,31 @@ fd-carousel:focus {
|
|
|
22700
24080
|
-webkit-box-align: center;
|
|
22701
24081
|
-ms-flex-align: center;
|
|
22702
24082
|
align-items: center;
|
|
24083
|
+
padding: 1rem;
|
|
22703
24084
|
-webkit-transform: translateY(-1rem);
|
|
22704
|
-
transform: translateY(-1rem)
|
|
24085
|
+
transform: translateY(-1rem);
|
|
24086
|
+
background: var(--fdMessage_Page_Container_Background);
|
|
24087
|
+
border-radius: var(--fdMessage_Page_Container_Corner_Radius)
|
|
24088
|
+
}
|
|
24089
|
+
.fd-message-page__illustration-container {
|
|
24090
|
+
font-size: var(--sapFontSize);
|
|
24091
|
+
line-height: var(--sapContent_LineHeight);
|
|
24092
|
+
color: var(--sapTextColor);
|
|
24093
|
+
font-family: var(--sapFontFamily);
|
|
24094
|
+
font-weight: 400;
|
|
24095
|
+
-webkit-box-sizing: border-box;
|
|
24096
|
+
box-sizing: border-box;
|
|
24097
|
+
padding: 0;
|
|
24098
|
+
margin: 0;
|
|
24099
|
+
border: 0;
|
|
24100
|
+
max-width: 20rem;
|
|
24101
|
+
max-height: 15rem
|
|
24102
|
+
}
|
|
24103
|
+
.fd-message-page__illustration-container::after,
|
|
24104
|
+
.fd-message-page__illustration-container::before {
|
|
24105
|
+
-webkit-box-sizing: inherit;
|
|
24106
|
+
box-sizing: inherit;
|
|
24107
|
+
font-size: inherit
|
|
22705
24108
|
}
|
|
22706
24109
|
.fd-message-page__icon-container {
|
|
22707
24110
|
font-size: var(--sapFontSize);
|
|
@@ -22758,7 +24161,8 @@ fd-carousel:focus {
|
|
|
22758
24161
|
padding-bottom: 2rem
|
|
22759
24162
|
}
|
|
22760
24163
|
.fd-message-page__title {
|
|
22761
|
-
margin:
|
|
24164
|
+
margin-top: var(--fdMessage_Page_Title_Margin_Top);
|
|
24165
|
+
margin-bottom: var(--fdMessage_Page_Title_Margin_Bottom);
|
|
22762
24166
|
text-align: center;
|
|
22763
24167
|
font-size: var(--sapFontHeader2Size);
|
|
22764
24168
|
color: var(--sapGroup_TitleTextColor)
|
|
@@ -22867,8 +24271,9 @@ fd-carousel:focus {
|
|
|
22867
24271
|
.fd-message-strip--warning::before {
|
|
22868
24272
|
position: absolute;
|
|
22869
24273
|
width: 2.5rem;
|
|
22870
|
-
top: .
|
|
22871
|
-
left: 0
|
|
24274
|
+
top: .5rem;
|
|
24275
|
+
left: 0;
|
|
24276
|
+
line-height: 1
|
|
22872
24277
|
}
|
|
22873
24278
|
.fd-message-strip--error[dir=rtl],
|
|
22874
24279
|
.fd-message-strip--information[dir=rtl],
|
|
@@ -29206,6 +30611,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
29206
30611
|
border: 0;
|
|
29207
30612
|
position: relative;
|
|
29208
30613
|
display: inline-block;
|
|
30614
|
+
max-width: 100%;
|
|
29209
30615
|
text-shadow: var(--fdPopover_Text_Shadow)
|
|
29210
30616
|
}
|
|
29211
30617
|
.fd-popover::after,
|
|
@@ -29677,7 +31083,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
29677
31083
|
}
|
|
29678
31084
|
.fd-product-switch .fd-button.fd-product-switch__control.is-focus.fd-product-switch--toggled,
|
|
29679
31085
|
.fd-product-switch .fd-button.fd-product-switch__control:focus.fd-product-switch--toggled {
|
|
29680
|
-
outline-color: var(--
|
|
31086
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
29681
31087
|
}
|
|
29682
31088
|
.fd-product-switch__list {
|
|
29683
31089
|
font-size: var(--sapFontSize);
|
|
@@ -30593,10 +31999,10 @@ places the element far left of the screen. so it is not visible.
|
|
|
30593
31999
|
border-radius: 50%
|
|
30594
32000
|
}
|
|
30595
32001
|
.fd-radio__label::after {
|
|
30596
|
-
height:
|
|
30597
|
-
width:
|
|
30598
|
-
top:
|
|
30599
|
-
left:
|
|
32002
|
+
height: var(--fdRadio_Inner_Content_Size);
|
|
32003
|
+
width: var(--fdRadio_Inner_Content_Size);
|
|
32004
|
+
top: var(--fdRadio_Inner_Content_Padding);
|
|
32005
|
+
left: var(--fdRadio_Inner_Content_Padding)
|
|
30600
32006
|
}
|
|
30601
32007
|
.fd-radio__label.is-focus,
|
|
30602
32008
|
.fd-radio__label:focus {
|
|
@@ -30606,7 +32012,10 @@ places the element far left of the screen. so it is not visible.
|
|
|
30606
32012
|
.fd-radio__label.is-hover::before,
|
|
30607
32013
|
.fd-radio__label:hover::before {
|
|
30608
32014
|
background-color: var(--sapField_Hover_Background);
|
|
30609
|
-
border-
|
|
32015
|
+
border-width: var(--sapField_BorderWidth);
|
|
32016
|
+
border-color: var(--sapField_Hover_BorderColor);
|
|
32017
|
+
-webkit-box-shadow: var(--fdRadio_Hover_Box_Shadow);
|
|
32018
|
+
box-shadow: var(--fdRadio_Hover_Box_Shadow)
|
|
30610
32019
|
}
|
|
30611
32020
|
.fd-radio__label[dir=rtl]::before,
|
|
30612
32021
|
[dir=rtl] .fd-radio__label::before {
|
|
@@ -30615,7 +32024,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
30615
32024
|
}
|
|
30616
32025
|
.fd-radio__label[dir=rtl]::after,
|
|
30617
32026
|
[dir=rtl] .fd-radio__label::after {
|
|
30618
|
-
right:
|
|
32027
|
+
right: var(--fdRadio_Inner_Content_Padding)
|
|
30619
32028
|
}
|
|
30620
32029
|
.fd-radio__label.is-empty,
|
|
30621
32030
|
.fd-radio__label:empty {
|
|
@@ -30638,12 +32047,20 @@ places the element far left of the screen. so it is not visible.
|
|
|
30638
32047
|
.fd-radio.is-alert + .fd-radio__label::before,
|
|
30639
32048
|
.fd-radio.is-warning + .fd-radio__label::before {
|
|
30640
32049
|
background-color: var(--sapField_WarningBackground);
|
|
30641
|
-
border:
|
|
32050
|
+
border: var(--sapField_WarningBorderWidth) var(--sapField_WarningBorderStyle) var(--sapField_WarningColor)
|
|
30642
32051
|
}
|
|
30643
32052
|
.fd-radio.is-alert + .fd-radio__label::after,
|
|
30644
32053
|
.fd-radio.is-warning + .fd-radio__label::after {
|
|
30645
32054
|
background: var(--sapField_TextColor)
|
|
30646
32055
|
}
|
|
32056
|
+
.fd-radio.is-alert + .fd-radio__label.is-hover::before,
|
|
32057
|
+
.fd-radio.is-alert + .fd-radio__label:hover::before,
|
|
32058
|
+
.fd-radio.is-warning + .fd-radio__label.is-hover::before,
|
|
32059
|
+
.fd-radio.is-warning + .fd-radio__label:hover::before {
|
|
32060
|
+
background-color: var(--sapField_Hover_Background);
|
|
32061
|
+
-webkit-box-shadow: var(--fdRadio_Warning_Hover_Shadow);
|
|
32062
|
+
box-shadow: var(--fdRadio_Warning_Hover_Shadow)
|
|
32063
|
+
}
|
|
30647
32064
|
.fd-radio.is-alert + .fd-radio__label.is-hover.is-disabled,
|
|
30648
32065
|
.fd-radio.is-alert + .fd-radio__label.is-hover:disabled,
|
|
30649
32066
|
.fd-radio.is-alert + .fd-radio__label.is-hover[aria-disabled=true],
|
|
@@ -30660,11 +32077,17 @@ places the element far left of the screen. so it is not visible.
|
|
|
30660
32077
|
}
|
|
30661
32078
|
.fd-radio.is-error + .fd-radio__label::before {
|
|
30662
32079
|
background-color: var(--sapField_InvalidBackground);
|
|
30663
|
-
border:
|
|
32080
|
+
border: var(--sapField_InvalidBorderWidth) var(--sapField_InvalidBorderStyle) var(--sapField_InvalidColor)
|
|
30664
32081
|
}
|
|
30665
32082
|
.fd-radio.is-error + .fd-radio__label::after {
|
|
30666
32083
|
background: var(--sapField_InvalidColor)
|
|
30667
32084
|
}
|
|
32085
|
+
.fd-radio.is-error + .fd-radio__label.is-hover::before,
|
|
32086
|
+
.fd-radio.is-error + .fd-radio__label:hover::before {
|
|
32087
|
+
background-color: var(--sapField_Hover_Background);
|
|
32088
|
+
-webkit-box-shadow: var(--fdRadio_Error_Hover_Shadow);
|
|
32089
|
+
box-shadow: var(--fdRadio_Error_Hover_Shadow)
|
|
32090
|
+
}
|
|
30668
32091
|
.fd-radio.is-error + .fd-radio__label.is-hover.is-disabled,
|
|
30669
32092
|
.fd-radio.is-error + .fd-radio__label.is-hover:disabled,
|
|
30670
32093
|
.fd-radio.is-error + .fd-radio__label.is-hover[aria-disabled=true],
|
|
@@ -30675,11 +32098,17 @@ places the element far left of the screen. so it is not visible.
|
|
|
30675
32098
|
}
|
|
30676
32099
|
.fd-radio.is-success + .fd-radio__label::before {
|
|
30677
32100
|
background-color: var(--sapField_SuccessBackground);
|
|
30678
|
-
border: var(--sapField_BorderWidth)
|
|
32101
|
+
border: var(--sapField_BorderWidth) var(--sapField_SuccessBorderStyle) var(--sapField_SuccessColor)
|
|
30679
32102
|
}
|
|
30680
32103
|
.fd-radio.is-success + .fd-radio__label::after {
|
|
30681
32104
|
background: var(--sapField_SuccessColor)
|
|
30682
32105
|
}
|
|
32106
|
+
.fd-radio.is-success + .fd-radio__label.is-hover::before,
|
|
32107
|
+
.fd-radio.is-success + .fd-radio__label:hover::before {
|
|
32108
|
+
background-color: var(--sapField_Hover_Background);
|
|
32109
|
+
-webkit-box-shadow: var(--fdRadio_Success_Hover_Shadow);
|
|
32110
|
+
box-shadow: var(--fdRadio_Success_Hover_Shadow)
|
|
32111
|
+
}
|
|
30683
32112
|
.fd-radio.is-success + .fd-radio__label.is-hover.is-disabled,
|
|
30684
32113
|
.fd-radio.is-success + .fd-radio__label.is-hover:disabled,
|
|
30685
32114
|
.fd-radio.is-success + .fd-radio__label.is-hover[aria-disabled=true],
|
|
@@ -30690,11 +32119,17 @@ places the element far left of the screen. so it is not visible.
|
|
|
30690
32119
|
}
|
|
30691
32120
|
.fd-radio.is-information + .fd-radio__label::before {
|
|
30692
32121
|
background-color: var(--sapField_InformationBackground);
|
|
30693
|
-
border:
|
|
32122
|
+
border: var(--sapField_InformationBorderWidth) var(--sapField_InformationBorderStyle) var(--sapField_InformationColor)
|
|
30694
32123
|
}
|
|
30695
32124
|
.fd-radio.is-information + .fd-radio__label::after {
|
|
30696
32125
|
background: var(--sapField_InformationColor)
|
|
30697
32126
|
}
|
|
32127
|
+
.fd-radio.is-information + .fd-radio__label.is-hover::before,
|
|
32128
|
+
.fd-radio.is-information + .fd-radio__label:hover::before {
|
|
32129
|
+
background-color: var(--sapField_Hover_Background);
|
|
32130
|
+
-webkit-box-shadow: var(--fdRadio_Information_Hover_Shadow);
|
|
32131
|
+
box-shadow: var(--fdRadio_Information_Hover_Shadow)
|
|
32132
|
+
}
|
|
30698
32133
|
.fd-radio.is-information + .fd-radio__label.is-hover.is-disabled,
|
|
30699
32134
|
.fd-radio.is-information + .fd-radio__label.is-hover:disabled,
|
|
30700
32135
|
.fd-radio.is-information + .fd-radio__label.is-hover[aria-disabled=true],
|
|
@@ -30706,12 +32141,20 @@ places the element far left of the screen. so it is not visible.
|
|
|
30706
32141
|
.fd-radio.is-readonly + .fd-radio__label::before,
|
|
30707
32142
|
.fd-radio[readonly] + .fd-radio__label::before {
|
|
30708
32143
|
background-color: var(--sapField_ReadOnly_Background);
|
|
30709
|
-
border: var(--
|
|
32144
|
+
border: var(--fdRadio_Readonly_Border_Width) var(--fdRadio_Readonly_Border_Type) var(--sapField_ReadOnly_BorderColor)
|
|
30710
32145
|
}
|
|
30711
32146
|
.fd-radio.is-readonly + .fd-radio__label::after,
|
|
30712
32147
|
.fd-radio[readonly] + .fd-radio__label::after {
|
|
30713
32148
|
background: var(--sapContent_NonInteractiveIconColor)
|
|
30714
32149
|
}
|
|
32150
|
+
.fd-radio.is-readonly + .fd-radio__label.is-hover::before,
|
|
32151
|
+
.fd-radio.is-readonly + .fd-radio__label:hover::before,
|
|
32152
|
+
.fd-radio[readonly] + .fd-radio__label.is-hover::before,
|
|
32153
|
+
.fd-radio[readonly] + .fd-radio__label:hover::before {
|
|
32154
|
+
background-color: var(--sapField_Hover_Background);
|
|
32155
|
+
-webkit-box-shadow: none;
|
|
32156
|
+
box-shadow: none
|
|
32157
|
+
}
|
|
30715
32158
|
.fd-radio.is-readonly + .fd-radio__label.is-hover.is-disabled,
|
|
30716
32159
|
.fd-radio.is-readonly + .fd-radio__label.is-hover:disabled,
|
|
30717
32160
|
.fd-radio.is-readonly + .fd-radio__label.is-hover[aria-disabled=true],
|
|
@@ -30744,7 +32187,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
30744
32187
|
.fd-radio:disabled + .fd-radio__label,
|
|
30745
32188
|
.fd-radio[aria-disabled=true] + .fd-radio__label {
|
|
30746
32189
|
pointer-events: none;
|
|
30747
|
-
opacity:
|
|
32190
|
+
opacity: var(--sapContent_DisabledOpacity)
|
|
30748
32191
|
}
|
|
30749
32192
|
.fd-radio--compact + .fd-radio__label {
|
|
30750
32193
|
padding: .5rem
|
|
@@ -30757,10 +32200,10 @@ places the element far left of the screen. so it is not visible.
|
|
|
30757
32200
|
margin-left: 0
|
|
30758
32201
|
}
|
|
30759
32202
|
.fd-radio--compact + .fd-radio__label::after {
|
|
30760
|
-
height:
|
|
30761
|
-
width:
|
|
30762
|
-
top:
|
|
30763
|
-
left:
|
|
32203
|
+
height: var(--fdRadio_Inner_Content_Size_Compact);
|
|
32204
|
+
width: var(--fdRadio_Inner_Content_Size_Compact);
|
|
32205
|
+
top: var(--fdRadio_Inner_Content_Padding_Compact);
|
|
32206
|
+
left: var(--fdRadio_Inner_Content_Padding_Compact)
|
|
30764
32207
|
}
|
|
30765
32208
|
.fd-radio--compact + .fd-radio__label[dir=rtl]::before,
|
|
30766
32209
|
[dir=rtl] .fd-radio--compact + .fd-radio__label::before {
|
|
@@ -30770,7 +32213,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
30770
32213
|
}
|
|
30771
32214
|
.fd-radio--compact + .fd-radio__label[dir=rtl]::after,
|
|
30772
32215
|
[dir=rtl] .fd-radio--compact + .fd-radio__label::after {
|
|
30773
|
-
right:
|
|
32216
|
+
right: var(--fdRadio_Inner_Content_Padding_Compact)
|
|
30774
32217
|
}
|
|
30775
32218
|
.fd-radio--compact + .fd-radio__label.is-empty,
|
|
30776
32219
|
.fd-radio--compact + .fd-radio__label:empty {
|
|
@@ -31737,6 +33180,41 @@ places the element far left of the screen. so it is not visible.
|
|
|
31737
33180
|
padding-left: 3rem;
|
|
31738
33181
|
padding-right: 3rem
|
|
31739
33182
|
}
|
|
33183
|
+
.fd-scrollbar {
|
|
33184
|
+
font-size: var(--sapFontSize);
|
|
33185
|
+
line-height: var(--sapContent_LineHeight);
|
|
33186
|
+
color: var(--sapTextColor);
|
|
33187
|
+
font-family: var(--sapFontFamily);
|
|
33188
|
+
font-weight: 400;
|
|
33189
|
+
-webkit-box-sizing: border-box;
|
|
33190
|
+
box-sizing: border-box;
|
|
33191
|
+
padding: 0;
|
|
33192
|
+
margin: 0;
|
|
33193
|
+
border: 0;
|
|
33194
|
+
overflow: auto;
|
|
33195
|
+
scrollbar-color: var(--fdScrollbar_Thumb_Color) var(--fdScrollbar_Track_Color)
|
|
33196
|
+
}
|
|
33197
|
+
.fd-scrollbar::after,
|
|
33198
|
+
.fd-scrollbar::before {
|
|
33199
|
+
-webkit-box-sizing: inherit;
|
|
33200
|
+
box-sizing: inherit;
|
|
33201
|
+
font-size: inherit
|
|
33202
|
+
}
|
|
33203
|
+
.fd-scrollbar::-webkit-scrollbar {
|
|
33204
|
+
width: var(--fdScrollbar_Dimension);
|
|
33205
|
+
height: var(--fdScrollbar_Dimension)
|
|
33206
|
+
}
|
|
33207
|
+
.fd-scrollbar::-webkit-scrollbar-corner,
|
|
33208
|
+
.fd-scrollbar::-webkit-scrollbar-track {
|
|
33209
|
+
background-color: var(--fdScrollbar_Track_Color)
|
|
33210
|
+
}
|
|
33211
|
+
.fd-scrollbar::-webkit-scrollbar-thumb {
|
|
33212
|
+
background-color: var(--fdScrollbar_Thumb_Color)
|
|
33213
|
+
}
|
|
33214
|
+
.fd-scrollbar::-webkit-scrollbar-thumb:active,
|
|
33215
|
+
.fd-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
33216
|
+
background-color: var(--fdScrollbar_Thumb_Hover_Color)
|
|
33217
|
+
}
|
|
31740
33218
|
/*!
|
|
31741
33219
|
.fd-section+(--full-bleed, --no-border)
|
|
31742
33220
|
.fd-section__header
|
|
@@ -31932,8 +33410,8 @@ places the element far left of the screen. so it is not visible.
|
|
|
31932
33410
|
font-size: inherit
|
|
31933
33411
|
}
|
|
31934
33412
|
/*!
|
|
31935
|
-
.fd-segmented-button
|
|
31936
|
-
|
|
33413
|
+
.fd-segmented-button
|
|
33414
|
+
button
|
|
31937
33415
|
*/
|
|
31938
33416
|
.fd-segmented-button {
|
|
31939
33417
|
font-size: var(--sapFontSize);
|
|
@@ -31946,6 +33424,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
31946
33424
|
padding: 0;
|
|
31947
33425
|
margin: 0;
|
|
31948
33426
|
border: 0;
|
|
33427
|
+
position: relative;
|
|
31949
33428
|
display: -webkit-inline-box;
|
|
31950
33429
|
display: -ms-inline-flexbox;
|
|
31951
33430
|
display: inline-flex;
|
|
@@ -31957,41 +33436,48 @@ places the element far left of the screen. so it is not visible.
|
|
|
31957
33436
|
box-sizing: inherit;
|
|
31958
33437
|
font-size: inherit
|
|
31959
33438
|
}
|
|
31960
|
-
.fd-segmented-button
|
|
33439
|
+
.fd-segmented-button::before {
|
|
33440
|
+
content: "";
|
|
33441
|
+
display: var(--fdButton_Segmented_Pad_Display);
|
|
33442
|
+
left: 0;
|
|
33443
|
+
top: 0;
|
|
33444
|
+
width: 100%;
|
|
33445
|
+
height: 100%;
|
|
33446
|
+
position: absolute;
|
|
33447
|
+
background: var(--sapButton_Background);
|
|
33448
|
+
border-radius: var(--sapButton_BorderCornerRadius)
|
|
33449
|
+
}
|
|
33450
|
+
.fd-segmented-button button {
|
|
31961
33451
|
margin: 0
|
|
31962
33452
|
}
|
|
31963
|
-
.fd-segmented-button
|
|
31964
|
-
|
|
33453
|
+
.fd-segmented-button button.is-hover,
|
|
33454
|
+
.fd-segmented-button button:hover {
|
|
33455
|
+
z-index: 2
|
|
31965
33456
|
}
|
|
31966
|
-
.fd-segmented-button
|
|
31967
|
-
border-
|
|
33457
|
+
.fd-segmented-button button:first-child {
|
|
33458
|
+
border-radius: var(--fdButton_Border_Radius_Left)
|
|
31968
33459
|
}
|
|
31969
|
-
.fd-segmented-button
|
|
31970
|
-
border-
|
|
31971
|
-
border-bottom-right-radius: 0
|
|
33460
|
+
.fd-segmented-button button:not(:first-child):not(:last-child) {
|
|
33461
|
+
border-radius: var(--fdButton_Segmented_Middle_Border_Radius)
|
|
31972
33462
|
}
|
|
31973
|
-
.fd-segmented-button
|
|
31974
|
-
border-
|
|
31975
|
-
border-bottom-left-radius: 0
|
|
33463
|
+
.fd-segmented-button button:last-child {
|
|
33464
|
+
border-radius: var(--fdButton_Border_Radius_Right)
|
|
31976
33465
|
}
|
|
31977
|
-
.fd-segmented-button
|
|
31978
|
-
|
|
31979
|
-
border-right: none
|
|
33466
|
+
.fd-segmented-button button:not(:last-child) {
|
|
33467
|
+
border-right-width: var(--fdButton_Segmented_Border_Width)
|
|
31980
33468
|
}
|
|
31981
|
-
.fd-segmented-button
|
|
31982
|
-
[dir=rtl] .fd-segmented-button
|
|
31983
|
-
border-
|
|
31984
|
-
border-bottom-left-radius: var(--sapButton_BorderCornerRadius);
|
|
31985
|
-
border-top-right-radius: 0;
|
|
31986
|
-
border-bottom-right-radius: 0
|
|
33469
|
+
.fd-segmented-button button[dir=rtl]:first-child,
|
|
33470
|
+
[dir=rtl] .fd-segmented-button button:first-child {
|
|
33471
|
+
border-radius: var(--fdButton_Border_Radius_Left_RTL)
|
|
31987
33472
|
}
|
|
31988
|
-
.fd-segmented-button
|
|
31989
|
-
[dir=rtl] .fd-segmented-button
|
|
31990
|
-
border-
|
|
31991
|
-
|
|
31992
|
-
|
|
31993
|
-
|
|
31994
|
-
border-
|
|
33473
|
+
.fd-segmented-button button[dir=rtl]:last-child,
|
|
33474
|
+
[dir=rtl] .fd-segmented-button button:last-child {
|
|
33475
|
+
border-radius: var(--fdButton_Border_Radius_Right_RTL)
|
|
33476
|
+
}
|
|
33477
|
+
.fd-segmented-button button[dir=rtl]:not(:last-child),
|
|
33478
|
+
[dir=rtl] .fd-segmented-button button:not(:last-child) {
|
|
33479
|
+
border-left-width: var(--fdButton_Segmented_Border_Width);
|
|
33480
|
+
border-right-width: var(--sapButton_BorderWidth)
|
|
31995
33481
|
}
|
|
31996
33482
|
.fd-select {
|
|
31997
33483
|
font-size: var(--sapFontSize);
|
|
@@ -32507,7 +33993,8 @@ places the element far left of the screen. so it is not visible.
|
|
|
32507
33993
|
}
|
|
32508
33994
|
.fd-select__control.is-readonly .fd-select__text-content {
|
|
32509
33995
|
padding-left: .625rem;
|
|
32510
|
-
padding-right: .625rem
|
|
33996
|
+
padding-right: .625rem;
|
|
33997
|
+
min-width: calc(5rem - var(--sapField_BorderWidth) * 2)
|
|
32511
33998
|
}
|
|
32512
33999
|
.fd-select__text-content {
|
|
32513
34000
|
font-size: var(--sapFontSize);
|
|
@@ -32520,8 +34007,12 @@ places the element far left of the screen. so it is not visible.
|
|
|
32520
34007
|
padding: 0;
|
|
32521
34008
|
margin: 0;
|
|
32522
34009
|
border: 0;
|
|
34010
|
+
white-space: nowrap;
|
|
34011
|
+
overflow: hidden;
|
|
34012
|
+
text-overflow: ellipsis;
|
|
32523
34013
|
padding-left: .625rem;
|
|
32524
|
-
min-width: 2.
|
|
34014
|
+
min-width: calc(2.5rem - var(--sapField_BorderWidth) * 2);
|
|
34015
|
+
display: inline-block
|
|
32525
34016
|
}
|
|
32526
34017
|
.fd-select__text-content::after,
|
|
32527
34018
|
.fd-select__text-content::before {
|
|
@@ -32539,7 +34030,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
32539
34030
|
}
|
|
32540
34031
|
.fd-select--compact .fd-select__control .fd-select__text-content {
|
|
32541
34032
|
padding-left: .5rem;
|
|
32542
|
-
min-width:
|
|
34033
|
+
min-width: calc(2.75rem - var(--sapField_BorderWidth) * 2)
|
|
32543
34034
|
}
|
|
32544
34035
|
.fd-select--compact .fd-select__control .fd-select__text-content[dir=rtl],
|
|
32545
34036
|
[dir=rtl] .fd-select--compact .fd-select__control .fd-select__text-content {
|
|
@@ -32562,20 +34053,20 @@ places the element far left of the screen. so it is not visible.
|
|
|
32562
34053
|
margin: 0;
|
|
32563
34054
|
border: 0;
|
|
32564
34055
|
background-color: var(--sapShellColor);
|
|
32565
|
-
-webkit-box-shadow: var(--
|
|
32566
|
-
box-shadow: var(--
|
|
32567
|
-
height:
|
|
34056
|
+
-webkit-box-shadow: var(--fdShellbar_Shadow);
|
|
34057
|
+
box-shadow: var(--fdShellbar_Shadow);
|
|
34058
|
+
height: var(--fdShellbar_Height);
|
|
32568
34059
|
display: -webkit-box;
|
|
32569
34060
|
display: -ms-flexbox;
|
|
32570
34061
|
display: flex;
|
|
32571
34062
|
-webkit-box-align: center;
|
|
32572
34063
|
-ms-flex-align: center;
|
|
32573
34064
|
align-items: center;
|
|
32574
|
-
color: var(--sapShell_TextColor);
|
|
32575
|
-
position: relative;
|
|
32576
34065
|
-webkit-box-pack: justify;
|
|
32577
34066
|
-ms-flex-pack: justify;
|
|
32578
34067
|
justify-content: space-between;
|
|
34068
|
+
color: var(--sapShell_TextColor);
|
|
34069
|
+
position: relative;
|
|
32579
34070
|
padding: 0 1rem
|
|
32580
34071
|
}
|
|
32581
34072
|
.fd-shellbar::after,
|
|
@@ -32654,10 +34145,11 @@ places the element far left of the screen. so it is not visible.
|
|
|
32654
34145
|
padding: 0;
|
|
32655
34146
|
margin: 0;
|
|
32656
34147
|
border: 0;
|
|
32657
|
-
color: var(--sapShell_TextColor);
|
|
32658
34148
|
white-space: nowrap;
|
|
32659
34149
|
overflow: hidden;
|
|
32660
|
-
text-overflow: ellipsis
|
|
34150
|
+
text-overflow: ellipsis;
|
|
34151
|
+
margin-left: .5rem;
|
|
34152
|
+
color: var(--sapShell_TextColor)
|
|
32661
34153
|
}
|
|
32662
34154
|
.fd-shellbar__subtitle::after,
|
|
32663
34155
|
.fd-shellbar__subtitle::before,
|
|
@@ -32667,30 +34159,19 @@ places the element far left of the screen. so it is not visible.
|
|
|
32667
34159
|
box-sizing: inherit;
|
|
32668
34160
|
font-size: inherit
|
|
32669
34161
|
}
|
|
32670
|
-
.fd-shellbar__subtitle {
|
|
32671
|
-
font-size: var(--sapFontSmallSize);
|
|
32672
|
-
margin-left: .5rem
|
|
32673
|
-
}
|
|
32674
34162
|
.fd-shellbar__subtitle[dir=rtl],
|
|
32675
|
-
[dir=rtl]
|
|
32676
|
-
|
|
32677
|
-
|
|
32678
|
-
|
|
32679
|
-
|
|
32680
|
-
.fd-shellbar__product,
|
|
32681
|
-
.fd-shellbar__subtitle {
|
|
32682
|
-
display: inline-block;
|
|
32683
|
-
vertical-align: middle
|
|
34163
|
+
.fd-shellbar__title[dir=rtl],
|
|
34164
|
+
[dir=rtl] .fd-shellbar__subtitle,
|
|
34165
|
+
[dir=rtl] .fd-shellbar__title {
|
|
34166
|
+
margin-right: .5rem;
|
|
34167
|
+
margin-left: 0
|
|
32684
34168
|
}
|
|
32685
34169
|
.fd-shellbar__title {
|
|
32686
34170
|
font-weight: 700;
|
|
32687
|
-
padding-right: 0;
|
|
32688
34171
|
vertical-align: middle
|
|
32689
34172
|
}
|
|
32690
|
-
.fd-
|
|
32691
|
-
|
|
32692
|
-
padding-right: .5rem;
|
|
32693
|
-
padding-left: 0
|
|
34173
|
+
.fd-shellbar__subtitle {
|
|
34174
|
+
font-size: var(--sapFontSmallSize)
|
|
32694
34175
|
}
|
|
32695
34176
|
.fd-shellbar__logo {
|
|
32696
34177
|
font-size: var(--sapFontSize);
|
|
@@ -32703,8 +34184,6 @@ places the element far left of the screen. so it is not visible.
|
|
|
32703
34184
|
padding: 0;
|
|
32704
34185
|
margin: 0;
|
|
32705
34186
|
border: 0;
|
|
32706
|
-
padding-left: 0;
|
|
32707
|
-
margin-right: .5rem;
|
|
32708
34187
|
max-height: 2rem;
|
|
32709
34188
|
background-repeat: no-repeat;
|
|
32710
34189
|
background-size: contain
|
|
@@ -32715,12 +34194,6 @@ places the element far left of the screen. so it is not visible.
|
|
|
32715
34194
|
box-sizing: inherit;
|
|
32716
34195
|
font-size: inherit
|
|
32717
34196
|
}
|
|
32718
|
-
.fd-shellbar__logo[dir=rtl],
|
|
32719
|
-
[dir=rtl] .fd-shellbar__logo {
|
|
32720
|
-
padding-right: 0;
|
|
32721
|
-
margin-right: 0;
|
|
32722
|
-
margin-left: .5rem
|
|
32723
|
-
}
|
|
32724
34197
|
.fd-shellbar__logo > * {
|
|
32725
34198
|
line-height: 0;
|
|
32726
34199
|
max-height: 2.5rem;
|
|
@@ -32743,8 +34216,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
32743
34216
|
padding: 0;
|
|
32744
34217
|
margin: 0;
|
|
32745
34218
|
border: 0;
|
|
32746
|
-
|
|
32747
|
-
padding-left: .5rem
|
|
34219
|
+
margin-left: .5rem
|
|
32748
34220
|
}
|
|
32749
34221
|
.fd-shellbar__action::after,
|
|
32750
34222
|
.fd-shellbar__action::before {
|
|
@@ -32754,134 +34226,106 @@ places the element far left of the screen. so it is not visible.
|
|
|
32754
34226
|
}
|
|
32755
34227
|
.fd-shellbar__action[dir=rtl],
|
|
32756
34228
|
[dir=rtl] .fd-shellbar__action {
|
|
32757
|
-
|
|
32758
|
-
|
|
34229
|
+
margin-right: .5rem;
|
|
34230
|
+
margin-left: 0
|
|
32759
34231
|
}
|
|
32760
34232
|
.fd-shellbar__action > * {
|
|
32761
34233
|
vertical-align: middle
|
|
32762
34234
|
}
|
|
32763
|
-
.fd-shellbar__action .fd-shellbar__counter--overflowed {
|
|
32764
|
-
position: absolute;
|
|
32765
|
-
right: .25rem;
|
|
32766
|
-
top: -.25rem
|
|
32767
|
-
}
|
|
32768
|
-
.fd-shellbar__action .fd-shellbar__counter--notification {
|
|
32769
|
-
max-width: 2.5rem;
|
|
32770
|
-
text-overflow: ellipsis;
|
|
32771
|
-
white-space: nowrap;
|
|
32772
|
-
position: absolute;
|
|
32773
|
-
background: var(--sapContent_BadgeBackground);
|
|
32774
|
-
border: var(--sapContent_BadgeBackground);
|
|
32775
|
-
color: var(--sapShell_TextColor);
|
|
32776
|
-
line-height: .8;
|
|
32777
|
-
max-height: 1rem;
|
|
32778
|
-
overflow: hidden;
|
|
32779
|
-
right: -.25rem;
|
|
32780
|
-
top: -.25rem;
|
|
32781
|
-
-webkit-transform: none;
|
|
32782
|
-
transform: none
|
|
32783
|
-
}
|
|
32784
|
-
.fd-shellbar__action .fd-shellbar__counter--notification[dir=rtl],
|
|
32785
|
-
[dir=rtl] .fd-shellbar__action .fd-shellbar__counter--notification {
|
|
32786
|
-
-webkit-transform: none;
|
|
32787
|
-
transform: none;
|
|
32788
|
-
right: initial;
|
|
32789
|
-
left: -.25rem
|
|
32790
|
-
}
|
|
32791
|
-
.fd-shellbar__action .fd-shellbar__input-group__addon {
|
|
32792
|
-
background-color: transparent
|
|
32793
|
-
}
|
|
32794
|
-
.fd-shellbar__action .fd-shellbar__input-group__addon .fd-shellbar__button {
|
|
32795
|
-
border-radius: 0
|
|
32796
|
-
}
|
|
32797
34235
|
.fd-shellbar__action .fd-shellbar__input-group {
|
|
32798
|
-
background-color:
|
|
34236
|
+
background-color: var(--fdShellbar_Input_Background);
|
|
34237
|
+
border: var(--fdShellbar_Input_Border);
|
|
34238
|
+
border-radius: var(--fdShellbar_Input_Border_Radius);
|
|
32799
34239
|
cursor: text
|
|
32800
34240
|
}
|
|
34241
|
+
.fd-shellbar__action .fd-shellbar__input-group.is-hover,
|
|
32801
34242
|
.fd-shellbar__action .fd-shellbar__input-group:hover {
|
|
32802
|
-
border-color: var(--sapField_BorderColor)
|
|
34243
|
+
border-color: var(--sapField_BorderColor);
|
|
34244
|
+
-webkit-box-shadow: var(--fdShellbar_Button_Hover_Shadow);
|
|
34245
|
+
box-shadow: var(--fdShellbar_Button_Hover_Shadow)
|
|
32803
34246
|
}
|
|
32804
|
-
.fd-shellbar__action .fd-shellbar__input-group
|
|
34247
|
+
.fd-shellbar__action .fd-shellbar__input-group-input {
|
|
32805
34248
|
border: none;
|
|
32806
|
-
color: var(--
|
|
32807
|
-
|
|
32808
|
-
.fd-shellbar__action .fd-shellbar__input-group .fd-shellbar__input-group__input:hover {
|
|
32809
|
-
background-color: var(--sapShell_Hover_Background)
|
|
32810
|
-
}
|
|
32811
|
-
.fd-shellbar__popover__body--right::after,
|
|
32812
|
-
.fd-shellbar__popover__body--right::before {
|
|
32813
|
-
right: 14px
|
|
32814
|
-
}
|
|
32815
|
-
.fd-shellbar .fd-button.fd-shellbar__button {
|
|
32816
|
-
position: relative;
|
|
32817
|
-
border-color: transparent;
|
|
32818
|
-
background: 0 0;
|
|
32819
|
-
color: var(--sapShell_InteractiveTextColor);
|
|
32820
|
-
overflow: visible;
|
|
32821
|
-
padding: 0
|
|
32822
|
-
}
|
|
32823
|
-
.fd-shellbar .fd-button.fd-shellbar__button.is-focus,
|
|
32824
|
-
.fd-shellbar .fd-button.fd-shellbar__button:focus {
|
|
32825
|
-
z-index: 5;
|
|
32826
|
-
outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
|
|
32827
|
-
outline-offset: -.1875rem;
|
|
32828
|
-
outline-color: var(--sapContent_ContrastFocusColor)
|
|
34249
|
+
color: var(--fdShellbar_Input_Color);
|
|
34250
|
+
position: relative
|
|
32829
34251
|
}
|
|
32830
|
-
.fd-
|
|
32831
|
-
.fd-
|
|
32832
|
-
|
|
34252
|
+
.fd-shellbar__action .fd-shellbar__input-group-input.is-hover,
|
|
34253
|
+
.fd-shellbar__action .fd-shellbar__input-group-input.is-hover + .fd-shellbar__input-group-addon,
|
|
34254
|
+
.fd-shellbar__action .fd-shellbar__input-group-input:hover,
|
|
34255
|
+
.fd-shellbar__action .fd-shellbar__input-group-input:hover + .fd-shellbar__input-group-addon {
|
|
34256
|
+
background: var(--sapShell_Hover_Background)!important
|
|
32833
34257
|
}
|
|
32834
|
-
.fd-
|
|
32835
|
-
|
|
32836
|
-
|
|
34258
|
+
.fd-shellbar__action .fd-shellbar__input-group-input::-webkit-input-placeholder {
|
|
34259
|
+
color: var(--fdShellbar_Input_Placeholder_Color);
|
|
34260
|
+
font-style: italic
|
|
32837
34261
|
}
|
|
32838
|
-
.fd-
|
|
32839
|
-
|
|
32840
|
-
|
|
34262
|
+
.fd-shellbar__action .fd-shellbar__input-group-input::-moz-placeholder {
|
|
34263
|
+
color: var(--fdShellbar_Input_Placeholder_Color);
|
|
34264
|
+
font-style: italic
|
|
32841
34265
|
}
|
|
32842
|
-
.fd-
|
|
32843
|
-
|
|
32844
|
-
|
|
34266
|
+
.fd-shellbar__action .fd-shellbar__input-group-input:-ms-input-placeholder {
|
|
34267
|
+
color: var(--fdShellbar_Input_Placeholder_Color);
|
|
34268
|
+
font-style: italic
|
|
32845
34269
|
}
|
|
32846
|
-
.fd-
|
|
32847
|
-
|
|
32848
|
-
|
|
32849
|
-
.fd-shellbar .fd-button.fd-shellbar__button:hover.is-disabled,
|
|
32850
|
-
.fd-shellbar .fd-button.fd-shellbar__button:hover:disabled,
|
|
32851
|
-
.fd-shellbar .fd-button.fd-shellbar__button:hover[aria-disabled=true] {
|
|
32852
|
-
background: 0 0
|
|
34270
|
+
.fd-shellbar__action .fd-shellbar__input-group-input::-ms-input-placeholder {
|
|
34271
|
+
color: var(--fdShellbar_Input_Placeholder_Color);
|
|
34272
|
+
font-style: italic
|
|
32853
34273
|
}
|
|
32854
|
-
.fd-
|
|
32855
|
-
|
|
34274
|
+
.fd-shellbar__action .fd-shellbar__input-group-input::placeholder {
|
|
34275
|
+
color: var(--fdShellbar_Input_Placeholder_Color);
|
|
34276
|
+
font-style: italic
|
|
32856
34277
|
}
|
|
32857
|
-
.fd-
|
|
32858
|
-
|
|
32859
|
-
margin-left: 0
|
|
34278
|
+
.fd-shellbar__action .fd-shellbar__input-group-input--select {
|
|
34279
|
+
font-style: normal
|
|
32860
34280
|
}
|
|
32861
|
-
.fd-
|
|
32862
|
-
|
|
34281
|
+
.fd-shellbar__action .fd-shellbar__input-group-addon .fd-shellbar__button {
|
|
34282
|
+
height: var(--fdShellbar_Input_Addon_Dimension);
|
|
34283
|
+
min-width: var(--fdShellbar_Input_Addon_Dimension);
|
|
34284
|
+
border-radius: var(--fdShellbar_Input_Border_Radius)
|
|
32863
34285
|
}
|
|
32864
|
-
.fd-shellbar .fd-shellbar__button
|
|
34286
|
+
.fd-shellbar .fd-shellbar__button {
|
|
34287
|
+
background: 0 0;
|
|
34288
|
+
border: var(--fdShellbar_Button_Border);
|
|
32865
34289
|
color: var(--sapShell_InteractiveTextColor)
|
|
32866
34290
|
}
|
|
32867
|
-
.fd-shellbar .fd-
|
|
32868
|
-
|
|
34291
|
+
.fd-shellbar .fd-shellbar__button:not(.fd-shellbar__button--menu) {
|
|
34292
|
+
padding: 0
|
|
32869
34293
|
}
|
|
32870
|
-
.fd-shellbar .fd-
|
|
34294
|
+
.fd-shellbar .fd-shellbar__button.is-hover,
|
|
34295
|
+
.fd-shellbar .fd-shellbar__button:hover {
|
|
32871
34296
|
background: var(--sapShell_Hover_Background);
|
|
32872
|
-
|
|
34297
|
+
-webkit-box-shadow: var(--fdShellbar_Button_Hover_Shadow);
|
|
34298
|
+
box-shadow: var(--fdShellbar_Button_Hover_Shadow)
|
|
34299
|
+
}
|
|
34300
|
+
.fd-shellbar .fd-shellbar__button.is-hover.is-disabled,
|
|
34301
|
+
.fd-shellbar .fd-shellbar__button.is-hover:disabled,
|
|
34302
|
+
.fd-shellbar .fd-shellbar__button.is-hover[aria-disabled=true],
|
|
34303
|
+
.fd-shellbar .fd-shellbar__button:hover.is-disabled,
|
|
34304
|
+
.fd-shellbar .fd-shellbar__button:hover:disabled,
|
|
34305
|
+
.fd-shellbar .fd-shellbar__button:hover[aria-disabled=true] {
|
|
34306
|
+
background: 0 0
|
|
32873
34307
|
}
|
|
32874
|
-
.fd-shellbar .fd-
|
|
32875
|
-
.fd-shellbar .fd-
|
|
34308
|
+
.fd-shellbar .fd-shellbar__button.is-active,
|
|
34309
|
+
.fd-shellbar .fd-shellbar__button:active {
|
|
32876
34310
|
background: var(--sapShell_Active_Background);
|
|
34311
|
+
-webkit-box-shadow: var(--fdShellbar_Button_Active_Shadow);
|
|
34312
|
+
box-shadow: var(--fdShellbar_Button_Active_Shadow);
|
|
32877
34313
|
color: var(--sapShell_Active_TextColor)
|
|
32878
34314
|
}
|
|
32879
|
-
.fd-shellbar .fd-
|
|
32880
|
-
|
|
32881
|
-
border-color: var(--sapContent_ContrastFocusColor)
|
|
34315
|
+
.fd-shellbar .fd-shellbar__button--menu {
|
|
34316
|
+
margin-left: .5rem
|
|
32882
34317
|
}
|
|
32883
|
-
.fd-shellbar--
|
|
32884
|
-
|
|
34318
|
+
.fd-shellbar .fd-shellbar__button--menu[dir=rtl],
|
|
34319
|
+
[dir=rtl] .fd-shellbar .fd-shellbar__button--menu {
|
|
34320
|
+
margin-right: .5rem;
|
|
34321
|
+
margin-left: 0
|
|
34322
|
+
}
|
|
34323
|
+
.fd-shellbar .fd-shellbar__button--menu .fd-shellbar__title {
|
|
34324
|
+
margin: 0
|
|
34325
|
+
}
|
|
34326
|
+
.fd-shellbar--s .fd-shellbar__subtitle,
|
|
34327
|
+
.fd-shellbar--s .fd-shellbar__title {
|
|
34328
|
+
display: none
|
|
32885
34329
|
}
|
|
32886
34330
|
.fd-shellbar--s .fd-shellbar__action--mobile {
|
|
32887
34331
|
display: inline-block
|
|
@@ -32889,12 +34333,8 @@ places the element far left of the screen. so it is not visible.
|
|
|
32889
34333
|
.fd-shellbar--s .fd-shellbar__action--desktop {
|
|
32890
34334
|
display: none
|
|
32891
34335
|
}
|
|
32892
|
-
.fd-shellbar--s .fd-
|
|
32893
|
-
|
|
32894
|
-
display: none
|
|
32895
|
-
}
|
|
32896
|
-
.fd-shellbar--s .fd-button.fd-button--menu.fd-shellbar__button--menu {
|
|
32897
|
-
padding: 0
|
|
34336
|
+
.fd-shellbar--s .fd-shellbar__button--menu .sap-icon--megamenu {
|
|
34337
|
+
margin: 0!important
|
|
32898
34338
|
}
|
|
32899
34339
|
.fd-shellbar--l,
|
|
32900
34340
|
.fd-shellbar--m {
|
|
@@ -32903,6 +34343,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
32903
34343
|
.fd-shellbar--xl {
|
|
32904
34344
|
padding: 0 3rem
|
|
32905
34345
|
}
|
|
34346
|
+
.fd-shellbar--l .fd-shellbar__subtitle,
|
|
34347
|
+
.fd-shellbar--l .fd-shellbar__title,
|
|
34348
|
+
.fd-shellbar--m .fd-shellbar__subtitle,
|
|
34349
|
+
.fd-shellbar--m .fd-shellbar__title,
|
|
34350
|
+
.fd-shellbar--xl .fd-shellbar__subtitle,
|
|
34351
|
+
.fd-shellbar--xl .fd-shellbar__title {
|
|
34352
|
+
display: inline-block
|
|
34353
|
+
}
|
|
32906
34354
|
.fd-shellbar--l .fd-shellbar__action--mobile,
|
|
32907
34355
|
.fd-shellbar--m .fd-shellbar__action--mobile,
|
|
32908
34356
|
.fd-shellbar--xl .fd-shellbar__action--mobile {
|
|
@@ -32913,17 +34361,6 @@ places the element far left of the screen. so it is not visible.
|
|
|
32913
34361
|
.fd-shellbar--xl .fd-shellbar__action--desktop {
|
|
32914
34362
|
display: inline-block
|
|
32915
34363
|
}
|
|
32916
|
-
.fd-shellbar--l .fd-shellbar__subtitle,
|
|
32917
|
-
.fd-shellbar--l .fd-shellbar__title,
|
|
32918
|
-
.fd-shellbar--m .fd-shellbar__subtitle,
|
|
32919
|
-
.fd-shellbar--m .fd-shellbar__title,
|
|
32920
|
-
.fd-shellbar--xl .fd-shellbar__subtitle,
|
|
32921
|
-
.fd-shellbar--xl .fd-shellbar__title {
|
|
32922
|
-
display: inline-block
|
|
32923
|
-
}
|
|
32924
|
-
.fd-shellbar__side-nav-control {
|
|
32925
|
-
margin: 0 .25rem
|
|
32926
|
-
}
|
|
32927
34364
|
.fd-nested-list {
|
|
32928
34365
|
font-size: var(--sapFontSize);
|
|
32929
34366
|
line-height: var(--sapContent_LineHeight);
|
|
@@ -35838,7 +37275,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
35838
37275
|
-ms-flex-align: center;
|
|
35839
37276
|
align-items: center;
|
|
35840
37277
|
cursor: pointer;
|
|
35841
|
-
padding:
|
|
37278
|
+
padding: var(--fdSwitch_Padding)
|
|
35842
37279
|
}
|
|
35843
37280
|
.fd-switch::after,
|
|
35844
37281
|
.fd-switch::before {
|
|
@@ -35866,8 +37303,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
35866
37303
|
}
|
|
35867
37304
|
.fd-switch__control {
|
|
35868
37305
|
display: inline-block;
|
|
35869
|
-
position: relative
|
|
35870
|
-
padding: .375rem 0
|
|
37306
|
+
position: relative
|
|
35871
37307
|
}
|
|
35872
37308
|
.fd-switch__slider {
|
|
35873
37309
|
font-size: var(--sapFontSize);
|
|
@@ -35883,12 +37319,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
35883
37319
|
background-color: var(--sapButton_Track_Background);
|
|
35884
37320
|
-webkit-box-sizing: content-box;
|
|
35885
37321
|
box-sizing: content-box;
|
|
35886
|
-
width:
|
|
35887
|
-
height:
|
|
35888
|
-
border: var(--
|
|
37322
|
+
width: var(--fdSwitch_Width);
|
|
37323
|
+
height: var(--fdSwitch_Height);
|
|
37324
|
+
border: var(--fdSwitch_Border);
|
|
35889
37325
|
-webkit-transition: all .1s;
|
|
35890
37326
|
transition: all .1s;
|
|
35891
|
-
border-radius:
|
|
37327
|
+
border-radius: var(--fdSwitch_Border_Radius);
|
|
37328
|
+
-webkit-box-shadow: var(--fdSwitch_Shadow);
|
|
37329
|
+
box-shadow: var(--fdSwitch_Shadow)
|
|
35892
37330
|
}
|
|
35893
37331
|
.fd-switch__slider::after,
|
|
35894
37332
|
.fd-switch__slider::before {
|
|
@@ -35918,8 +37356,6 @@ places the element far left of the screen. so it is not visible.
|
|
|
35918
37356
|
-ms-flex-align: center;
|
|
35919
37357
|
align-items: center;
|
|
35920
37358
|
top: 50%;
|
|
35921
|
-
-webkit-transform: translate(-1.1875rem,-50%);
|
|
35922
|
-
transform: translate(-1.1875rem,-50%);
|
|
35923
37359
|
-webkit-transition: all .1s;
|
|
35924
37360
|
transition: all .1s;
|
|
35925
37361
|
min-width: 4.25rem
|
|
@@ -35930,6 +37366,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
35930
37366
|
box-sizing: inherit;
|
|
35931
37367
|
font-size: inherit
|
|
35932
37368
|
}
|
|
37369
|
+
.fd-switch .fd-switch__track {
|
|
37370
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1),-50%);
|
|
37371
|
+
transform: translate(calc(var(--fdSwitch_Handle_Offset) * -1),-50%)
|
|
37372
|
+
}
|
|
37373
|
+
.fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37374
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1),-50%);
|
|
37375
|
+
transform: translate(calc(var(--fdSwitch_Active_Handle_Offset) * -1),-50%)
|
|
37376
|
+
}
|
|
35933
37377
|
.fd-switch__text {
|
|
35934
37378
|
font-size: var(--sapFontSize);
|
|
35935
37379
|
line-height: var(--sapContent_LineHeight);
|
|
@@ -35970,6 +37414,9 @@ places the element far left of the screen. so it is not visible.
|
|
|
35970
37414
|
margin-left: .5rem;
|
|
35971
37415
|
margin-right: 0
|
|
35972
37416
|
}
|
|
37417
|
+
.fd-switch__icon {
|
|
37418
|
+
position: var(--fdSwitch_Semantic_Icon_Position)
|
|
37419
|
+
}
|
|
35973
37420
|
.fd-switch__icon [class*=sap-icon],
|
|
35974
37421
|
.fd-switch__icon[class*=sap-icon] {
|
|
35975
37422
|
display: -webkit-box;
|
|
@@ -35983,7 +37430,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
35983
37430
|
align-items: center;
|
|
35984
37431
|
width: 1.75rem;
|
|
35985
37432
|
min-width: 1.75rem;
|
|
35986
|
-
font-size:
|
|
37433
|
+
font-size: var(--fdSwitch_Icon_Size);
|
|
35987
37434
|
line-height: 1.375rem;
|
|
35988
37435
|
-webkit-transition: visibility 0s ease 30ms,opacity 0s ease 30ms;
|
|
35989
37436
|
transition: visibility 0s ease 30ms,opacity 0s ease 30ms
|
|
@@ -35991,12 +37438,12 @@ places the element far left of the screen. so it is not visible.
|
|
|
35991
37438
|
.fd-switch__icon--off [class*=sap-icon],
|
|
35992
37439
|
.fd-switch__icon--off[class*=sap-icon] {
|
|
35993
37440
|
color: var(--sapNegativeElementColor);
|
|
35994
|
-
margin:
|
|
37441
|
+
margin: var(--fdSwitch_Icon_Error_Margin)
|
|
35995
37442
|
}
|
|
35996
37443
|
.fd-switch__icon--on [class*=sap-icon],
|
|
35997
37444
|
.fd-switch__icon--on[class*=sap-icon] {
|
|
35998
37445
|
color: var(--sapPositiveElementColor);
|
|
35999
|
-
margin:
|
|
37446
|
+
margin: var(--fdSwitch_Icon_Success_Margin);
|
|
36000
37447
|
visibility: hidden;
|
|
36001
37448
|
opacity: 0
|
|
36002
37449
|
}
|
|
@@ -36011,13 +37458,13 @@ places the element far left of the screen. so it is not visible.
|
|
|
36011
37458
|
padding: 0;
|
|
36012
37459
|
margin: 0;
|
|
36013
37460
|
border: 0;
|
|
36014
|
-
-webkit-box-sizing:
|
|
36015
|
-
box-sizing:
|
|
36016
|
-
border: var(--fdSwitch_Handle_Border_Width) solid var(--
|
|
36017
|
-
background-color: var(--
|
|
36018
|
-
min-width:
|
|
36019
|
-
min-height:
|
|
36020
|
-
border-radius:
|
|
37461
|
+
-webkit-box-sizing: var(--fdSwitch_Slider_Box_Sizing);
|
|
37462
|
+
box-sizing: var(--fdSwitch_Slider_Box_Sizing);
|
|
37463
|
+
border: var(--fdSwitch_Handle_Border_Width) solid var(--fdSwitch_Handle_Border_Color);
|
|
37464
|
+
background-color: var(--fdSwitch_Handle_Background);
|
|
37465
|
+
min-width: var(--fdSwitch_Handle_Width);
|
|
37466
|
+
min-height: var(--fdSwitch_Handle_Height);
|
|
37467
|
+
border-radius: var(--fdSwitch_Handle_Border_Radius);
|
|
36021
37468
|
background-clip: padding-box
|
|
36022
37469
|
}
|
|
36023
37470
|
.fd-switch__handle::after,
|
|
@@ -36062,31 +37509,35 @@ places the element far left of the screen. so it is not visible.
|
|
|
36062
37509
|
pointer-events: none;
|
|
36063
37510
|
opacity: var(--sapContent_DisabledOpacity)
|
|
36064
37511
|
}
|
|
37512
|
+
.fd-switch__input:focus + .fd-switch__slider {
|
|
37513
|
+
outline-offset: .125rem;
|
|
37514
|
+
outline-width: .125rem;
|
|
37515
|
+
outline-style: solid;
|
|
37516
|
+
outline-color: var(--fdSwitch_Focus_Outline_Color)
|
|
37517
|
+
}
|
|
36065
37518
|
.fd-switch__input:focus + .fd-switch__slider::before {
|
|
36066
37519
|
position: absolute;
|
|
36067
|
-
display:
|
|
37520
|
+
display: var(--fdSwitch_Focus_Border_Display);
|
|
36068
37521
|
outline-offset: -.0625rem;
|
|
36069
37522
|
border-width: var(--sapContent_FocusWidth);
|
|
36070
37523
|
border-color: var(--sapContent_FocusColor);
|
|
36071
37524
|
border-style: var(--sapContent_FocusStyle);
|
|
36072
37525
|
content: "";
|
|
36073
|
-
top:
|
|
36074
|
-
bottom:
|
|
37526
|
+
top: var(--fdSwitch_Focus_Outline_Vertical_Offset);
|
|
37527
|
+
bottom: var(--fdSwitch_Focus_Outline_Vertical_Offset);
|
|
36075
37528
|
left: 0;
|
|
36076
37529
|
right: 0
|
|
36077
37530
|
}
|
|
36078
37531
|
.fd-switch__input:checked + .fd-switch__slider {
|
|
36079
37532
|
background-color: var(--sapButton_Track_Selected_Background);
|
|
36080
|
-
border-color: var(--sapButton_Selected_BorderColor)
|
|
37533
|
+
border-color: var(--sapButton_Selected_BorderColor);
|
|
37534
|
+
-webkit-box-shadow: var(--fdSwitch_Active_Shadow);
|
|
37535
|
+
box-shadow: var(--fdSwitch_Active_Shadow)
|
|
36081
37536
|
}
|
|
36082
37537
|
.fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
|
|
36083
37538
|
background-color: var(--sapButton_Selected_Background);
|
|
36084
37539
|
border-color: var(--sapButton_Selected_BorderColor)
|
|
36085
37540
|
}
|
|
36086
|
-
.fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
36087
|
-
-webkit-transform: translate(.0625rem,-50%);
|
|
36088
|
-
transform: translate(.0625rem,-50%)
|
|
36089
|
-
}
|
|
36090
37541
|
.fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off [class*=sap-icon],
|
|
36091
37542
|
.fd-switch__input:checked + .fd-switch__slider .fd-switch__icon--off[class*=sap-icon] {
|
|
36092
37543
|
opacity: 0;
|
|
@@ -36099,29 +37550,29 @@ places the element far left of the screen. so it is not visible.
|
|
|
36099
37550
|
}
|
|
36100
37551
|
.fd-switch[dir=rtl] .fd-switch__icon--on,
|
|
36101
37552
|
[dir=rtl] .fd-switch .fd-switch__icon--on {
|
|
36102
|
-
margin:
|
|
37553
|
+
margin: var(--fdSwitch_Icon_Error_Margin)
|
|
36103
37554
|
}
|
|
36104
37555
|
.fd-switch[dir=rtl] .fd-switch__icon--off,
|
|
36105
37556
|
[dir=rtl] .fd-switch .fd-switch__icon--off {
|
|
36106
|
-
margin:
|
|
37557
|
+
margin: var(--fdSwitch_Icon_Success_Margin)
|
|
36107
37558
|
}
|
|
36108
37559
|
.fd-switch[dir=rtl] .fd-switch__track,
|
|
36109
37560
|
[dir=rtl] .fd-switch .fd-switch__track {
|
|
36110
|
-
-webkit-transform: translate(
|
|
36111
|
-
transform: translate(
|
|
37561
|
+
-webkit-transform: translate(var(--fdSwitch_Handle_Offset),-50%);
|
|
37562
|
+
transform: translate(var(--fdSwitch_Handle_Offset),-50%)
|
|
36112
37563
|
}
|
|
36113
37564
|
.fd-switch[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
|
|
36114
37565
|
[dir=rtl] .fd-switch .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
36115
|
-
-webkit-transform: translate(
|
|
36116
|
-
transform: translate(
|
|
37566
|
+
-webkit-transform: translate(var(--fdSwitch_Active_Handle_Offset),-50%);
|
|
37567
|
+
transform: translate(var(--fdSwitch_Active_Handle_Offset),-50%)
|
|
36117
37568
|
}
|
|
36118
37569
|
.fd-switch.is-hover .fd-switch__slider,
|
|
36119
37570
|
.fd-switch:hover .fd-switch__slider {
|
|
36120
|
-
border-color: var(--
|
|
37571
|
+
border-color: var(--fdSwitch_Handle_Hover_Border_Color)
|
|
36121
37572
|
}
|
|
36122
37573
|
.fd-switch.is-hover .fd-switch__handle,
|
|
36123
37574
|
.fd-switch:hover .fd-switch__handle {
|
|
36124
|
-
border-color: var(--
|
|
37575
|
+
border-color: var(--fdSwitch_Handle_Hover_Border_Color);
|
|
36125
37576
|
background-color: var(--sapButton_Hover_Background)
|
|
36126
37577
|
}
|
|
36127
37578
|
.fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider,
|
|
@@ -36130,66 +37581,91 @@ places the element far left of the screen. so it is not visible.
|
|
|
36130
37581
|
}
|
|
36131
37582
|
.fd-switch.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle,
|
|
36132
37583
|
.fd-switch:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
|
|
36133
|
-
border-color: var(--
|
|
37584
|
+
border-color: var(--fdSwitch_Handle_Selected_Hover_Border_Color);
|
|
36134
37585
|
background-color: var(--sapButton_Selected_Hover_Background)
|
|
36135
37586
|
}
|
|
36136
37587
|
.fd-switch--compact {
|
|
36137
|
-
padding:
|
|
37588
|
+
padding: var(--fdSwitch_Compact_Padding)
|
|
36138
37589
|
}
|
|
36139
37590
|
.fd-switch--compact .fd-switch__handle {
|
|
36140
|
-
min-width:
|
|
36141
|
-
min-height:
|
|
37591
|
+
min-width: var(--fdSwitch_Compact_Handle_Width);
|
|
37592
|
+
min-height: var(--fdSwitch_Compact_Handle_Height)
|
|
37593
|
+
}
|
|
37594
|
+
.fd-switch--compact .fd-switch__track {
|
|
37595
|
+
min-width: 3.125rem
|
|
36142
37596
|
}
|
|
36143
37597
|
.fd-switch--compact .fd-switch__slider {
|
|
36144
|
-
width:
|
|
36145
|
-
height:
|
|
37598
|
+
width: var(--fdSwitch_Compact_Width);
|
|
37599
|
+
height: var(--fdSwitch_Compact_Height)
|
|
36146
37600
|
}
|
|
36147
37601
|
.fd-switch--compact .fd-switch__track {
|
|
36148
37602
|
-webkit-transform: translate(-.8125rem,-50%);
|
|
36149
|
-
transform: translate(-.8125rem,-50%)
|
|
36150
|
-
|
|
37603
|
+
transform: translate(-.8125rem,-50%)
|
|
37604
|
+
}
|
|
37605
|
+
.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37606
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1),-50%);
|
|
37607
|
+
transform: translate(calc(var(--fdSwitch_Compact_Active_Handle_Offset) * -1),-50%)
|
|
36151
37608
|
}
|
|
36152
37609
|
.fd-switch--compact[dir=rtl] .fd-switch__track,
|
|
36153
37610
|
[dir=rtl] .fd-switch--compact .fd-switch__track {
|
|
36154
37611
|
-webkit-transform: translate(.8125rem,-50%);
|
|
36155
37612
|
transform: translate(.8125rem,-50%)
|
|
36156
37613
|
}
|
|
37614
|
+
.fd-switch--compact[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
|
|
37615
|
+
[dir=rtl] .fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37616
|
+
-webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl),-50%);
|
|
37617
|
+
transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset_Rtl),-50%)
|
|
37618
|
+
}
|
|
36157
37619
|
.fd-switch--semantic .fd-switch__slider {
|
|
36158
|
-
width:
|
|
36159
|
-
height:
|
|
37620
|
+
width: var(--fdSwitch_Semantic_Width);
|
|
37621
|
+
height: var(--fdSwitch_Semantic_Height);
|
|
36160
37622
|
border-color: var(--sapErrorBorderColor);
|
|
36161
|
-
background-color: var(--
|
|
37623
|
+
background-color: var(--fdSwitch_Semantic_Error_Background_Color);
|
|
37624
|
+
-webkit-box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow);
|
|
37625
|
+
box-shadow: var(--fdSwitch_Semantic_Error_Box_Shadow)
|
|
36162
37626
|
}
|
|
36163
37627
|
.fd-switch--semantic .fd-switch__track {
|
|
36164
|
-
-webkit-transform: translate(-1
|
|
36165
|
-
transform: translate(-1
|
|
37628
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1),-50%);
|
|
37629
|
+
transform: translate(calc(var(--fdSwitch_Semantic_Handle_Offset) * -1),-50%)
|
|
37630
|
+
}
|
|
37631
|
+
.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37632
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1),-50%);
|
|
37633
|
+
transform: translate(calc(var(--fdSwitch_Semantic_Handle_Active_Offset) * -1),-50%)
|
|
36166
37634
|
}
|
|
36167
37635
|
.fd-switch--semantic .fd-switch__handle {
|
|
36168
|
-
background-color: var(--
|
|
36169
|
-
|
|
37636
|
+
background-color: var(--fdSwitch_Handle_Background);
|
|
37637
|
+
background-color: var(--fdSwitch_Semantic_Error_Handle_Background_Color);
|
|
37638
|
+
border-color: var(--fdSwitch_Semantic_Error_Handle_Border_Color)
|
|
36170
37639
|
}
|
|
36171
37640
|
.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider {
|
|
36172
37641
|
background-color: var(--fdSwitch_Semantic_Success_Background_Color);
|
|
36173
|
-
border-color: var(--sapSuccessBorderColor)
|
|
36174
|
-
|
|
36175
|
-
|
|
36176
|
-
-webkit-transform: translate(-.0625rem,-50%);
|
|
36177
|
-
transform: translate(-.0625rem,-50%)
|
|
37642
|
+
border-color: var(--sapSuccessBorderColor);
|
|
37643
|
+
-webkit-box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow);
|
|
37644
|
+
box-shadow: var(--fdSwitch_Semantic_Success_Box_Shadow)
|
|
36178
37645
|
}
|
|
36179
37646
|
.fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
|
|
36180
|
-
border-color: var(--
|
|
36181
|
-
background-color: var(--
|
|
37647
|
+
border-color: var(--fdSwitch_Semantic_Success_Handle_Border_Color);
|
|
37648
|
+
background-color: var(--fdSwitch_Handle_Background);
|
|
37649
|
+
background-color: var(--fdSwitch_Semantic_Success_Handle_Background_Color)
|
|
36182
37650
|
}
|
|
36183
37651
|
.fd-switch--semantic.fd-switch--compact {
|
|
36184
37652
|
padding: .1875rem 0
|
|
36185
37653
|
}
|
|
36186
37654
|
.fd-switch--semantic.fd-switch--compact .fd-switch__slider {
|
|
36187
|
-
width:
|
|
36188
|
-
height:
|
|
37655
|
+
width: var(--fdSwitch_Compact_Semantic_Width);
|
|
37656
|
+
height: var(--fdSwitch_Compact_Semantic_Height)
|
|
37657
|
+
}
|
|
37658
|
+
.fd-switch--semantic.fd-switch--compact .fd-switch__track {
|
|
37659
|
+
-webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset),-50%);
|
|
37660
|
+
transform: translate(var(--fdSwitch_Compact_Semantic_Handle_Offset),-50%)
|
|
37661
|
+
}
|
|
37662
|
+
.fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37663
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1),-50%);
|
|
37664
|
+
transform: translate(calc(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset) * -1),-50%)
|
|
36189
37665
|
}
|
|
36190
37666
|
.fd-switch--semantic.is-hover .fd-switch__icon,
|
|
36191
37667
|
.fd-switch--semantic:hover .fd-switch__icon {
|
|
36192
|
-
color: var(--
|
|
37668
|
+
color: var(--fdSwitch_Semantic_Icon_Error_Color)
|
|
36193
37669
|
}
|
|
36194
37670
|
.fd-switch--semantic.is-hover .fd-switch__slider,
|
|
36195
37671
|
.fd-switch--semantic:hover .fd-switch__slider {
|
|
@@ -36197,8 +37673,8 @@ places the element far left of the screen. so it is not visible.
|
|
|
36197
37673
|
}
|
|
36198
37674
|
.fd-switch--semantic.is-hover .fd-switch__handle,
|
|
36199
37675
|
.fd-switch--semantic:hover .fd-switch__handle {
|
|
36200
|
-
background-color: var(--
|
|
36201
|
-
border-color: var(--
|
|
37676
|
+
background-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Background_Color);
|
|
37677
|
+
border-color: var(--fdSwitch_Semantic_Error_Handle_Hover_Border_Color)
|
|
36202
37678
|
}
|
|
36203
37679
|
.fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider,
|
|
36204
37680
|
.fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider {
|
|
@@ -36208,21 +37684,31 @@ places the element far left of the screen. so it is not visible.
|
|
|
36208
37684
|
.fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle,
|
|
36209
37685
|
.fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__handle {
|
|
36210
37686
|
background-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Background_Color);
|
|
36211
|
-
border-color: var(--
|
|
37687
|
+
border-color: var(--fdSwitch_Semantic_Success_Handle_Hover_Border_Color)
|
|
36212
37688
|
}
|
|
36213
37689
|
.fd-switch--semantic.is-hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon,
|
|
36214
37690
|
.fd-switch--semantic:hover .fd-switch__input:checked + .fd-switch__slider .fd-switch__icon {
|
|
36215
|
-
color: var(--
|
|
37691
|
+
color: var(--fdSwitch_Semantic_Icon_Success_Color)
|
|
36216
37692
|
}
|
|
36217
37693
|
.fd-switch--semantic[dir=rtl] .fd-switch__track,
|
|
36218
37694
|
[dir=rtl] .fd-switch--semantic .fd-switch__track {
|
|
36219
|
-
-webkit-transform: translate(
|
|
36220
|
-
transform: translate(
|
|
37695
|
+
-webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Offset),-50%);
|
|
37696
|
+
transform: translate(var(--fdSwitch_Semantic_Handle_Offset),-50%)
|
|
36221
37697
|
}
|
|
36222
37698
|
.fd-switch--semantic[dir=rtl] .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
|
|
36223
37699
|
[dir=rtl] .fd-switch--semantic .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
36224
|
-
-webkit-transform: translate(
|
|
36225
|
-
transform: translate(
|
|
37700
|
+
-webkit-transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset),-50%);
|
|
37701
|
+
transform: translate(var(--fdSwitch_Semantic_Handle_Active_Offset),-50%)
|
|
37702
|
+
}
|
|
37703
|
+
.fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__track,
|
|
37704
|
+
[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__track {
|
|
37705
|
+
-webkit-transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1),-50%);
|
|
37706
|
+
transform: translate(calc(var(--fdSwitch_Compact_Semantic_Handle_Offset) * -1),-50%)
|
|
37707
|
+
}
|
|
37708
|
+
.fd-switch--semantic[dir=rtl].fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track,
|
|
37709
|
+
[dir=rtl] .fd-switch--semantic.fd-switch--compact .fd-switch__input:checked + .fd-switch__slider .fd-switch__track {
|
|
37710
|
+
-webkit-transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset),-50%);
|
|
37711
|
+
transform: translate(var(--fdSwitch_Compact_Semantic_Active_Handle_Offset),-50%)
|
|
36226
37712
|
}
|
|
36227
37713
|
/*!
|
|
36228
37714
|
.fd-table(--compact, --condensed, --no-horizontal-borders, --no-vertical-borders, --fixed, --hidden, --tree, --group)
|
|
@@ -36333,14 +37819,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
36333
37819
|
overflow: hidden;
|
|
36334
37820
|
text-overflow: ellipsis;
|
|
36335
37821
|
word-break: break-word;
|
|
36336
|
-
white-space: normal
|
|
37822
|
+
white-space: normal;
|
|
37823
|
+
text-shadow: var(--sapContent_TextShadow)
|
|
36337
37824
|
}
|
|
36338
37825
|
.fd-table__text--no-wrap {
|
|
36339
37826
|
white-space: nowrap
|
|
36340
37827
|
}
|
|
36341
37828
|
.fd-table__cell {
|
|
36342
37829
|
text-align: left;
|
|
36343
|
-
text-shadow: var(--sapContent_TextShadow);
|
|
36344
37830
|
height: 2.75rem;
|
|
36345
37831
|
padding: 0 .5rem;
|
|
36346
37832
|
color: inherit;
|
|
@@ -36558,15 +38044,13 @@ places the element far left of the screen. so it is not visible.
|
|
|
36558
38044
|
.fd-table__row--activable.is-active,
|
|
36559
38045
|
.fd-table__row--activable:active {
|
|
36560
38046
|
background-color: var(--sapList_Active_Background);
|
|
36561
|
-
color: var(--sapList_Active_TextColor)
|
|
36562
|
-
text-shadow: none
|
|
38047
|
+
color: var(--sapList_Active_TextColor)
|
|
36563
38048
|
}
|
|
36564
38049
|
.fd-table__cell--activable.is-active .fd-table__cell,
|
|
36565
38050
|
.fd-table__cell--activable:active .fd-table__cell,
|
|
36566
38051
|
.fd-table__row--activable.is-active .fd-table__cell,
|
|
36567
38052
|
.fd-table__row--activable:active .fd-table__cell {
|
|
36568
|
-
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36569
|
-
text-shadow: none
|
|
38053
|
+
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36570
38054
|
}
|
|
36571
38055
|
.fd-table__cell--activable.is-active .fd-table__cell.is-hover,
|
|
36572
38056
|
.fd-table__cell--activable.is-active .fd-table__cell:hover,
|
|
@@ -36578,6 +38062,12 @@ places the element far left of the screen. so it is not visible.
|
|
|
36578
38062
|
.fd-table__row--activable:active .fd-table__cell:hover {
|
|
36579
38063
|
background-color: var(--sapList_Active_Background)
|
|
36580
38064
|
}
|
|
38065
|
+
.fd-table__cell--activable.is-active .fd-table__text,
|
|
38066
|
+
.fd-table__cell--activable:active .fd-table__text,
|
|
38067
|
+
.fd-table__row--activable.is-active .fd-table__text,
|
|
38068
|
+
.fd-table__row--activable:active .fd-table__text {
|
|
38069
|
+
text-shadow: none
|
|
38070
|
+
}
|
|
36581
38071
|
.fd-table__cell--activable.is-active .fd-table__icon [class*=sap-icon],
|
|
36582
38072
|
.fd-table__cell--activable.is-active .fd-table__icon[class*=sap-icon],
|
|
36583
38073
|
.fd-table__cell--activable:active .fd-table__icon [class*=sap-icon],
|
|
@@ -36631,8 +38121,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
36631
38121
|
.fd-table__row--activable[aria-selected=true].is-active,
|
|
36632
38122
|
.fd-table__row--activable[aria-selected=true]:active {
|
|
36633
38123
|
background-color: var(--sapList_Active_Background);
|
|
36634
|
-
color: var(--sapList_Active_TextColor)
|
|
36635
|
-
text-shadow: none
|
|
38124
|
+
color: var(--sapList_Active_TextColor)
|
|
36636
38125
|
}
|
|
36637
38126
|
.fd-table__cell--activable.is-selected.is-active .fd-table__cell,
|
|
36638
38127
|
.fd-table__cell--activable.is-selected:active .fd-table__cell,
|
|
@@ -36642,8 +38131,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
36642
38131
|
.fd-table__row--activable.is-selected:active .fd-table__cell,
|
|
36643
38132
|
.fd-table__row--activable[aria-selected=true].is-active .fd-table__cell,
|
|
36644
38133
|
.fd-table__row--activable[aria-selected=true]:active .fd-table__cell {
|
|
36645
|
-
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36646
|
-
text-shadow: none
|
|
38134
|
+
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36647
38135
|
}
|
|
36648
38136
|
.fd-table__cell--activable.is-selected.is-active .fd-table__cell.is-hover,
|
|
36649
38137
|
.fd-table__cell--activable.is-selected.is-active .fd-table__cell:hover,
|
|
@@ -36663,6 +38151,16 @@ places the element far left of the screen. so it is not visible.
|
|
|
36663
38151
|
.fd-table__row--activable[aria-selected=true]:active .fd-table__cell:hover {
|
|
36664
38152
|
background-color: var(--sapList_Active_Background)
|
|
36665
38153
|
}
|
|
38154
|
+
.fd-table__cell--activable.is-selected.is-active .fd-table__text,
|
|
38155
|
+
.fd-table__cell--activable.is-selected:active .fd-table__text,
|
|
38156
|
+
.fd-table__cell--activable[aria-selected=true].is-active .fd-table__text,
|
|
38157
|
+
.fd-table__cell--activable[aria-selected=true]:active .fd-table__text,
|
|
38158
|
+
.fd-table__row--activable.is-selected.is-active .fd-table__text,
|
|
38159
|
+
.fd-table__row--activable.is-selected:active .fd-table__text,
|
|
38160
|
+
.fd-table__row--activable[aria-selected=true].is-active .fd-table__text,
|
|
38161
|
+
.fd-table__row--activable[aria-selected=true]:active .fd-table__text {
|
|
38162
|
+
text-shadow: none
|
|
38163
|
+
}
|
|
36666
38164
|
.fd-table__cell--activable.is-selected.is-active .fd-table__icon [class*=sap-icon],
|
|
36667
38165
|
.fd-table__cell--activable.is-selected.is-active .fd-table__icon[class*=sap-icon],
|
|
36668
38166
|
.fd-table__cell--activable.is-selected:active .fd-table__icon [class*=sap-icon],
|
|
@@ -36879,13 +38377,11 @@ places the element far left of the screen. so it is not visible.
|
|
|
36879
38377
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary,
|
|
36880
38378
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary {
|
|
36881
38379
|
background-color: var(--sapList_Active_Background);
|
|
36882
|
-
color: var(--sapList_Active_TextColor)
|
|
36883
|
-
text-shadow: none
|
|
38380
|
+
color: var(--sapList_Active_TextColor)
|
|
36884
38381
|
}
|
|
36885
38382
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell,
|
|
36886
38383
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__cell {
|
|
36887
|
-
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36888
|
-
text-shadow: none
|
|
38384
|
+
border-bottom-color: var(--sapList_SelectionBorderColor)
|
|
36889
38385
|
}
|
|
36890
38386
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell.is-hover,
|
|
36891
38387
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__cell:hover,
|
|
@@ -36893,6 +38389,10 @@ places the element far left of the screen. so it is not visible.
|
|
|
36893
38389
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__cell:hover {
|
|
36894
38390
|
background-color: var(--sapList_Active_Background)
|
|
36895
38391
|
}
|
|
38392
|
+
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__text,
|
|
38393
|
+
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__text {
|
|
38394
|
+
text-shadow: none
|
|
38395
|
+
}
|
|
36896
38396
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__icon [class*=sap-icon],
|
|
36897
38397
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover).is-active + .fd-table__row--secondary .fd-table__icon[class*=sap-icon],
|
|
36898
38398
|
.fd-table--pop-in .fd-table__row--main.fd-table__row--activable:not(:hover):active + .fd-table__row--secondary .fd-table__icon [class*=sap-icon],
|
|
@@ -38626,7 +40126,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
38626
40126
|
box-sizing: inherit;
|
|
38627
40127
|
font-size: inherit
|
|
38628
40128
|
}
|
|
38629
|
-
.fd-tabs__overflow {
|
|
40129
|
+
.fd-tabs button.fd-tabs__overflow {
|
|
38630
40130
|
font-size: var(--sapFontSize);
|
|
38631
40131
|
line-height: var(--sapContent_LineHeight);
|
|
38632
40132
|
color: var(--sapTextColor);
|
|
@@ -38648,14 +40148,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
38648
40148
|
align-items: center;
|
|
38649
40149
|
margin-left: auto
|
|
38650
40150
|
}
|
|
38651
|
-
.fd-tabs__overflow::after,
|
|
38652
|
-
.fd-tabs__overflow::before {
|
|
40151
|
+
.fd-tabs button.fd-tabs__overflow::after,
|
|
40152
|
+
.fd-tabs button.fd-tabs__overflow::before {
|
|
38653
40153
|
-webkit-box-sizing: inherit;
|
|
38654
40154
|
box-sizing: inherit;
|
|
38655
40155
|
font-size: inherit
|
|
38656
40156
|
}
|
|
38657
|
-
.fd-tabs__overflow [class*=sap-icon],
|
|
38658
|
-
.fd-tabs__overflow[class*=sap-icon] {
|
|
40157
|
+
.fd-tabs button.fd-tabs__overflow [class*=sap-icon],
|
|
40158
|
+
.fd-tabs button.fd-tabs__overflow[class*=sap-icon] {
|
|
38659
40159
|
color: inherit;
|
|
38660
40160
|
background: inherit;
|
|
38661
40161
|
font-size: inherit;
|
|
@@ -38992,11 +40492,11 @@ places the element far left of the screen. so it is not visible.
|
|
|
38992
40492
|
}
|
|
38993
40493
|
.fd-text::-moz-selection {
|
|
38994
40494
|
color: var(--sapContent_ContrastTextColor);
|
|
38995
|
-
background-color: var(--
|
|
40495
|
+
background-color: var(--fdText_Selected_Background_Color)
|
|
38996
40496
|
}
|
|
38997
40497
|
.fd-text::selection {
|
|
38998
40498
|
color: var(--sapContent_ContrastTextColor);
|
|
38999
|
-
background-color: var(--
|
|
40499
|
+
background-color: var(--fdText_Selected_Background_Color)
|
|
39000
40500
|
}
|
|
39001
40501
|
.fd-text--max-lines {
|
|
39002
40502
|
display: -webkit-box;
|
|
@@ -40103,7 +41603,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
40103
41603
|
}
|
|
40104
41604
|
.fd-tile--action .fd-tile__action-close.is-focus.fd-tile--toggled,
|
|
40105
41605
|
.fd-tile--action .fd-tile__action-close:focus.fd-tile--toggled {
|
|
40106
|
-
outline-color: var(--
|
|
41606
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
40107
41607
|
}
|
|
40108
41608
|
.fd-tile--action .fd-tile__action-close::-moz-focus-inner {
|
|
40109
41609
|
border: 0
|
|
@@ -40430,7 +41930,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
40430
41930
|
.fd-tile--line.fd-tile--action .fd-tile__action-close:focus.fd-tile--toggled,
|
|
40431
41931
|
.fd-tile--line.fd-tile--action .fd-tile__action-indicator.is-focus.fd-tile--toggled,
|
|
40432
41932
|
.fd-tile--line.fd-tile--action .fd-tile__action-indicator:focus.fd-tile--toggled {
|
|
40433
|
-
outline-color: var(--
|
|
41933
|
+
outline-color: var(--fdButton_Outline_Contrast)
|
|
40434
41934
|
}
|
|
40435
41935
|
.fd-tile--line .fd-badge {
|
|
40436
41936
|
position: relative;
|
|
@@ -40957,9 +42457,11 @@ places the element far left of the screen. so it is not visible.
|
|
|
40957
42457
|
padding: 0;
|
|
40958
42458
|
margin: 0;
|
|
40959
42459
|
border: 0;
|
|
40960
|
-
background-color: var(--sapButton_TokenBackground);
|
|
40961
|
-
color: var(--sapTextColor);
|
|
40962
42460
|
font-size: var(--sapFontSize);
|
|
42461
|
+
color: var(--fdToken_Text_Color);
|
|
42462
|
+
border-radius: var(--fdToken_Border_Radius);
|
|
42463
|
+
background-color: var(--sapButton_TokenBackground);
|
|
42464
|
+
border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);
|
|
40963
42465
|
display: -webkit-inline-box;
|
|
40964
42466
|
display: -ms-inline-flexbox;
|
|
40965
42467
|
display: inline-flex;
|
|
@@ -40969,15 +42471,13 @@ places the element far left of the screen. so it is not visible.
|
|
|
40969
42471
|
-ms-flex-align: center;
|
|
40970
42472
|
align-items: center;
|
|
40971
42473
|
text-align: center;
|
|
40972
|
-
padding: .25rem 0 .25rem
|
|
40973
|
-
border-radius: .25rem;
|
|
42474
|
+
padding: .25rem 0 .25rem var(--fdToken_Padding_Left);
|
|
40974
42475
|
white-space: nowrap;
|
|
40975
42476
|
max-width: 100%;
|
|
40976
42477
|
min-width: 3.625rem;
|
|
40977
42478
|
text-overflow: clip;
|
|
40978
42479
|
height: 1.625rem;
|
|
40979
|
-
line-height: 1.5rem
|
|
40980
|
-
border: var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor)
|
|
42480
|
+
line-height: 1.5rem
|
|
40981
42481
|
}
|
|
40982
42482
|
.fd-token::after,
|
|
40983
42483
|
.fd-token::before {
|
|
@@ -40988,7 +42488,7 @@ places the element far left of the screen. so it is not visible.
|
|
|
40988
42488
|
.fd-token[dir=rtl],
|
|
40989
42489
|
[dir=rtl] .fd-token {
|
|
40990
42490
|
padding-left: 0;
|
|
40991
|
-
padding-right:
|
|
42491
|
+
padding-right: var(--fdToken_Padding_Left)
|
|
40992
42492
|
}
|
|
40993
42493
|
.fd-token__text {
|
|
40994
42494
|
overflow: hidden;
|
|
@@ -41052,15 +42552,17 @@ places the element far left of the screen. so it is not visible.
|
|
|
41052
42552
|
box-shadow: none
|
|
41053
42553
|
}
|
|
41054
42554
|
.fd-token:hover {
|
|
41055
|
-
background-color: var(--
|
|
41056
|
-
border-color: var(--
|
|
42555
|
+
background-color: var(--fdToken_Background_Color_Hover);
|
|
42556
|
+
border-color: var(--fdToken_Border_Color_Hover);
|
|
42557
|
+
-webkit-box-shadow: var(--fdToken_Box_Shadow_Hover);
|
|
42558
|
+
box-shadow: var(--fdToken_Box_Shadow_Hover)
|
|
41057
42559
|
}
|
|
41058
42560
|
.fd-token.is-focus,
|
|
41059
42561
|
.fd-token:focus {
|
|
41060
42562
|
z-index: 5;
|
|
41061
42563
|
-webkit-box-shadow: none;
|
|
41062
42564
|
box-shadow: none;
|
|
41063
|
-
outline-offset:
|
|
42565
|
+
outline-offset: var(--fdToken_Outline_Offset);
|
|
41064
42566
|
outline-width: var(--sapContent_FocusWidth);
|
|
41065
42567
|
outline-color: var(--sapContent_FocusColor);
|
|
41066
42568
|
outline-style: var(--sapContent_FocusStyle)
|
|
@@ -41083,6 +42585,17 @@ places the element far left of the screen. so it is not visible.
|
|
|
41083
42585
|
padding-left: 0;
|
|
41084
42586
|
padding-right: .25rem
|
|
41085
42587
|
}
|
|
42588
|
+
.fd-token--compact.is-focus,
|
|
42589
|
+
.fd-token--compact:focus {
|
|
42590
|
+
z-index: 5;
|
|
42591
|
+
-webkit-box-shadow: none;
|
|
42592
|
+
box-shadow: none;
|
|
42593
|
+
outline-offset: var(--fdToken_Outline_Offset);
|
|
42594
|
+
outline-width: var(--sapContent_FocusWidth);
|
|
42595
|
+
outline-color: var(--sapContent_FocusColor);
|
|
42596
|
+
outline-style: var(--sapContent_FocusStyle);
|
|
42597
|
+
outline-offset: var(--fdToken_Outline_Offset_Compact)
|
|
42598
|
+
}
|
|
41086
42599
|
.fd-token--selected {
|
|
41087
42600
|
color: var(--sapButton_Selected_TextColor);
|
|
41088
42601
|
background-color: var(--sapButton_Selected_Background);
|
|
@@ -41093,22 +42606,26 @@ places the element far left of the screen. so it is not visible.
|
|
|
41093
42606
|
}
|
|
41094
42607
|
.fd-token--selected:hover {
|
|
41095
42608
|
background-color: var(--sapButton_Selected_Hover_Background);
|
|
41096
|
-
border-color: var(--sapButton_Selected_Hover_BorderColor)
|
|
42609
|
+
border-color: var(--sapButton_Selected_Hover_BorderColor);
|
|
42610
|
+
-webkit-box-shadow: var(--fdToken_Box_Shadow_Selected_Hover);
|
|
42611
|
+
box-shadow: var(--fdToken_Box_Shadow_Selected_Hover)
|
|
41097
42612
|
}
|
|
41098
42613
|
.fd-token--selected.is-focus,
|
|
41099
42614
|
.fd-token--selected:focus {
|
|
41100
42615
|
z-index: 5;
|
|
41101
42616
|
-webkit-box-shadow: none;
|
|
41102
42617
|
box-shadow: none;
|
|
41103
|
-
outline-offset:
|
|
42618
|
+
outline-offset: var(--fdToken_Outline_Offset);
|
|
41104
42619
|
outline-width: var(--sapContent_FocusWidth);
|
|
41105
42620
|
outline-color: var(--sapContent_FocusColor);
|
|
41106
42621
|
outline-style: var(--sapContent_FocusStyle);
|
|
41107
|
-
outline-color: var(--
|
|
42622
|
+
outline-color: var(--fdToken_Border_Color_Selected_Focus)
|
|
41108
42623
|
}
|
|
41109
42624
|
.fd-token--readonly {
|
|
41110
42625
|
color: var(--sapContent_LabelColor);
|
|
41111
|
-
|
|
42626
|
+
background-color: var(--fdToken_Background_Color_Read_Only);
|
|
42627
|
+
padding: .25rem .375rem;
|
|
42628
|
+
border: var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only)
|
|
41112
42629
|
}
|
|
41113
42630
|
.fd-token--readonly.fd-token--compact {
|
|
41114
42631
|
padding: .1rem .25rem
|
|
@@ -41117,6 +42634,14 @@ places the element far left of the screen. so it is not visible.
|
|
|
41117
42634
|
[dir=rtl] .fd-token--readonly.fd-token--compact {
|
|
41118
42635
|
padding-left: .25rem
|
|
41119
42636
|
}
|
|
42637
|
+
.fd-token--readonly.is-hover,
|
|
42638
|
+
.fd-token--readonly:hover {
|
|
42639
|
+
-webkit-box-shadow: none;
|
|
42640
|
+
box-shadow: none;
|
|
42641
|
+
color: var(--sapContent_LabelColor);
|
|
42642
|
+
background-color: var(--fdToken_Background_Color_Read_Only);
|
|
42643
|
+
border: var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only)
|
|
42644
|
+
}
|
|
41120
42645
|
.fd-token--readonly[dir=rtl],
|
|
41121
42646
|
[dir=rtl] .fd-token--readonly {
|
|
41122
42647
|
padding-left: .375rem
|
|
@@ -41384,42 +42909,42 @@ places the element far left of the screen. so it is not visible.
|
|
|
41384
42909
|
font-weight: 700;
|
|
41385
42910
|
color: var(--sapShell_TextColor)
|
|
41386
42911
|
}
|
|
41387
|
-
.fd-tool-header .fd-tool-header__button {
|
|
42912
|
+
.fd-tool-header button.fd-tool-header__button {
|
|
41388
42913
|
color: var(--sapShell_InteractiveTextColor)
|
|
41389
42914
|
}
|
|
41390
|
-
.fd-tool-header .fd-tool-header__button:hover {
|
|
42915
|
+
.fd-tool-header button.fd-tool-header__button:hover {
|
|
41391
42916
|
border-color: transparent;
|
|
41392
42917
|
color: var(--sapShell_InteractiveTextColor);
|
|
41393
42918
|
background: var(--sapShell_Hover_Background)
|
|
41394
42919
|
}
|
|
41395
|
-
.fd-tool-header .fd-tool-header__button:focus {
|
|
42920
|
+
.fd-tool-header button.fd-tool-header__button:focus {
|
|
41396
42921
|
outline-color: var(--sapContent_ContrastFocusColor)
|
|
41397
42922
|
}
|
|
41398
|
-
.fd-tool-header .fd-tool-header__button:focus::after {
|
|
42923
|
+
.fd-tool-header button.fd-tool-header__button:focus::after {
|
|
41399
42924
|
border-color: var(--sapContent_ContrastFocusColor)
|
|
41400
42925
|
}
|
|
41401
|
-
.fd-tool-header .fd-tool-header__button:active {
|
|
42926
|
+
.fd-tool-header button.fd-tool-header__button:active {
|
|
41402
42927
|
color: var(--sapShell_Active_TextColor);
|
|
41403
42928
|
background: var(--sapShell_Active_Background);
|
|
41404
42929
|
outline-color: var(--sapContent_ContrastFocusColor)
|
|
41405
42930
|
}
|
|
41406
|
-
.fd-tool-header .fd-tool-header__button:active::after {
|
|
42931
|
+
.fd-tool-header button.fd-tool-header__button:active::after {
|
|
41407
42932
|
border-color: var(--sapContent_ContrastFocusColor)
|
|
41408
42933
|
}
|
|
41409
|
-
.fd-tool-header .fd-tool-header__button-text {
|
|
42934
|
+
.fd-tool-header button.fd-tool-header__button .fd-tool-header__button-text {
|
|
41410
42935
|
color: var(--sapShell_TextColor)
|
|
41411
42936
|
}
|
|
41412
42937
|
@media (max-width:599px) {
|
|
41413
|
-
.fd-tool-header .fd-tool-header__button-text {
|
|
42938
|
+
.fd-tool-header button.fd-tool-header__button .fd-tool-header__button-text {
|
|
41414
42939
|
display: none
|
|
41415
42940
|
}
|
|
41416
42941
|
}
|
|
41417
|
-
.fd-tool-header .fd-tool-header__button .fd-tool-header__title {
|
|
42942
|
+
.fd-tool-header button.fd-tool-header__button .fd-tool-header__title {
|
|
41418
42943
|
padding-left: 0;
|
|
41419
42944
|
padding-right: 0
|
|
41420
42945
|
}
|
|
41421
42946
|
@media (max-width:599px) {
|
|
41422
|
-
.fd-tool-header .fd-tool-header__button .fd-tool-header__title {
|
|
42947
|
+
.fd-tool-header button.fd-tool-header__button .fd-tool-header__title {
|
|
41423
42948
|
display: none
|
|
41424
42949
|
}
|
|
41425
42950
|
}
|
|
@@ -41746,10 +43271,10 @@ places the element far left of the screen. so it is not visible.
|
|
|
41746
43271
|
border-bottom: none
|
|
41747
43272
|
}
|
|
41748
43273
|
.fd-toolbar--auto {
|
|
41749
|
-
background-color:
|
|
43274
|
+
background-color: var(--fdToolbar_Auto_Background)
|
|
41750
43275
|
}
|
|
41751
43276
|
.fd-toolbar--solid {
|
|
41752
|
-
background-color: var(--
|
|
43277
|
+
background-color: var(--fdToolbar_Solid_Background)
|
|
41753
43278
|
}
|
|
41754
43279
|
.fd-toolbar--transparent {
|
|
41755
43280
|
background-color: var(--sapToolbar_Background)
|
|
@@ -41940,12 +43465,16 @@ places the element far left of the screen. so it is not visible.
|
|
|
41940
43465
|
.fd-toolbar__overflow .fd-toolbar__overflow-label--text {
|
|
41941
43466
|
margin-top: .4375rem
|
|
41942
43467
|
}
|
|
43468
|
+
.fd-toolbar__title {
|
|
43469
|
+
color: var(--sapGroup_TitleTextColor)
|
|
43470
|
+
}
|
|
41943
43471
|
.fd-toolbar--cozy {
|
|
41944
43472
|
height: 2.75rem;
|
|
41945
43473
|
min-height: 2.75rem
|
|
41946
43474
|
}
|
|
41947
43475
|
.fd-toolbar--cozy.fd-toolbar--info {
|
|
41948
|
-
height: 2rem
|
|
43476
|
+
height: 2rem;
|
|
43477
|
+
min-height: 2rem
|
|
41949
43478
|
}
|
|
41950
43479
|
.fd-toolbar--cozy .fd-toolbar__overflow {
|
|
41951
43480
|
font-size: var(--sapFontSize);
|