X-Git-Url: https://osm.etsi.org/gitweb/?a=blobdiff_plain;f=skyquake%2Fplugins%2Fconfig%2Fsrc%2Fdashboard%2Fconfig.scss;fp=skyquake%2Fplugins%2Fconfig%2Fsrc%2Fdashboard%2Fconfig.scss;h=36373387e16096cfb67173e76f9961eeb74b1096;hb=dfe972ff7c9f7b6b1d730e66b0b2aa8df2ce329b;hp=0000000000000000000000000000000000000000;hpb=e8b63f1993b397787576bdd884366a6640a5adea;p=osm%2FUI.git diff --git a/skyquake/plugins/config/src/dashboard/config.scss b/skyquake/plugins/config/src/dashboard/config.scss new file mode 100644 index 000000000..36373387e --- /dev/null +++ b/skyquake/plugins/config/src/dashboard/config.scss @@ -0,0 +1,271 @@ +/* + * STANDARD_RIFT_IO_COPYRIGHT + */ +@import "style/_colors.scss"; +.Config { + -ms-flex: 1 1 100%; + flex: 1 1 100%; + + .refreshStatus { + margin-left: 0.5rem; + padding: 1rem 0; + + .currentStatus { + text-transform: uppercase; + display:-ms-flexbox; + display:flex; + -ms-flex-line-pack:center; + align-content:center; + } + span.oi { + cursor: pointer; + } + } + .delete, .cancel { + cursor: pointer; + } + .associateSdnAccount { + margin: 1rem; + } + .create > .flex-row > li { + -ms-flex: 1 1 auto; + flex: 1 1 auto; + margin: 0 .25rem; + } + .create > .flex-row > li:first-child { + margin-left: .5rem; + } + .create > .flex-row > li:last-child { + margin-right: .5rem; + } + /* .flex-row > li h3 {*/ + /* background-color: #ffffff;*/ + /* padding: 12px 18px;*/ + /* text-transform: uppercase;*/ + /* }*/ + .create .options { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + text-align: center; + margin: 24px auto; + width: 90%; + flex-wrap: wrap; + margin: 24px auto; + width: 90%; + -ms-flex-pack: start; + justify-content: flex-start; + } + .create .options a { + background-color: #ffffff; + -ms-flex: 0 1 32%; + flex: 0 1 32%; + margin: 0 4px 4px 0; + padding: 4px; + box-shadow: 2px 2px rgba(0, 0, 0, 0.15); + } + .create .options a h5 { + font-size: 10px; + margin: 5px 0 0 5px; + text-align: left; + } + .create .options a img { + margin-top: 10px; + width: 70%; + } + .list-pools { + padding: 24px; + } + .list-pools li a { + background-color: #ffffff; + display: block; + font-size: 12px; + margin-bottom: 24px; + padding: 12px; + text-align: center; + box-shadow: 2px 2px rgba(0, 0, 0, 0.15); + } + .list-pools li h4 { + text-align: left; + } + .list-pools li img { + margin-top: 24px; + width: 65%; + } + .form-actions { + clear: both; + margin-top: 36px; + text-align: center; + margin-bottom:1rem; + } + .form-actions a { + color: #000000; + display: inline-block; + font-size: 12px; + padding: 8px 64px; + text-decoration: none; + text-transform: uppercase; + box-shadow: 2px 2px rgba(0, 0, 0, 0.15); + } + .form-actions a.save { + background-color: #ffffff; + border: 1px solid #cccccc; + border-top: 0; + cursor: pointer; + margin-right: 48px; + } + .form-actions a.launch { + background-color: #333333; + border: 1px solid #000000; + border-top: 0; + color: #ffffff; + } + .form-actions a.launch:hover, .form-actions a.launch:active { + background: #00acee; + color: #ffffff; + } + .create .select-type { + margin: 0.5rem; + } + /* .create-fleet-pool label {*/ + /* padding: 0.125rem;*/ + /* display: block;*/ + /* }*/ + /* .create-fleet-pool input {*/ + /* width: 350px;*/ + /* height: 35px;*/ + /* margin: 0px 20px 10px 15px;*/ + /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;*/ + /* font-size: 20px;*/ + /* }*/ + .create .optional { + font-style: italic; + } + .name-input input { + background:white !important; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff; + display: block; + font-size: 120%; + height: 35px; + margin: 0; + margin-top: 0.25rem; + width: 350px; + } + .select-type { + display:-ms-flexbox; + display:flex; + } + .accountSelection { + display:-ms-flexbox; + display:flex; + -ms-flex:0 1; + flex:0 1; + position:relative; + -ms-flex-direction:column; + flex-direction:column; + margin-right:0.5rem; + -ms-flex-align:center; + align-items:center; + border-top:$gray-light 1px solid; + border-left:$gray-light 1px solid; + border-right:$gray-dark 1px solid; + border-bottom:$gray-dark 1px solid; + box-shadow: $gray 2px 2px 3px; + cursor:pointer; + background:white; + &:last-child { + margin-right:0; + } + + input[type="radio"] { + opacity: 0.01; + position:absolute; + top:0; + } + &-imageWrapper { + display:-ms-flexbox; + display:flex; + -ms-flex-direction:column; + flex-direction:column; + margin:0.5rem; + padding:0.25rem; + background:white; + width:100px; + height:50px; + -ms-flex-align:center; + align-items:center; + -ms-flex-pack:center; + justify-content:center; + img{ + max-width:100px; + max-height:50px; + } + } + span { + padding-bottom:0.5rem; + } + &-overlay { + position:absolute; + top:0; + left:0; + right:0; + bottom:0; + height:100%; + width:100%; + background: rgba(0, 0, 0, 0.25); + opacity: 0.2; + } + &--isSelected{ + border-bottom:$gray-light 1px solid; + border-right:$gray-light 1px solid; + border-top:$gray-dark 1px solid; + border-left:$gray-dark 1px solid; + box-shadow: $gray 2px 2px 3px inset; + } + } + .configForm { + margin:0.5rem 0; + width:100%; + background: $gray-lighter; + &-title { + background-color: #ffffff; + padding: 12px 0.5rem; + text-transform: uppercase; + &--edit { + display:-ms-flexbox; + display:flex; + -ms-flex-pack:justify; + justify-content:space-between; + -ms-flex-align: center; + align-items: center; + >div { + display:-ms-flexbox; + display:flex; + -ms-flex-align:center; + align-items:center; + } + } + } + img { + height:2rem; + margin:0 0.5rem; + } + &-content { + padding:0.5rem; + } + &-nestedParams { + display:-ms-flexbox; + display:flex; + > label { + margin-right:0.5rem; + } + > label:last-child { + margin-right:0rem; + } + + } + } + .row { + display:-ms-flexbox; + display:flex; + } +}