diff --git a/app/components/BookBuilder/Chapter.jsx b/app/components/BookBuilder/Chapter.jsx index 790009c181a661c8d1c81cac84c1db653c852935..aea05ef154367a2c35962ae106b8d84225160b5f 100644 --- a/app/components/BookBuilder/Chapter.jsx +++ b/app/components/BookBuilder/Chapter.jsx @@ -228,7 +228,8 @@ export class Chapter extends React.Component { _myHandler (evt) { if (evt.target.id === 'dropbutton' || evt.target.parentElement.id === 'dropbutton' || - evt.target.classList.contains('caret')) { + evt.target.classList.contains('caret') || + evt.target.classList.contains('drop-input')) { return } this.setState({ @@ -402,7 +403,7 @@ export class Chapter extends React.Component { <div className={styles.dropDownInputContairer}> <TextInput ref='dropDownInput' - className={styles.dropDownInput} + className={'drop-input ' + styles.dropDownInput} onSave={this._onClickCustomTitle} placeholder='Type a custom title' /> diff --git a/app/components/BookBuilder/styles/bookBuilder.local.scss b/app/components/BookBuilder/styles/bookBuilder.local.scss index d1ae2f43074f1d42c3fb64cf6328a341202cd1dc..2cb86caeccae3019e6da66db5f2cec532e5ba2e6 100644 --- a/app/components/BookBuilder/styles/bookBuilder.local.scss +++ b/app/components/BookBuilder/styles/bookBuilder.local.scss @@ -97,11 +97,12 @@ $white: #fff; padding: 10px; .dropDownInput { - border-left: none !important; - border-right: none !important; - border-top: none !important; - width: 100% !important; + border-left: 0; + border-right: 0; + border-top: 0; outline: none; + width: 100%; + } } @@ -171,7 +172,7 @@ $white: #fff; .chapterContainer { font-style: italic; margin-top: 2%; - padding: 0px !important; + padding: 0; } .grabIcon { @@ -186,8 +187,10 @@ $white: #fff; .grabIconBody { position: relative; - bottom: 5px !important; - top: 0 !important; + bottom: 5px; + top: 0; + font-size: 20px; + padding-bottom: 3px; } .tooltip { @@ -264,34 +267,28 @@ $white: #fff; .isPart { h3 { - // color: $dark-grey; font-size: 20px !important; - // font-style: } .leftBorderBody { border: 0 !important; } - - .grabIconBody { - font-size: 20px; - padding-bottom: 3px !important; - } } .chapterTitle { h3 { - font-family: Fira Sans !important; - font-style: italic; - margin: 0px !important; color: #333 !important; - padding-bottom: 0px; - font-size: 18px; float: left; + font-size: 18px; + font-style: italic; + margin: 0; + max-width: 80%; + padding-bottom: 0; padding-right: 1%; - max-width:80%; + } } + .chapterActions { a { bottom: 24px; @@ -301,13 +298,13 @@ $white: #fff; text-decoration: none; &:hover { - cursor: pointer; color: $dark-grey; + cursor: pointer; transition: .25s ease-in-out 0s; } } + .lEditing { - font-family: Fira Sans!important; background: $dark-grey; color: white; padding:5px; @@ -370,7 +367,6 @@ $white: #fff; position:relative; top:4px; li { - //color:$light-grey; float:left; padding-right:2%; } @@ -396,31 +392,34 @@ $white: #fff; text-align: center; } .leftBox { - border-right:0px!important; + border-right: 0; } .rightBox { - border-left:0px!important; + border-left: 0; } + .boxDiver { - border-right:1px solid $dark-grey; + border-right: 1px solid $dark-grey; + bottom: 5px; height: 31px; position: relative; - bottom: 5px; right: 23px; } + .boxActive { - height:16px; - width: 16px; - margin:2px 0px 0px 2px; background-color: $dark-grey; - cursor:pointer; + cursor: pointer; + height: 16px; + margin: 2px 0 0 2px; + width: 16px; } .boxInactiveHover { - height:16px; - width: 16px; - margin:2px 0px 0px 2px; background-color: #fff; cursor: pointer; + height: 16px; + margin: 2px 0 0 2px; + width: 16px; + &:hover { background-color: $light-grey; transition: .25s ease-in-out 0s; @@ -432,7 +431,7 @@ $white: #fff; .leftBorderComponent { border-left: 2px solid $light-grey; - width:2px; + width: 2px; height: 68px; position: relative; top: 30px;