mirror of
https://github.com/kubesphere/website.git
synced 2025-12-26 00:12:48 +00:00
Merge pull request #2251 from weili520/folder_page
fix: Update lesson menu styles on the lesson page
This commit is contained in:
KubeSphere CI Bot
GitHub
commit
f2c4b94ffc
|
|
@ -1,5 +1,40 @@
|
|||
@import "variables";
|
||||
|
||||
@mixin tooltip {
|
||||
.tooltip {
|
||||
visibility: hidden;
|
||||
width: 80px;
|
||||
padding: 8px 12px;
|
||||
background: #242E42;
|
||||
box-shadow: 0px 4px 8px rgba(36, 46, 66, 0.2);
|
||||
border-radius: 4px;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
/* 定位 */
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
/* 提示工具底部 */
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #242E42 transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
|
||||
background-image: linear-gradient(to bottom, rgba(134, 219, 162, 0.9), rgba(0, 170, 114, 0.9));
|
||||
|
|
@ -88,7 +123,8 @@
|
|||
.right {
|
||||
box-sizing: border-box;
|
||||
width: 368px;
|
||||
padding: 24px;
|
||||
padding: 24px 20px 0 20px;
|
||||
min-height: 488px;
|
||||
max-height: 600px;
|
||||
margin-left: 15px;
|
||||
overflow: auto;
|
||||
|
|
@ -98,163 +134,200 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.lesson-div {
|
||||
margin-top: 20px;
|
||||
.sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > p {
|
||||
.sectionFolder {
|
||||
box-sizing: border-box;
|
||||
width: 328px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
padding: 9px 16px;
|
||||
background: #F9FBFD;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
padding-left: 9px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.04px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background-color: #36435c;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: #EFF4F9;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #36435c;
|
||||
&:hover {
|
||||
color: #55bc8a;
|
||||
}
|
||||
.text {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
width: 264px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-image: url("/images/learn/video.svg");
|
||||
}
|
||||
|
||||
.play-span {
|
||||
display: none;
|
||||
height: 12px;
|
||||
font-size: 0;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
margin-right: 2px;
|
||||
background-color: #55bc8a;
|
||||
}
|
||||
}
|
||||
|
||||
.playing {
|
||||
display: inline-block;
|
||||
span {
|
||||
animation-name: playing;
|
||||
animation-duration: 1s;
|
||||
animation-timing-function: ease;
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:first-child {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
&:last-child {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
display: block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
background-image: url('/images/learn/icon-setion-close.svg');
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
right: 17px;
|
||||
}
|
||||
}
|
||||
& > p.active {
|
||||
a {
|
||||
color: #55bc8a;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-color: #55bc8a;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lesson-link-div {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
a {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100px;
|
||||
height: 72px;
|
||||
padding: 11px 20px 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
color: #8f94a1;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f9fa;
|
||||
border: solid 1px transparent;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: solid 1px #4ca986;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #00a971;
|
||||
border: solid 1px #55bc8a;
|
||||
background-color: #cdf6d5;
|
||||
}
|
||||
background: linear-gradient(180deg, #242E42 0%, #36435C 100%) !important;
|
||||
color: #ffffff;
|
||||
|
||||
.lesson {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-image.svg");
|
||||
&>.icon {
|
||||
background-image: url('/images/learn/icon-setion-open.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.lesson.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-image-active.svg");
|
||||
ul {
|
||||
transition: 1.2s;
|
||||
|
||||
li {
|
||||
width: 320px;
|
||||
height: 24px;
|
||||
margin: 16px 0px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.textLink {
|
||||
width: 252px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.videoIcon {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 8px;
|
||||
background-image: url('/images/learn/lesson-video.svg');
|
||||
}
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
font-family: PingFang SC;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
width: 68px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.picture {
|
||||
width: 16px;
|
||||
height: 12px;
|
||||
background-image: url('/images/learn/actions-picture.svg');
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
@include tooltip();
|
||||
|
||||
&:hover {
|
||||
background-image: url('/images/learn/actions-picture-active.svg');
|
||||
|
||||
.tooltip {
|
||||
visibility: visible;
|
||||
bottom: 20px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activePicture {
|
||||
background-image: url('/images/learn/actions-picture-open.svg') !important;
|
||||
}
|
||||
|
||||
.ppt {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url('/images/learn/actions-ppt.svg');
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
@include tooltip();
|
||||
|
||||
&:hover {
|
||||
.tooltip {
|
||||
visibility: visible;
|
||||
bottom: 20px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-image: url('/images/learn/actions-download.svg');
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
@include tooltip();
|
||||
|
||||
&:hover {
|
||||
.tooltip {
|
||||
visibility: visible;
|
||||
bottom: 20px;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.textLink {
|
||||
.videoIcon {
|
||||
background-image: url('/images/learn/lesson-video-hover.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #4CA986;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pptActive{
|
||||
.text {
|
||||
color: #4CA986;
|
||||
}
|
||||
}
|
||||
|
||||
.activeLine {
|
||||
.textLink {
|
||||
.videoIcon {
|
||||
background-image: url('/images/learn/lesson-video-play.svg') !important;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #4CA986;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.courseware {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-ppt.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.courseware.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-ppt-active.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.examination {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-download.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.examination.active {
|
||||
span {
|
||||
background-image: url("/images/learn/icon-download-active.svg");
|
||||
}
|
||||
.hideLesson {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,57 +25,55 @@
|
|||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="right" id="lesson">
|
||||
{{ $relPermalink := .RelPermalink }}
|
||||
|
||||
{{ with .Site.GetPage "/learn" }}
|
||||
{{ range .Sections }}
|
||||
{{ range .Sections }}
|
||||
<div class="sections">
|
||||
<div class="sectionFolder">
|
||||
<span class="text">{{ .LinkTitle }}</span>
|
||||
<span class="icon"></span>
|
||||
</div>
|
||||
<ul id="list" class="hideLesson">
|
||||
{{ range .Sections}}
|
||||
<div class="lesson-div">
|
||||
<p class='{{ if eq (.GetPage "video").RelPermalink $relPermalink }}active{{ end }}'>
|
||||
<a href='{{ (.GetPage "video").RelPermalink }}'>
|
||||
{{ .LinkTitle }}
|
||||
{{ if eq (.GetPage "video").RelPermalink $relPermalink }}
|
||||
<span id="play-icon" class="play-span">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
{{ else }}
|
||||
<span class="icon"></span>
|
||||
{{ end }}
|
||||
</a>
|
||||
</p>
|
||||
<div class="lesson-link-div">
|
||||
{{ with .GetPage "content" }}
|
||||
<a class="lesson {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "warnGraphic explanation" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
<li class="{{ if eq (.GetPage " video").RelPermalink $relPermalink }}activeLine{{ end }}">
|
||||
<a class="textLink" href='{{ (.GetPage "video").RelPermalink }}'>
|
||||
<span class="videoIcon"></span>
|
||||
<span class="text" title="{{ .LinkTitle }}">{{ .LinkTitle }}</span>
|
||||
</a>
|
||||
<div class="actions">
|
||||
{{ with .GetPage "content" }}
|
||||
<a class="picture {{ if eq .RelPermalink $relPermalink }} activePicture {{ end }}"
|
||||
href="{{ .RelPermalink }}">
|
||||
<div class="tooltip">{{ i18n "warnGraphic explanation" }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ with .GetPage "courseware" }}
|
||||
<a class="courseware {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "PPT courseware" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ with .GetPage "examination" }}
|
||||
<a class="examination {{ if eq .RelPermalink $relPermalink }} active {{ end }}" href="{{ .RelPermalink }}">
|
||||
<span></span>
|
||||
<p>{{ i18n "Self-test" }}</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{/* The follows function has not yet been activated */}}
|
||||
{{/* and styles need update */}}
|
||||
{{ with .GetPage "courseware" }}
|
||||
<a class="ppt {{ if eq .RelPermalink $relPermalink }} activeCourseware {{ end }}"
|
||||
href="{{ .RelPermalink }}">
|
||||
<div class="tooltip">{{ i18n "PPT courseware" }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
{{ with .GetPage "examination" }}
|
||||
<a class="download {{ if eq .RelPermalink $relPermalink }} activeExamination {{ end }}"
|
||||
href="{{ .RelPermalink }}">
|
||||
<div class="tooltip">{{ i18n "Self-test" }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
</li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<script>
|
||||
var icon = $("#play-icon")
|
||||
|
|
@ -87,5 +85,30 @@
|
|||
var handlePauseVideo = function() {
|
||||
icon.removeClass('playing')
|
||||
}
|
||||
|
||||
var autoOpenFolder = function () {
|
||||
const lessonList = $('#lesson').children()
|
||||
lessonList.each((index, item) => {
|
||||
const sectionFolder = $(item).children('.sectionFolder')
|
||||
const activeVideo = $(item).find('li.activeLine')
|
||||
const isPicture = $(item).find('.activePicture')
|
||||
// open menu folder
|
||||
if (activeVideo.length > 0 || isPicture.length > 0) {
|
||||
sectionFolder.addClass('active')
|
||||
sectionFolder.next().removeClass('hideLesson')
|
||||
}
|
||||
if (isPicture.length > 0) {
|
||||
$(isPicture[0]).parents('li').removeClass('pptActive').addClass('pptActive')
|
||||
}
|
||||
// control menu opening and closing
|
||||
sectionFolder.on('click', function () {
|
||||
sectionFolder.toggleClass('active')
|
||||
const ulList = sectionFolder.next()
|
||||
ulList.toggleClass('hideLesson')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
autoOpenFolder()
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1386 6.08157H12.858L8.09906 10.8405L3.34009 6.08157H6.05951V2.00244H10.1386V6.08157ZM3.34009 13.56V12.2002H12.858V13.56H3.34009Z" fill="#ABB4BE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 303 B |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0041 11.4845H1.81035C1.19941 11.4845 0.704102 10.9892 0.704102 10.3782V1.12041C0.704102 0.509473 1.19941 0.0141602 1.81035 0.0141602H14.0057C14.6166 0.0141602 15.1119 0.509473 15.1119 1.12041V10.3782C15.1119 10.9892 14.615 11.4845 14.0041 11.4845Z" fill="#36435C"/>
|
||||
<path d="M11.3074 2.68135C11.3074 3.15338 11.69 3.53604 12.1621 3.53604C12.6341 3.53604 13.0167 3.15338 13.0167 2.68135C13.0167 2.20932 12.6341 1.82666 12.1621 1.82666C11.69 1.82666 11.3074 2.20932 11.3074 2.68135H11.3074Z" fill="white"/>
|
||||
<path d="M12.8245 8.2079L10.5948 4.8454C10.5542 4.6829 10.4511 4.53446 10.2932 4.44383C9.987 4.26727 9.59637 4.37196 9.41981 4.67821L8.17137 6.84071L6.12762 3.30321C6.0745 3.17977 5.98387 3.07196 5.85887 3.00008C5.55262 2.82352 5.162 2.92821 4.98543 3.23446L3.49168 5.82352H3.49481L0.758872 10.561C0.58231 10.8673 0.686997 11.2579 0.993247 11.4345C1.2995 11.611 1.69012 11.5063 1.86668 11.2001L5.21669 5.39852C5.22762 5.38133 5.237 5.36258 5.24481 5.34383L5.537 4.83758L7.59481 8.40165C7.69481 8.57352 7.862 8.6829 8.04325 8.71258C8.31043 8.77508 8.5995 8.65946 8.74325 8.40946L9.95887 6.30321L11.7151 8.84696C11.8917 9.15321 12.2839 9.2579 12.5886 9.08133C12.8964 8.90477 13.0011 8.51415 12.8245 8.2079V8.2079Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0041 11.4845H1.81035C1.19941 11.4845 0.704102 10.9892 0.704102 10.3782V1.12041C0.704102 0.509473 1.19941 0.0141602 1.81035 0.0141602H14.0057C14.6166 0.0141602 15.1119 0.509473 15.1119 1.12041V10.3782C15.1119 10.9892 14.615 11.4845 14.0041 11.4845Z" fill="#4CA986"/>
|
||||
<path d="M11.3074 2.68135C11.3074 3.15338 11.69 3.53604 12.1621 3.53604C12.6341 3.53604 13.0167 3.15338 13.0167 2.68135C13.0167 2.20932 12.6341 1.82666 12.1621 1.82666C11.69 1.82666 11.3074 2.20932 11.3074 2.68135H11.3074Z" fill="white"/>
|
||||
<path d="M12.8245 8.2079L10.5948 4.8454C10.5542 4.6829 10.4511 4.53446 10.2932 4.44383C9.987 4.26727 9.59637 4.37196 9.41981 4.67821L8.17137 6.84071L6.12762 3.30321C6.0745 3.17977 5.98387 3.07196 5.85887 3.00008C5.55262 2.82352 5.162 2.92821 4.98544 3.23446L3.49168 5.82352H3.49481L0.758872 10.561C0.58231 10.8673 0.686997 11.2579 0.993247 11.4345C1.2995 11.611 1.69012 11.5063 1.86668 11.2001L5.21669 5.39852C5.22762 5.38133 5.237 5.36258 5.24481 5.34383L5.537 4.83758L7.59481 8.40165C7.69481 8.57352 7.862 8.6829 8.04325 8.71258C8.31043 8.77508 8.5995 8.65946 8.74325 8.40946L9.95887 6.30321L11.7151 8.84696C11.8917 9.15321 12.2839 9.2579 12.5886 9.08133C12.8964 8.90477 13.0011 8.51415 12.8245 8.2079Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.0041 11.4845H1.81035C1.19941 11.4845 0.704102 10.9892 0.704102 10.3782V1.12041C0.704102 0.509473 1.19941 0.0141602 1.81035 0.0141602H14.0057C14.6166 0.0141602 15.1119 0.509473 15.1119 1.12041V10.3782C15.1119 10.9892 14.615 11.4845 14.0041 11.4845Z" fill="#ABB4BE"/>
|
||||
<path d="M11.3074 2.68135C11.3074 3.15338 11.69 3.53604 12.1621 3.53604C12.6341 3.53604 13.0167 3.15338 13.0167 2.68135C13.0167 2.20932 12.6341 1.82666 12.1621 1.82666C11.69 1.82666 11.3074 2.20932 11.3074 2.68135H11.3074Z" fill="white"/>
|
||||
<path d="M12.8245 8.2079L10.5948 4.8454C10.5542 4.6829 10.4511 4.53446 10.2932 4.44383C9.987 4.26727 9.59637 4.37196 9.41981 4.67821L8.17137 6.84071L6.12762 3.30321C6.0745 3.17977 5.98387 3.07196 5.85887 3.00008C5.55262 2.82352 5.162 2.92821 4.98544 3.23446L3.49168 5.82352H3.49481L0.758872 10.561C0.58231 10.8673 0.686997 11.2579 0.993247 11.4345C1.2995 11.611 1.69012 11.5063 1.86668 11.2001L5.21669 5.39852C5.22762 5.38133 5.237 5.36258 5.24481 5.34383L5.537 4.83758L7.59481 8.40165C7.69481 8.57352 7.862 8.6829 8.04325 8.71258C8.31043 8.77508 8.5995 8.65946 8.74325 8.40946L9.95887 6.30321L11.7151 8.84696C11.8917 9.15321 12.2839 9.2579 12.5886 9.08133C12.8964 8.90477 13.0011 8.51415 12.8245 8.2079Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.87552 4.39883H13.4245V7.0655H2.50297V0.67334H9.77748L9.87552 4.39883ZM10.1696 3.98707V0.67334L13.4245 3.98707H10.1696ZM3.98007 10.2117H3.61897V11.2069H4.15003C4.48987 11.2069 4.65984 11.0289 4.65984 10.6728C4.65984 10.3657 4.43317 10.2117 3.98007 10.2117ZM0.679443 14.34V8.0655H15.2677V14.34H0.679443ZM4.25623 12.2508H3.61897V13.6344H2.34446V9.16785H4.21372C5.30399 9.18416 5.86329 9.68597 5.89184 10.6729C5.87756 11.7087 5.33231 12.2348 4.25623 12.2508ZM7.52752 12.2508H8.16478C9.24078 12.2348 9.78611 11.7087 9.80046 10.6729C9.77183 9.68597 9.21262 9.18416 8.12234 9.16785H6.25301V13.6344H7.52752V12.2508ZM13.6027 10.333H12.4556V13.6344H11.1598V10.333H10.0128V9.16785H13.6027V10.333ZM7.52752 10.2117H7.88862C8.34164 10.2117 8.56838 10.3657 8.56838 10.6728C8.56838 11.0289 8.39842 11.2069 8.05858 11.2069H7.52752V10.2117Z" fill="#ABB4BE"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 996 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.68648 6.39179C5.85249 6.58151 6.14762 6.58151 6.31363 6.39179L11.2287 0.774539C11.4645 0.505129 11.2731 0.0834961 10.9152 0.0834961H1.08496C0.726975 0.0834961 0.535651 0.50513 0.771384 0.77454L5.68648 6.39179Z" fill="#919AA3"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.68648 0.608354C5.85249 0.418634 6.14762 0.418635 6.31363 0.608354L11.2287 6.22561C11.4645 6.49502 11.2731 6.91665 10.9152 6.91665H1.08496C0.726975 6.91665 0.535651 6.49502 0.771384 6.22561L5.68648 0.608354Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 336 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6C0 2.67273 2.67273 0 6 0C9.32727 0 12 2.67273 12 6C12 9.32727 9.32727 12 6 12C2.67273 12 0 9.32727 0 6ZM4.77286 8.42732L8.59104 6.2455C8.72741 6.16368 8.78195 6.00004 8.67286 5.89095C8.64559 5.83641 8.61831 5.80914 8.56377 5.78186L4.77286 3.60004C4.69104 3.57277 4.60922 3.57277 4.52741 3.60004C4.47286 3.60004 4.41831 3.65459 4.39104 3.70914C4.36377 3.73641 4.36377 3.76368 4.36377 3.81823V8.18186C4.36377 8.23641 4.36377 8.29095 4.39104 8.31823C4.47286 8.45459 4.6365 8.50914 4.77286 8.42732Z" fill="#4CA986"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
|
|
@ -0,0 +1,17 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 -1 0 12)">
|
||||
<rect width="2" height="12" fill="#4CA986">
|
||||
<animate attributeName="height" begin="0s" dur="4.2s"
|
||||
values="2;4;5;8;6;3;6;4;6;2;6;1;6;5;3;3;2;3;7;9;6" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="4" width="2" height="7" fill="#4CA986">
|
||||
<animate attributeName="height" begin="0s" dur="2s" values="8;5;3;5;7;2;7;3;1;4;6;7" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
<rect x="8" width="2" height="10" fill="#4CA986">
|
||||
<animate attributeName="height" begin="0s" dur="2s" values="3;4;3;8;5;9;4;9;7;4;6;3" calcMode="linear"
|
||||
repeatCount="indefinite" />
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 803 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6C0 2.67273 2.67273 0 6 0C9.32727 0 12 2.67273 12 6C12 9.32727 9.32727 12 6 12C2.67273 12 0 9.32727 0 6ZM4.77286 8.42732L8.59104 6.2455C8.72741 6.16368 8.78195 6.00004 8.67286 5.89095C8.64559 5.83641 8.61831 5.80914 8.56377 5.78186L4.77286 3.60004C4.69104 3.57277 4.60922 3.57277 4.52741 3.60004C4.47286 3.60004 4.41831 3.65459 4.39104 3.70914C4.36377 3.73641 4.36377 3.76368 4.36377 3.81823V8.18186C4.36377 8.23641 4.36377 8.29095 4.39104 8.31823C4.47286 8.45459 4.6365 8.50914 4.77286 8.42732Z" fill="#36435C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 669 B |
Loading…
Reference in New Issue