.code-box-expand-trigger { cursor: pointer; font-size: 14px; color: #9199AC; margin-left: 5px; opacity: .8; transition: all .3s ease; top: -2px; position: relative; &-active { color: #3B4357; } } .code-boxes-col-1-1 { width: 100%; } .code-boxes-col-2-1 { display: inline-block; vertical-align: top; } .code-box { border: 1px solid #E9E9E9; border-radius: 6px; display: inline-block; width: 100%; position: relative; margin: 0px 0 16px 0px; transition: all 0.2s ease; } .code-box:hover { box-shadow: 0 2px 7px rgba(0,0,0,.2); border-color: transparent; position: relative; z-index: 10; background: #fff; } .code-box:target { border: 1px solid rgba(45, 183, 245, 0.7); box-shadow: 0 0 4px rgba(45, 183, 245, 0.5); } .code-box { .code-box-title a, .code-box-title a:hover { color: #666; 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; opacity: 0; transition: opacity .3s; } &:hover a.edit-button { opacity: 1; } } .code-box .code-box-demo { border-bottom: 1px solid #E9E9E9; padding: 42px 20px 50px; } .code-box iframe { width: 100%; border: 0; } .code-box-meta.markdown { position: relative; padding: 17px 16px 15px 20px; border-radius: 0 0 6px 6px; transition: background-color 0.4s ease; width: 100%; font-size: 12px; } .code-box-meta h4, section.code-box-meta p { margin: 4px 0; width: 93%; } .code-box-meta blockquote { margin: 0; } .code-box-title { position: absolute; top: -14px; padding: 1px 8px; margin-left: -8px; color: #777; border-radius: 6px; border-top-left-radius: 0; background: #fff; transition: background-color 0.4s ease; } .code-box-meta > p { font-size: 12px; margin: 0.5em 0; padding-right: 25px; width: 100%; word-break: break-word; } .code-box.expand .code-box-meta { border-radius: 0; border-bottom: 1px dashed #e9e9e9; } .code-box .collapse { position: absolute; right: 16px; bottom: 17px; cursor: pointer; width: 18px; height: 18px; font-size: 18px; line-height: 18px; opacity: 0.5; text-align: center; transition: all 0.3s; color: #999; background: #fff; user-select: none; border-radius: 100%; } .code-box.expand .collapse { color: shade(#2db7f5, 20%); transform: rotate(-180deg); } .code-box .collapse:hover { opacity: 1; } .code-box .highlight-wrapper { display: none; overflow: auto; border-radius: 0 0 6px 6px; } .code-box .highlight-wrapper-expand { display: block; } .code-box .highlight { pre { margin: 0; padding: 0; background: #fff; } &:not(:first-child) { border-top: 1px dashed #e9e9e9; } } .code-box pre { margin: 0; width: auto; } .code-box pre code { border: none; background: #fff; } .code-box-demo .demo-header { width: 100%; background: #ebedee; height: 30px; } .code-box-demo .demo-header ul { float: right; margin-right: 5px; } .code-box-demo .demo-header ul li { width: 50px; height: 30px; float: left; background: #e4e4e4; margin-left: 5px; } .code-box-demo .demo-header ul li:before { margin: 10px auto; width: 20px; height: 10px; background: #ebeded; } .code-box-demo .demo-header .logo { float: left; margin: 0px auto 0 10px; line-height: 32px; } .code-box-demo .demo-header .logo img{ margin:auto } .code-box-demo .demo-header .logo span { display: block; float: right; } .code-box-demo .demo-content { margin: 10px auto; } .code-box-demo .demo-content .demo-title { text-align:left; background: #a4a4a4; width: 40%; height: 20px; line-height: 20px; color: #ebeded; text-indent:10px } .code-box-demo .demo-content .demo-listBox { margin-top: 10px; } .code-box-demo .demo-content .demo-listBox .demo-list .title { height: 30px; background: #cacaca; overflow: hidden; } .code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{ width: 30%; height: 5px; background: #ebeded; float:left; margin:12px 35px 0; } .code-box-demo .demo-content .demo-listBox .demo-list .title:after{ width:15%; float:right; margin:12px 10px 0; } .code-box-demo .demo-content .demo-listBox .demo-list ul li { height: 25px; background: #ebeded; border-bottom: 1px solid #cacaca; overflow: hidden; padding: 5px 15px; } .code-box-demo .demo-content .demo-listBox .demo-list ul li:before { width: 10px; height: 5px; background: #cacaca; float: left; margin-top:4px } .code-box-demo .demo-content .demo-listBox .demo-list ul li:after { width: 50%; height: 5px; background: #cacaca; float: left; margin-left: 10px; margin-top: 4px; } .code-box-demo .demo-content .demo-kp { margin: 10px auto; } .code-box-demo .demo-content .demo-kp ul li { display: inline-block; width: 32%; height: 40px; background: #cacaca; color: #ebeded; text-align: left; padding: 10px; margin-right: calc(2%); } .code-box-demo .demo-content .demo-kp ul li:last-child { margin-right: 0%; } .code-box-demo .demo-content .demo-kp ul li:after { width: 60%; height: 5px; background: #ebeded; float: left; margin-top: 7px; } .code-box-demo .demo-content .demo-kp ul li:before { background: #ebeded; float: left; width: 15px; height: 15px; margin:2px 10% 0 0; } .code-box-demo .demo-footer { margin-top: 10px; background: #cacaca; height: 40px; float: left; width: 100%; display: table; } .code-box-demo .demo-footer:before { width: 60%; height: 5px; background: #ededed; margin: 10px auto 0; } .code-box-demo .demo-footer:after { width: 30%; height: 5px; background: #ededed; margin: 5px auto; } .code-box-demo .demo-header ul li:before, .code-box-demo .demo-content .demo-kp ul li:before, .code-box-demo .demo-content .demo-kp ul li:after, .code-box-demo .demo-content .demo-listBox .demo-list .title:before, .code-box-demo .demo-content .demo-listBox .demo-list .title:after, .code-box-demo .demo-content .demo-listBox .demo-list ul li:before, .code-box-demo .demo-content .demo-listBox .demo-list ul li:after, .code-box-demo .demo-footer:before, .code-box-demo .demo-footer:after { display: block; content: ""; } // queue-animate style, should be remove after queue-animate is remove. .code-box-demo .demo-header { width: 100%; background: #ebedee; height: 30px; } .code-box-demo .demo-header ul { float: right; margin-right: 5px; } .code-box-demo .demo-header ul li { width: 50px; height: 30px; float: left; background: #e4e4e4; margin-left: 5px; } .code-box-demo .demo-header ul li:before { margin: 10px auto; width: 20px; height: 10px; background: #ebeded; } .code-box-demo .demo-header .logo { float: left; margin: 0px auto 0 10px; line-height: 32px; } .code-box-demo .demo-header .logo img{ margin:auto } .code-box-demo .demo-header .logo span { display: block; float: right; } .code-box-demo .demo-content { margin: 10px auto; } .code-box-demo .demo-content .demo-title { text-align:left; background: #a4a4a4; width: 40%; height: 20px; line-height: 20px; color: #ebeded; text-indent:10px } .code-box-demo .demo-content .demo-listBox { margin-top: 10px; } .code-box-demo .demo-content .demo-listBox .demo-list .title { height: 30px; background: #cacaca; overflow: hidden; } .code-box-demo .demo-content .demo-listBox .demo-list .title:before,.code-box-demo .demo-content .demo-listBox .demo-list .title:after{ width: 30%; height: 5px; background: #ebeded; float:left; margin:12px 35px 0; } .code-box-demo .demo-content .demo-listBox .demo-list .title:after{ width:15%; float:right; margin:12px 10px 0; } .code-box-demo .demo-content .demo-listBox .demo-list ul li { height: 25px; background: #ebeded; border-bottom: 1px solid #cacaca; overflow: hidden; padding: 5px 15px; } .code-box-demo .demo-content .demo-listBox .demo-list ul li:before { width: 10px; height: 5px; background: #cacaca; float: left; margin-top:4px } .code-box-demo .demo-content .demo-listBox .demo-list ul li:after { width: 50%; height: 5px; background: #cacaca; float: left; margin-left: 10px; margin-top: 4px; } .code-box-demo .demo-content .demo-kp { margin: 10px auto; } .code-box-demo .demo-content .demo-kp ul li { display: inline-block; width: 32%; height: 40px; background: #cacaca; color: #ebeded; text-align: left; padding: 10px; margin-right: calc(2%); } .code-box-demo .demo-content .demo-kp ul li:last-child { margin-right: 0%; } .code-box-demo .demo-content .demo-kp ul li:after { width: 60%; height: 5px; background: #ebeded; float: left; margin-top: 7px; } .code-box-demo .demo-content .demo-kp ul li:before { background: #ebeded; float: left; width: 15px; height: 15px; margin:2px 10% 0 0; } .code-box-demo .demo-footer { margin-top: 10px; background: #cacaca; height: 40px; float: left; width: 100%; display: table; } .code-box-demo .demo-footer:before { width: 60%; height: 5px; background: #ededed; margin: 10px auto 0; } .code-box-demo .demo-footer:after { width: 30%; height: 5px; background: #ededed; margin: 5px auto; } .code-box-demo .demo-header ul li:before, .code-box-demo .demo-content .demo-kp ul li:before, .code-box-demo .demo-content .demo-kp ul li:after, .code-box-demo .demo-content .demo-listBox .demo-list .title:before, .code-box-demo .demo-content .demo-listBox .demo-list .title:after, .code-box-demo .demo-content .demo-listBox .demo-list ul li:before, .code-box-demo .demo-content .demo-listBox .demo-list ul li:after, .code-box-demo .demo-footer:before, .code-box-demo .demo-footer:after { display: block; content: ""; }