ant-design/site/theme/static/demo.less
Wei Zhu 55c85f77a1
Update dependendies (#8150)
* deps: upgrade rc-menu, and close: #2837

* test: update snapshots

* Update rc-calendar

* Update rc-cascader

* Update rc-dialog

* Update dropdown

* Update rc-select@7.1.0

* Update rc-slider

* Update rc-time-picker

* Update rc-tooltip

* Update rc-tree-select

* Mock rc-trigger and Portal

* Fix animation warning when inlineCollapsed changes

* fix: should use SubMenu[popupClassName]

* Fix typescript error

* Fix lint

* fix: style for menu

* Mock rc-trigger for React 15

* Remvoe allow_failures
2017-11-11 00:07:03 +08:00

244 lines
4.2 KiB
Plaintext

.code-boxes-col-1-1 {
width: 100%;
}
.code-boxes-col-2-1 {
display: inline-block;
vertical-align: top;
}
.code-box {
border: 1px solid @border-color-split;
border-radius: @border-radius-base;
display: inline-block;
width: 100%;
position: relative;
margin: 0 0 16px;
transition: all .2s;
&:target {
border: 1px solid @primary-color;
}
&-expand-trigger {
cursor: pointer;
font-size: 14px;
color: #9199ac;
margin-left: 5px;
opacity: .8;
transition: all .3s;
top: -2px;
position: relative;
&-active {
color: #3b4357;
}
}
&-title {
position: absolute;
top: -14px;
padding: 1px 8px;
margin-left: -8px;
color: #777;
border-radius: @border-radius-base @border-radius-base 0 0;
background: #fff;
transition: background-color .4s;
a,
a:hover {
color: @text-color;
font-size: 14px;
font-weight: 500;
}
}
a.edit-button {
position: absolute;
right: -16px;
top: 7px;
font-size: 12px;
transform: scale(0.9);
background: #fff;
padding-right: 6px;
text-decoration: none;
}
&-demo {
border-bottom: 1px solid @border-color-split;
padding: 42px 24px 50px;
}
iframe {
width: 100%;
border: 0;
}
&-meta {
&.markdown {
position: relative;
padding: 17px 16px 15px 20px;
border-radius: 0 0 @border-radius-base @border-radius-base;
transition: background-color .4s;
width: 100%;
font-size: 12px;
}
blockquote {
margin: 0;
}
h4,
section& p {
margin: 4px 0;
width: 98%;
}
> p {
font-size: 12px;
margin: 0.5em 0;
padding-right: 25px;
width: 100%;
word-break: break-word;
}
}
&.expand &-meta {
border-radius: 0;
border-bottom: 1px dashed @border-color-split;
}
.code-expand-icon {
position: absolute;
right: 16px;
bottom: 23px;
cursor: pointer;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
}
.code-expand-icon-show,
.code-expand-icon-hide {
transition: all 0.4s;
user-select: none;
position: absolute;
left: 0;
top: 0;
}
.code-expand-icon-show {
opacity: 0.55;
pointer-events: auto;
&:hover {
opacity: 1;
}
}
.code-expand-icon.ant-tooltip-open .code-expand-icon-show {
opacity: 1;
}
.code-expand-icon-hide {
opacity: 0;
pointer-events: none;
}
.highlight-wrapper {
display: none;
overflow: auto;
border-radius: 0 0 @border-radius-base @border-radius-base;
&-expand {
display: block;
}
}
.highlight {
position: relative;
pre {
margin: 0;
padding: 0;
background: #fff;
}
&:not(:first-child) {
border-top: 1px dashed @border-color-split;
}
}
&-actions {
position: absolute;
top: 10px;
right: 12px;
text-align: right;
> i,
> form {
display: inline-block;
margin-left: 8px;
}
}
&-code-copy {
font-size: 14px;
cursor: pointer;
color: #222;
transition: all .24s;
background: #fff;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 20px;
opacity: 0;
&:hover {
color: @primary-color;
transform: scale(1.2);
}
&.anticon-check {
color: @green-6 !important;
font-weight: bold;
}
}
&-codepen {
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/bsyXYJlnerAkEMGKtTpa.svg") center / 14px no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0;
transition: all .3s;
border: 0;
text-indent: -9999px;
overflow: hidden;
}
&-riddle {
background: transparent url("https://zos.alipayobjects.com/rmsportal/WpXYyalbBFqfZEV.svg") center / 14px no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
opacity: 0;
transition: all .3s;
border: 0;
text-indent: -9999px;
overflow: hidden;
}
.highlight-wrapper:hover &-code-copy,
.highlight-wrapper:hover &-codepen,
.highlight-wrapper:hover &-riddle {
opacity: .66;
}
pre {
margin: 0;
width: auto;
code {
border: none;
background: #fff;
}
}
}