Boostnote/browser/main/modals/PreferencesModal/StoragesTab.styl

@import('./ConfigTab')

.list
  margin-bottom 15px
  font-size 14px

.folderList
  padding 0 15px

.folderList-item
  height 30px
  line-height 30px
  border-bottom $ui-border

.folderList-empty
  height 30px
  line-height 30px
  font-size 12px
  color $ui-inactive-text-color

.list-empty
  height 30px
  color $ui-inactive-text-color
.list-control
  height 30px
.list-control-addStorageButton
  position absolute
  top 7px
  right 20px
  height $tab--button-height
  padding 0 15px
  border $ui-border
  colorDefaultButton()
  font-size $tab--button-font-size
  border-radius 2px
.list-attachment-label
  margin-bottom 10px
  color $ui-text-color
.list-attachement-clear-button
  height 30px
  border none
  border-top-right-radius 2px
  border-bottom-right-radius 2px
  colorPrimaryButton()
  vertical-align middle
  padding 0 20px

.addStorage
  margin-bottom 15px

.addStorage-header
  font-size 24px
  color $ui-text-color
  padding 5px
  border-bottom $default-border
  margin-bottom 15px

.addStorage-body-section
  margin-bottom 15px
  display flex
  line-height 30px

.addStorage-body-section-label
  width 150px
  text-align right
  margin-right 10px

.addStorage-body-section-name
  flex 1
.addStorage-body-section-name-input
  height 30px
  vertical-align middle
  width 150px
  font-size 12px
  border solid 1px $border-color
  border-radius 2px
  padding 0 5px

.addStorage-body-section-type
  flex 1
.addStorage-body-section-type-select
  height 30px
.addStorage-body-section-type-description
  margin 5px
  font-size 12px
  color $ui-inactive-text-color
  line-height 16px

.addStorage-body-section-path
  flex 1
.addStorage-body-section-path-input
  height 30px
  vertical-align middle
  width 150px
  font-size 12px
  border-style solid
  border-width 1px 0 1px 1px
  border-color $border-color
  border-top-left-radius 2px
  border-bottom-left-radius 2px
  padding 0 5px
.addStorage-body-section-path-button
  height 30px
  border none
  border-top-right-radius 2px
  border-bottom-right-radius 2px
  colorPrimaryButton()
  vertical-align middle
.addStorage-body-control
  border-top $default-border
  padding-top 10px
  box-sizing border-box
  height 40px
  text-align right

.addStorage-body-control-createButton
  colorPrimaryButton()
  border none
  border-radius 2px
  height 30px
  padding 0 15px
  margin-right 5px
.addStorage-body-control-cancelButton
  colorDefaultButton()
  border $default-border
  border-radius 2px
  height 30px
  padding 0 15px

body[data-theme="dark"]
  .root
    padding 15px
    color $ui-dark-text-color

  .folderList-item
    border-bottom $ui-dark-border

  .folderList-empty
    color $ui-dark-inactive-text-color

  .list-empty
    color $ui-dark-inactive-text-color
  .list-control-addStorageButton
    border-color $ui-dark-borderColor
    colorDarkDefaultButton()
    border-radius 2px

  .addStorage-header
    color $ui-dark-text-color
    border-color $ui-dark-borderColor

  .addStorage-body-section-name-input
    border-color $ui-dark-borderColor

  .addStorage-body-section-type-description
    color $ui-dark-inactive-text-color

  .addStorage-body-section-path-button
    colorPrimaryButton()
  .addStorage-body-control
    border-color $ui-dark-borderColor

  .addStorage-body-control-createButton
    colorDarkPrimaryButton()
  .addStorage-body-control-cancelButton
    colorDarkDefaultButton()
    border-color $ui-dark-borderColor
  .list-attachement-clear-button
    colorDarkPrimaryButton()

apply-theme(theme)
  body[data-theme={theme}]
    .root
      color get-theme-var(theme, 'text-color')

    .folderList-item
      border-bottom get-theme-var(theme, 'borderColor')

    .folderList-empty
      color get-theme-var(theme, 'text-color')

    .list-empty
      color get-theme-var(theme, 'text-color')
    .list-control-addStorageButton
      border-color get-theme-var(theme, 'button-backgroundColor')
      background-color get-theme-var(theme, 'button-backgroundColor')
      color get-theme-var(theme, 'text-color')

    .addStorage-header
      color get-theme-var(theme, 'text-color')
      border-color get-theme-var(theme, 'borderColor')

    .addStorage-body-section-name-input
      border-color $get-theme-var(theme, 'borderColor')

    .addStorage-body-section-type-description
      color get-theme-var(theme, 'text-color')

    .addStorage-body-section-path-button
      colorPrimaryButton()
    .addStorage-body-control
      border-color get-theme-var(theme, 'borderColor')

    .addStorage-body-control-createButton
      colorDarkPrimaryButton()
    .addStorage-body-control-cancelButton
      colorDarkDefaultButton()
      border-color get-theme-var(theme, 'borderColor')
    .list-attachement-clear-button
      colorThemedPrimaryButton(theme)

for theme in 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)