1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283 |
- .s2-example + pre,
- .s2-event-log + pre {
- margin: -15px -15px 15px;
- border-radius: 0;
- border-width: 0 0 1px;
- }
- @media (min-width: 768px) {
- .s2-example + pre,
- .s2-event-log + pre {
- margin-top: -16px;
- margin-left: 0;
- margin-right: 0;
- border-width: 1px;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
- }
- }
- .s2-event-log {
- background: #002451;
- font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
- color: white;
- position: relative;
- padding: 45px 15px 15px;
- margin: 0 -15px 15px;
- }
- .s2-event-log:after {
- content: "Event Log";
- position: absolute;
- top: 15px;
- left: 15px;
- font-size: 12px;
- font-weight: bold;
- color: #BBB;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
- .s2-example {
- position: relative;
- padding: 45px 15px 15px;
- margin: 0 -15px 15px;
- background-color: #FAFAFA;
- box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
- border-color: #E5E5E5 #EEE #EEE;
- border-style: solid;
- border-width: 1px 0;
- }
- @media (min-width: 768px) {
- .s2-example {
- margin-left: 0;
- margin-right: 0;
- background-color: #FFF;
- border-width: 1px;
- border-color: #eee;
- border-radius: 4px 4px 0 0;
- box-shadow: none;
- }
- .s2-event-log {
- margin-left: 0;
- margin-right: 0;
- margin-top: -15px;
- border-width: 1px;
- border-color: #eee;
- box-shadow: none;
- }
- }
- .s2-example:after {
- content: "Example";
- position: absolute;
- top: 15px;
- left: 15px;
- font-size: 12px;
- font-weight: bold;
- color: #BBB;
- text-transform: uppercase;
- letter-spacing: 1px;
- }
|