Browse
For agents
About
Block Animations, Motion & Scroll Effects – Ghost Kit
/
3.6.1
Block Animations, Motion & Scroll Effects – Ghost Kit
v3.6.1
Switch version
3.7.2
3.7.1
3.7.0
3.6.1
trunk
1.6.3
2.25.0
3.3.0
3.3.1
3.3.2
3.3.3
3.4.0
3.4.1
3.4.2
3.4.3
3.4.4
3.4.5
3.4.6
3.5.0
3.5.1
3.6.0
Overview
Code
ghostkit
/
build
/
gutenberg
/
blocks
/
pricing-table
/
styles
/
style.css
style.css
in Block Animations, Motion & Scroll Effects – Ghost Kit 3.6.1, at build/gutenberg/blocks/pricing-table/styles/style.css
2 lines
5.7 KB
Find file
t
No matching file
Up and down to move
Enter to open
Esc to close
Raw
Download
Zip
View raw
1
.
ghostkit-pricing-table
{
--gkt-pricing-table__gap
:
15
px
;
--gkt-pricing-table__align-items
:
flex-start
;
--gkt-pricing-table__columns
:
1
;
--gkt-pricing-table--item__padding-v
:
2.2
em
;
--gkt-pricing-table--item__padding-h
:
1.65
em
;
--gkt-pricing-table--item__border-width
:
1
px
;
--gkt-pricing-table--item__border-color
:
var
(
--gkt-color-light-gray-darken
)
;
--gkt-pricing-table--item__border-radius
:
var
(
--gkt-border-radius
)
;
--gkt-pricing-table--elements__gap
:
2.2
em
;
--gkt-pricing-table--popular-badge__top
:
1.2
em
;
--gkt-pricing-table--popular-badge__padding-v
:
0.15
em
;
--gkt-pricing-table--popular-badge__padding-h
:
1.1
em
;
--gkt-pricing-table--popular-badge__font-size
:
0.8
em
;
--gkt-pricing-table--popular-badge__color
:
#
fff
;
--gkt-pricing-table--popular-badge__background-color
:
var
(
--gkt-color-primary
)
;
--gkt-pricing-table--title__font-size
:
1
em
;
--gkt-pricing-table--price-amount__font-size
:
3.5
em
;
--gkt-pricing-table--price-amount__line-height
:
1.3
em
;
--gkt-pricing-table--price-repeat__font-size
:
0.8
em
;
--gkt-pricing-table--price-repeat__opacity
:
0.7
;
--gkt-pricing-table--features__font-size
:
0.9
em
;
--gkt-pricing-table--features-items__gap
:
0.5
em
}
.
ghostkit-pricing-table-inner
{
align-items
:
var
(
--gkt-pricing-table__align-items
)
;
display
:
flex
;
flex-wrap
:
wrap
;
margin-left
:
calc
(
var
(
--gkt-pricing-table__gap
)
*
-1
)
;
margin-top
:
calc
(
var
(
--gkt-pricing-table__gap
)
*
-1
)
}
.
ghostkit-pricing-table-item-wrap
{
flex
:
0
0
calc
(
100
%
/
var
(
--gkt-pricing-table__columns
)
-
var
(
--gkt-pricing-table__gap
)
)
;
margin-left
:
var
(
--gkt-pricing-table__gap
)
;
margin-top
:
var
(
--gkt-pricing-table__gap
)
;
max-width
:
calc
(
100
%
/
var
(
--gkt-pricing-table__columns
)
-
var
(
--gkt-pricing-table__gap
)
)
}
.
ghostkit-pricing-table-item
{
border
:
var
(
--gkt-pricing-table--item__border-width
)
solid
var
(
--gkt-pricing-table--item__border-color
)
;
border-radius
:
var
(
--gkt-pricing-table--item__border-radius
)
;
padding
:
var
(
--gkt-pricing-table--item__padding-v
)
var
(
--gkt-pricing-table--item__padding-h
)
;
position
:
relative
}
.
ghostkit-pricing-table-item-popular-badge
{
background-color
:
var
(
--gkt-pricing-table--popular-badge__background-color
)
;
color
:
var
(
--gkt-pricing-table--popular-badge__color
)
;
font-size
:
var
(
--gkt-pricing-table--popular-badge__font-size
)
;
padding
:
var
(
--gkt-pricing-table--popular-badge__padding-v
)
var
(
--gkt-pricing-table--popular-badge__padding-h
)
;
position
:
absolute
;
right
:
calc
(
var
(
--gkt-pricing-table--item__border-width
)
*
-1
)
;
top
:
var
(
--gkt-pricing-table--popular-badge__top
)
}
.
ghostkit-pricing-table-item
.
ghostkit-pricing-table-item-popular-badge
{
margin-top
:
0
}
.
ghostkit-pricing-table-item-title
{
font-size
:
var
(
--gkt-pricing-table--title__font-size
)
;
margin
:
0
}
.
ghostkit-pricing-table-item-price
{
display
:
flex
;
justify-content
:
center
;
position
:
relative
}
.
ghostkit-pricing-table-item-price-amount
{
font-size
:
var
(
--gkt-pricing-table--price-amount__font-size
)
;
line-height
:
var
(
--gkt-pricing-table--price-amount__line-height
)
}
.
ghostkit-pricing-table-item-price-currency
{
align-self
:
flex-start
}
.
ghostkit-pricing-table-item-price-repeat
{
align-self
:
flex-end
;
font-size
:
var
(
--gkt-pricing-table--price-repeat__font-size
)
;
opacity
:
var
(
--gkt-pricing-table--price-repeat__opacity
)
}
.
ghostkit-pricing-table-item-features
{
font-size
:
var
(
--gkt-pricing-table--features__font-size
)
;
list-style
:
none
;
margin
:
0
;
padding
:
0
;
position
:
relative
}
.
ghostkit-pricing-table-item-features
li
{
list-style
:
none
;
margin-left
:
0
}
.
ghostkit-pricing-table-item-features
li
+
li
{
margin-top
:
var
(
--gkt-pricing-table--features-items__gap
)
}
.
ghostkit-pricing-table-item
.
ghostkit-button-wrapper
{
margin-bottom
:
0
}
.
ghostkit-pricing-table-item
>
*
{
margin-top
:
var
(
--gkt-pricing-table--elements__gap
)
}
.
ghostkit-pricing-table-item
>
:
first-child
{
margin-top
:
0
}
.
ghostkit-pricing-table-items-1
{
--gkt-pricing-table__columns
:
1
}
.
ghostkit-pricing-table-items-2
{
--gkt-pricing-table__columns
:
2
}
@
media
screen
and
(
max-width
:
768
px
)
{
.
ghostkit-pricing-table-items-2
{
--gkt-pricing-table__columns
:
1
}
}
.
ghostkit-pricing-table-items-3
{
--gkt-pricing-table__columns
:
3
}
@
media
screen
and
(
max-width
:
768
px
)
{
.
ghostkit-pricing-table-items-3
{
--gkt-pricing-table__columns
:
1
}
}
.
ghostkit-pricing-table-items-4
{
--gkt-pricing-table__columns
:
4
}
@
media
screen
and
(
max-width
:
768
px
)
{
.
ghostkit-pricing-table-items-4
{
--gkt-pricing-table__columns
:
2
}
}
@
media
screen
and
(
max-width
:
576
px
)
{
.
ghostkit-pricing-table-items-4
{
--gkt-pricing-table__columns
:
1
}
}
.
ghostkit-pricing-table-items-5
{
--gkt-pricing-table__columns
:
5
}
@
media
screen
and
(
max-width
:
768
px
)
{
.
ghostkit-pricing-table-items-5
{
--gkt-pricing-table__columns
:
2
}
}
@
media
screen
and
(
max-width
:
576
px
)
{
.
ghostkit-pricing-table-items-5
{
--gkt-pricing-table__columns
:
1
}
}
.
ghostkit-pricing-table-items-6
{
--gkt-pricing-table__columns
:
6
}
@
media
screen
and
(
max-width
:
992
px
)
{
.
ghostkit-pricing-table-items-6
{
--gkt-pricing-table__columns
:
3
}
}
@
media
screen
and
(
max-width
:
768
px
)
{
.
ghostkit-pricing-table-items-6
{
--gkt-pricing-table__columns
:
2
}
}
@
media
screen
and
(
max-width
:
576
px
)
{
.
ghostkit-pricing-table-items-6
{
--gkt-pricing-table__columns
:
1
}
}
.
ghostkit-pricing-table-align-horizontal-left
{
text-align
:
left
}
.
ghostkit-pricing-table-align-horizontal-left
.
ghostkit-pricing-table-item-price
{
justify-content
:
flex-start
}
.
ghostkit-pricing-table-align-horizontal-center
{
text-align
:
center
}
.
ghostkit-pricing-table-align-horizontal-center
.
ghostkit-pricing-table-item-price
{
justify-content
:
center
}
.
ghostkit-pricing-table-align-horizontal-right
{
text-align
:
right
}
.
ghostkit-pricing-table-align-horizontal-right
.
ghostkit-pricing-table-item-price
{
justify-content
:
flex-end
}
.
ghostkit-pricing-table-align-vertical-start
{
--gkt-pricing-table__align-items
:
flex-start
}
.
ghostkit-pricing-table-align-vertical-center
{
--gkt-pricing-table__align-items
:
center
}
.
ghostkit-pricing-table-align-vertical-end
{
--gkt-pricing-table__align-items
:
flex-end
}
.
ghostkit-pricing-table-gap-no
{
--gkt-pricing-table__gap
:
0
%
}
.
ghostkit-pricing-table-gap-sm
{
--gkt-pricing-table__gap
:
15
px
}
.
ghostkit-pricing-table-gap-md
{
--gkt-pricing-table__gap
:
30
px
}
.
ghostkit-pricing-table-gap-lg
{
--gkt-pricing-table__gap
:
45
px
}
2
