@import 'styles_config'; .bce_code { background: #F8F8F8; color: black; border: 1px solid rgba(0, 0, 0, 0.15); .bce_code_data, .bce_code_editarea { overflow-x: auto; font-family: $FONT_CODE; padding: 5px 9.5px; line-height: 12pt; font-size: 10pt; } .bce_code_data { white-space: pre; } .bce_code_editarea { display: block; resize: none; box-sizing: border-box; line-height: 12pt; font-size: 10pt; } .bce_code_ctrl { background: #BBB; display: flex; flex-direction: row; .ctrl_btn_left, .ctrl_btn_right { display: flex; flex-direction: row; } .ctrl_btn_left { margin-right: auto; } .ctrl_btn_right { margin-left: auto; } .ctrl_btn { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; display: block; border: 1px solid #000; background: #444; color: #BBB; margin: 4px; padding: 0 5px; min-width: 65px; text-align: center; text-decoration: none; font-weight: bold; &:hover { cursor: pointer; background: #333; color: #FFF; border: 1px solid black; } } .ctrl_btn_group { display: flex; flex-direction: row; } .ctrl_btn_ll {margin-right: 0; flex-grow: 1; } .ctrl_btn_rr {margin-left: 0; flex-grow: 0; min-width: 25px; border-left: none; &:hover { border-left: none; } } .ctrl_btn_disabled { background: #999; color: #BBB; } .ctrl_btn_disabled:hover { background: #999; color: #BBB; cursor: default; } } } @media (max-width: 767px) { .bce_code { .bce_code_ctrl{ display: flex; flex-direction: column; margin: 0; .ctrl_btn_left, .ctrl_btn_right { display: flex; flex-direction: column; margin: 0; } } .ctrl_btn_left, .ctrl_btn_right { display: flex; flex-direction: column; margin: 0; } } } .bce_code_out { display: flex; flex-direction: row; background: #BBB; .bce_code_out_text { font-family: $FONT_CODE; overflow-y: auto; overflow-x: auto; background: #FFF; color: #000; border: 1px solid #888; flex-grow: 1; } .bce_code_out_stack { font-family: $FONT_CODE; overflow-y: scroll; overflow-x: auto; background: #FFF; color: #000; border: 1px solid #888; flex-grow: 1; } .bce_code_out_left { flex-grow: 1; margin: 0 4px 4px 4px; height: 300px; display: flex; flex-direction: column; } .bce_code_out_right { height: 300px; width: 200px; margin: 0 4px 4px 4px; display: flex; flex-direction: column; } } @media (max-width: 767px) { .bce_code_out { flex-direction: column; .bce_code_out_left { flex-grow: 0; height: 100px;} .bce_code_out_right { width: auto; height: 150px;} } }