diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2018-01-26 00:25:26 -0600 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2018-01-31 17:37:49 -0600 |
commit | 9f07461dac40206a80e5e080e845fe156a5c31d6 (patch) | |
tree | 97c374426e6ee971c3aeeca336d0d2d07e1bbe6d /app/assets/stylesheets/framework/ci_variable_list.scss | |
parent | 3929d93fb3c10d66cbeeaf1079b988f63cf1543a (diff) | |
download | gitlab-ce-ce-39118-dynamic-pipeline-variables-fe-base.tar.gz |
Refactor CI variable list code for usage with CI/CD settings page secret variablesce-39118-dynamic-pipeline-variables-fe-base
Part of https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/4110
Diffstat (limited to 'app/assets/stylesheets/framework/ci_variable_list.scss')
-rw-r--r-- | app/assets/stylesheets/framework/ci_variable_list.scss | 88 |
1 files changed, 88 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss new file mode 100644 index 00000000000..8f654ab363c --- /dev/null +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -0,0 +1,88 @@ +.ci-variable-list { + margin-left: 0; + margin-bottom: 0; + padding-left: 0; + list-style: none; + clear: both; +} + +.ci-variable-row { + display: flex; + align-items: flex-end; + + &:not(:last-child) { + margin-bottom: $gl-btn-padding; + + @media (max-width: $screen-xs-max) { + margin-bottom: 3 * $gl-btn-padding; + } + } + + &:last-child { + .ci-variable-body-item:last-child { + margin-right: $ci-variable-remove-button-width; + + @media (max-width: $screen-xs-max) { + margin-right: 0; + } + } + + .ci-variable-row-remove-button { + display: none; + } + + @media (max-width: $screen-xs-max) { + .ci-variable-row-body { + margin-right: $ci-variable-remove-button-width; + } + } + } +} + +.ci-variable-row-body { + display: flex; + width: 100%; + + @media (max-width: $screen-xs-max) { + display: block; + } +} + +.ci-variable-body-item { + flex: 1; + + &:not(:last-child) { + margin-right: $gl-btn-padding; + + @media (max-width: $screen-xs-max) { + margin-right: 0; + margin-bottom: $gl-btn-padding; + } + } +} + +.ci-variable-protected-item { + flex: 0 1 auto; + display: flex; + align-items: center; +} + +.ci-variable-row-remove-button { + @include transition(color); + flex-shrink: 0; + display: flex; + justify-content: center; + align-items: center; + width: $ci-variable-remove-button-width; + height: $input-height; + padding: 0; + background: transparent; + border: 0; + color: $gl-text-color-secondary; + + &:hover, + &:focus { + outline: none; + color: $gl-text-color; + } +} |