app/styles/_components.config.scss (120 lines of code) (raw):

#theme-builder { .icon { color: $clr-primary; } .port-row { margin-bottom: 5px; .btn { margin-bottom: 5px; font-size: 0.9em; } } .theme-config { padding: 0; border-right: 1px solid $clr-border-dark; border-bottom: 1px solid $clr-border-dark; h5 { margin: 10px; } .form-group .col-sm-3 { padding-right: 0; text-align: right; @media (max-width: 768px) { & { padding-right: 15px; } } input { margin-top: 0; } } h5 ~ h5, .axis-group h5 { border-top: 1px solid $clr-border; padding-top: 20px; } form + form { margin-top: 10px; } label { padding-right: 0; } .input-group { width: 100%; } .form-control, .input-group-addon { border-color: $clr-border; box-shadow: none; border-radius: 0; &:hover { border-color: $clr-border-dark; } } .colorpicker-element { margin-bottom: 5px; border-radius: 0; } .input-group-addon { background-color: #fff; i { border: 1px solid $clr-border; } } .panel-group { margin-bottom: 0; } .panel { border: none; } .panel-heading { border: none; border-top: 1px solid $clr-border-dark; border-radius: 0; color: $clr-primary; padding: 0; transition: 0.5s; &:hover { background-color: $clr-lighter; } } .panel-title a { display: block; padding: 10px 16px; text-decoration: none !important; } .panel-body { border-top: none !important; } } .space-row { margin-left: -4px; } .theme-plan-row { .col-xs-6:nth-child(even) { padding-left: 5px; } .col-xs-6:nth-child(odd) { padding-right: 5px; } } .theme-plan-group { display: flex; flex-wrap: wrap; justify-content: space-between; width: auto; height: 32px; overflow: hidden; border: 1px solid $clr-border; padding: 5px; border-radius: 4px; margin-bottom: 8px; } .theme-plan-color { width: 20px; height: 20px; margin-bottom: 10px; margin-left: 2px; margin-right: 2px; display: inline-block; border-radius: 3px; } }