.details-panel .settings { display: flex; flex: 1 auto; flex-direction: row; .settings-menu { min-width: 180px; flex: 0 auto; ul { position: fixed; margin: 0; padding: 0; padding-top: 14px; display: flex; flex-direction: column; a { min-width: 160px; margin-left: 12px; color: @gray-normal; flex-shrink: 0; cursor: default; outline: none; margin-bottom: 10px; &.active { li { color: white; border-radius: 40px; .brand-gradient(); } } &:hover { text-decoration: none; li { cursor: default; border-radius: 40px; background-color: @color-background; } } &:focus { text-decoration: none; } } li { vertical-align: middle; padding: 5px 12px; display: flex; flex-direction: row; } } } .settings-panel { padding-left: 20px; flex: 1 auto; overflow-x: hidden; .settings-section { margin-bottom: 40px; } .container-name { margin-bottom: 20px; input { width: 40%; } p { font-weight: 300; margin-top: 5px; color: @gray-lighter; font-size: 12px; strong { font-weight: 500; } } } .env-vars-labels { width: 100%; font-size: 12px; color: @gray-lightest; margin-left: 5px; margin-bottom: 5px; margin-top: 20px; .label-key { display: inline-block; margin-right: 30px; width: 30%; } .label-val { display: inline-block; width: 50%; } } .env-vars { margin-bottom: 20px; .keyval-row { margin-bottom: 5px; } input { margin-right: 30px; &.key { width: 30%; } &.val { width: 50%; } } } .table { margin-bottom: 0; .icon-arrow-right { color: #BBB; font-size: 20px; margin: 0px 10px; flex: 0 auto; min-width: 13px; } &.ports { .table-labels { margin-top: 20px; flex: 1 auto; display: flex; font-size: 12px; color: @gray-lightest; .label-left { flex: 0 auto; min-width: 85px; margin-right: 30px; text-align: right; } .label-right { flex: 1 auto; display: inline-block; margin-left: 10px; width: 40%; } } .table-values { flex: 1 auto; display: flex; flex-direction: row; margin: 8px 0; .value-left { text-align: right; min-width: 85px; flex: 0 auto; padding: 0px; } .value-right { flex: 1 auto; -webkit-user-select: text; max-width: 170px; padding: 0px; } label { margin-left: 8px; margin-top: 1px; font-weight: 400; font-size: 13px; } input[type="checked"] { } } } &.volumes { .table-labels { margin-top: 20px; flex: 1 auto; display: flex; font-size: 12px; color: @gray-lightest; .label-left { flex: 0 auto; margin-right: 30px; } .label-right { flex: 1 auto; display: inline-block; margin-left: 10px; } } .table-values { flex: 1 auto; display: flex; flex-direction: row; margin: 8px 0; .value-left { flex: 0 auto; padding: 0px; } .value-right { flex: 1 auto; -webkit-user-select: text; padding: 0px; } .btn { margin-left: 10px; } } } } } }