forstok-ui-lib 5.3.3 → 5.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.3.3",
+  "version": "5.3.6",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/assets/stylesheets/shares.styles.ts

@@ -171,7 +171,7 @@ export const TabsContent = styled.div<{ $mode?: string }>`
   }
   ${getTabsContentModFunc}
 `
-export const FoContainer = styled.section`
+export const FoContainer = styled.section<{ $mode?: string }>` 
   position: relative;
   > section, 
   > article {
@@ -185,6 +185,80 @@ export const FoContainer = styled.section`
   > article {
     height: calc(100vh - 50px);
   }
+  ${({ $mode }:{ $mode?: string }) => {
+    if ($mode === 'detail') {
+      return css` 
+        margin-top: -4px;
+        @media only screen and (min-width: 768px) {
+          > section, 
+          > article {
+            > aside {
+              padding-left: 16px;
+              padding-right: 16px;
+            }
+          }
+        }
+        @media only screen and (min-width: 1024px) {
+          > section, 
+          > article {
+            > aside {
+              padding-left: 0;
+              padding-right: 0;
+            }
+          }
+        }
+      `
+    }
+  }}
+`
+export const BreadcrumbContainer = styled.aside` 
+  position: relative;
+  padding: 18px 16px;
+  text-align: center;
+  > a {
+    &:first-child {
+      display: none;
+    }
+    &:nth-child(2) {
+      display: inline;
+      position: absolute;
+      top: 20px;
+      left: .625em;
+    }
+    > i {
+      float: left;
+      margin-right: 6px;
+    }
+  }
+  span { 
+    display: none; 
+  }
+  @media only screen and (min-width: 375px) {
+    > a {
+      &:nth-child(2) {
+        left: 16px;
+      }
+    }
+  }
+  @media only screen and (min-width: 768px) {
+    padding: 8px 30px 20px;
+    text-align: left;
+    b {
+      font-size: .875rem;
+      line-height: 1;
+    }
+    span { 
+      display: inline; 
+    }
+    a {
+      &:first-child {
+        display: inline;
+      }
+      &:nth-child(2) {
+        display: none;
+      }
+    }
+  }
 `
 export const InfoGroup = styled.div`
   display: inline-grid;
@@ -244,4 +318,10 @@ export const InputGroup = styled.article<{ $mode?: string, $required?: boolean }
     display: grid; 
   }
   ${getInputGroupModFunc}
+`
+export const BoxContainer = styled.aside` 
+  position: relative;
+  @media only screen and (min-width: 768px) {
+    padding-bottom: 16px;
+  }
 `

package/src/components/index.ts

@@ -17,7 +17,7 @@ export { default as SelectComponent } from './select';
 export { default as MenuList } from './select/menulist';
 export { default as ErrorComponent } from './error';
 export { default as UploadComponent } from './upload';
-export { default as UploadDragDropComponent } from './upload/drag_drop';
+export { default as UploadDragDropComponent } from './upload/drag.drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
 export { default as DateComponent } from './date';