joyce/src/stylesheets/_editor.scss

@import "variables";
@import "mixin";

.text_editor {
    max-height: 72vh;
    overflow-y: auto;
    background-color: rgba(256,256,256,.8);
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
    margin: 1vh 0;
    border: 1px solid $border_color;
    border-radius: 5px;
    padding: 2% 5%;
    font-size: 0.8em;
}

#note_media_picker {
	div {
		width: 100%;
	}
	button {
		width: 100%;
	}
}

#editor_top_bar_block {
	button {
		width: 100%;
	}
}

#editor_bottom_bar_block {
	button {
		width: 100%;
	}
}

#rich_text_button_group {
	width: 100%;
}

// PRE-FACTOR


#editor_container {
    height: 82vh;	
}

.editor_wrapper {
    height: 82vh;
    padding-top: 1vh;	
}

#editor_metadata {
    height: 5vh;
	h4 {
		font-size: 1.75rem
	}
	input {
		width: 100%;
	    margin-bottom: 0.5%;
	}
}

#editor_topbar {	
    height: 4vh;	
	button {
		width: 100%;
	}	
	.row {
		margin-bottom: 0.8%;
	}
	.btn-group {
		margin: 0 1%;
	}
}


#editor_content {
    height: 72vh;
    overflow-y: auto;
    background-color: rgba(256,256,256,.8);
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
    margin: 1vh 0;
    border: 1px solid $border_color;
    border-radius: 5px;
    padding: 2% 5%;
    font-size: 0.8em;
    // Expand top-level DraftJS components to focus on click
    > div {
    	height: 100%;
	    > div {
	    	height: 100%;
		    > div {
		    	height: 100%;
		    }	    	
	    }    	
    }
}

#editor_content.edit_mode {
	height: 73vh;
}

#editor_content.edit_mode.tags {
	height: 68vh;
}

// #editor_content.edit_mode.media {
// 	height: 30vh;
// }

#editor_content.annotate_mode {
	height: 73vh;
}

#editor_attributes.tags {
	height: 5vh;
}

#editor_bottombar {
	height: 4vh;
	margin: 0.5vh 0;
	button {
		width: 100%;
	}
}

// Media queries

@include respond-below(sm) {
    #content_wrapper {
    	height: 91vh;
    	margin: 0;
    }

    #editor_container {
    	height: 84vh;
    }
    #editor_content {
        height: 74vh;
    }
    #editor_read_mode {
    	height: 84vh;
    }
    #editor_metadata {
	    width: 95%;
	    margin: 0 auto;    	
    }

    #editor_topbar {
	    width: 95%;
	    margin: 0 auto;    	
    }    
}

@include respond-below(xs) {
	div#editor_container {
		height: 81vh;
	}
	div#editor_container > div {
		height: 81vh;
	}	
	div#content_wrapper {
		height: 91vh;
	}
	div#editor_container {
		height: 81vh;
	}
	div#editor_read_mode {
		height: 81vh;
	}
	div#editor_metadata > h4 {
		font-size: 1.3rem;
	}
	div#editor_topbar {
		height: 5.5vh;
	}
	div#editor_topbar.annotate_mode button {
		font-size: .6rem;
	}
	div#editor_content {
		height: 70vh;
	    border-radius: 0;
	    border-left: none;
	    border-right: none;
	    border-bottom: none;		
	}
	div#editor_content.edit_mode {
		height: 67vh;
	}
	div#editor_content.edit_mode.tags {
		height: 64vh;
	}	
	div#editor_content.annotate_mode {
		height: 67vh;
	}
}