Commit fbba308a authored by Serhii Myronets's avatar Serhii Myronets
Browse files

DS-7517: Add styles for the access popover on the group page

parent 0dac6868
......@@ -504,6 +504,16 @@
color: #fff;
}
.socialblue--sky.path-group .cover-wrap a[data-toggle='popover'].icon-before {
display: inline-block;
margin-top: 1rem;
font-weight: 700;
}
.socialblue--sky.path-group .cover-wrap a[data-toggle='popover'].icon-before svg {
margin-right: .5rem;
}
.socialblue--sky.path-group .cover-wrap .hero-footer {
padding-top: 0;
}
......
......@@ -4,7 +4,9 @@
}
.cover .page-title {
position: relative;
color: white;
z-index: 1;
}
.cover .hero-avatar {
......@@ -25,7 +27,8 @@
.cover .hero-form[role='search'] .form-control:focus, .cover .hero-form[role='search'] .form-control:active,
.cover .hero-form[role='search'] .form-control:focus ~ .search-icon,
.cover .hero-form[role='search'] .form-control:active ~ .search-icon {
box-shadow: 0 2px 0 0 #1f80aa;
-webkit-box-shadow: 0 2px 0 0 #1f80aa;
box-shadow: 0 2px 0 0 #1f80aa;
}
.cover .hero-form[role='search'] .form-submit,
......
......@@ -68,3 +68,69 @@
.popover.left > .arrow:after {
border-left-color: #fff;
}
.path-group .popover {
max-width: 378px !important;
width: 100%;
}
.path-group .popover .popover-title {
padding: .75rem 1.25rem .75rem 52px;
font-weight: bold;
font-size: 16px;
line-height: 24px;
border: none;
background: #f3f3f3 url("../../components/03-molecules/popover/icon-cog.svg") no-repeat 20px center/24px 24px;
}
.path-group .popover .popover-content {
padding: 1.25rem;
}
.path-group .popover .popover-content .form-group {
margin: 0;
}
.path-group .popover .popover-content .title {
display: block;
margin-bottom: .5rem;
font-size: 14px;
line-height: 21px;
font-weight: 400;
color: #4d4d4d;
}
.path-group .popover .popover-content .group-visibility-details {
padding: .75rem;
border-radius: 5px;
background: #f3f3f3;
margin-bottom: 1.5rem;
}
.path-group .popover .popover-content .group-visibility-details:last-child {
margin-bottom: 0;
}
.path-group .popover .popover-content p {
position: relative;
padding-left: 33px;
font-size: 14px;
line-height: 21px;
margin-bottom: .75rem;
}
.path-group .popover .popover-content p:last-child {
margin-bottom: 0;
}
.path-group .popover .popover-content p strong {
font-weight: bold;
}
.path-group .popover .popover-content svg {
position: absolute;
top: 0;
left: 0;
width: 21px;
height: 21px;
}
<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path fill="#4d4d4d" d="m15.426 9.249c.045-.327.076-.658.076-.998 0-.36-.035-.71-.086-1.056l-2.275-.293c-.115-.426-.283-.827-.498-1.201l1.396-1.808c-.416-.551-.906-1.039-1.459-1.452l-1.807 1.391c-.373-.215-.774-.383-1.2-.499l-.292-2.252c-.338-.048-.677-.081-1.029-.081s-.694.033-1.032.082l-.291 2.251c-.426.116-.826.284-1.2.499l-1.805-1.391c-.552.413-1.044.901-1.459 1.452l1.395 1.808c-.215.374-.383.774-.499 1.2l-2.276.294c-.05.346-.085.696-.085 1.056 0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2l-1.417 1.836c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311c.426-.115.826-.283 1.201-.498l1.842 1.42c.547-.414 1.031-.902 1.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514c-1.406 0-2.543-1.137-2.543-2.541 0-1.402 1.137-2.541 2.543-2.541 1.402 0 2.541 1.138 2.541 2.541 0 1.404-1.139 2.541-2.541 2.541z"/></svg>
\ No newline at end of file
......@@ -65,3 +65,73 @@
}
}
}
// Styles for the popover on the group page.
.path-group {
.popover {
max-width: 378px !important;
width: 100%;
.popover-title {
padding: .75rem 1.25rem .75rem 52px;
font-weight: bold;
font-size: 16px;
line-height: 24px;
border: none;
background: #f3f3f3 url('../../components/03-molecules/popover/icon-cog.svg') no-repeat 20px center/24px 24px
}
.popover-content {
padding: 1.25rem;
.form-group {
margin: 0;
}
.title {
display: block;
margin-bottom: .5rem;
font-size: 14px;
line-height: 21px;
font-weight: 400;
color: #4d4d4d;
}
.group-visibility-details {
padding: .75rem;
border-radius: 5px;
background: #f3f3f3;
margin-bottom: 1.5rem;
&:last-child {
margin-bottom: 0;
}
}
p {
position: relative;
padding-left: 33px;
font-size: 14px;
line-height: 21px;
margin-bottom: .75rem;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: bold;
}
}
svg {
position: absolute;
top: 0;
left: 0;
width: 21px;
height: 21px;
}
}
}
}
......@@ -694,6 +694,16 @@
}
}
a[data-toggle='popover'].icon-before {
display: inline-block;
margin-top: 1rem;
font-weight: 700;
svg {
margin-right: .5rem;
}
}
.hero-footer {
padding-top: 0;
}
......
......@@ -6,7 +6,9 @@
background-color: $brand-primary;
.page-title {
position: relative;
color: white;
z-index: 1;
}
.hero-avatar {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment